DEV Community

Antony Kidless
Antony Kidless

Posted on

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.

Yes or No decision maker

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 = [

this.addEventListener('install', function(event) {
  event.waitUntil( {
      return cache.addAll(urlsToPrefetch);

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


Now we connect the manifest.json

<link rel="manifest" href="">

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.

Top comments (0)