Multiple PWA on the same website

Now I will show how to publish 2 PWA within the same domain. This app randomly generates Yes or No.

First PWA

The first application is – Yes / No Wheel.

First you need to create a manifest.json

{
    "name": "Yes or No Wheel",
    "short_name": "Yes / No Wheel",
    "start_url": "/yes-no-decision-maker/wheel-spinner/",
    "scope": "/yes-no-decision-maker/wheel-spinner/",
    "display": "standalone",
    "background_color": "#607D8B",
    "theme_color": "#607D8B",
    "description": "Yes or No? Spin the wheel to decide.",
    "icons": [{
      "src": "/img/icons/pwa_48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/pwa_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }]
  }

Then we create a service worker

const cacheVersion = 'v1';
const urlsToPrefetch = [
  '/yes-no-decision-maker/wheel-spinner/',
];

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheVersion).then(function(cache) {
      return cache.addAll(urlsToPrefetch);
    })
  );
});


this.addEventListener('fetch', event => {
  let responsePromise = caches.match(event.request).then(response => {
    return response || fetch(event.request)
  });

  event.respondWith(responsePromise);
});

Now we connect the manifest.json

<link rel="manifest" href="https://igenerator.net/yes-no-decision-maker/wheel-spinner/manifest.json">

Register service worker

if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/yes-no-decision-maker/wheel-spinner/sw.js', { scope: '/yes-no-decision-maker/wheel-spinner/' }).then(function(registration) {
          console.log('Service worker registration succeeded:', registration);
        }).catch(function(error) {
          console.log('Service worker registration failed:', error);
        });
      } else {
        console.log('Service workers are not supported.');
      }

Second PWA

Second application – Yes / No Button. We do by analogy as in the first case, replacing only the URL and the name of the application.