I am wanting to have two progressive web apps for a domain www.xyz/user1.com and www.xyz/user2.com.

I have tried to do this in each of the user1 and user2 HTML files:

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('/sw.js'), {
                scope: '/'
            }
                .then(() => {
                    console.log('Service worker registered');
                })
                .catch(err => {
                    console.log('Service worker registration failed: ' + err);
                });
    }
</script>

As well as creating two separate manifest.json files with:

{
  "short_name": "User 1",
  "name": "User 1",
  "icons": [
    {
      "src": "/img.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "display": "standalone",
  "theme_color": "#fff"
}

This does not work as when I download the PWA from one domain, the other domain just wants to open with that PWA - e.g. when I download User1, I can then only open User2 with User1 whereas I want these as two separate apps. Any help would be appreciated!