I’ve created a PWA Clock App for work and until recently I could have a single page dynamically load ANY employee clock profile by simply doing the following:
- Type their unique link in the browser:
https://example.com/clock/?id=1001
- Click Share then click Add To Home Screen.
- Set a custom name for the icon if I want to.
- Click Add.
Done. Awesome web app ready to use.
Then one day… this stopped working on everyone’s phone. Meaning…
Forget this:
// https://example.com/clock/?id=1001
const parsedUrl = new URL(window.location.href);
const employeeId = parseInt(parsedUrl.searchParams.get("id")); // "1001"
And also, forget this:
// https://example.com/clock/#1001
// https://example.com/clock#1001
const employeeId = parseInt(window.location.hash.slice(1)); // "1001"
After hours of frustration I’ve decided to do the dumbest thing I could think of which is to create a physical directory for an employee using the same employee id just to say I’ve tried everything I could think of and what do you know… It worked.
Now I have to use this:
// https://example.com/clock/1001
const parsedUrl = new URL(window.location.href);
const pathParts = parsedUrl.pathname.split('/');
const employeeId = parseInt(pathParts[pathParts.length - 1]); // "1001"