Service worker not being added to production.

[mesqueeb]

I noticed that my service worker wasn't refreshing to the new one any more.
When checking dist/pwa-ios I can't find any of my service worker code inside the service-worker.js file.

In my service-worker-prod.js I have:

            installingWorker.onstatechange = function () {
              switch (installingWorker.state) {
                case 'installed':
                  // At this point, the old content will have been purged and the
                  // fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in the page's interface.
                  if (!window.QNotify) {
                    window.location.reload()
                    break;
                  }
                  window.QNotify({
                    message: window.store.getters.text.global.newVersionAvailable,
                    timeout: 10000,
                    type: 'info',
                    actions: [{
                      label: window.store.getters.text.global.refresh,
                      handler: function () { window.location.reload() }
                    }]
                  })
                  break;

This code is not added to the dist service-worker it seems... (I searched for QNotify and reload() etc.)

This code however, is critical to always have the latest version for my users.

PS: is there any better way to write the "please reload page" code?

[nothingismagick]

I hope this will be resolved with the switch to webpack 4. Please see:
webpack/webpack#7056

Adding @rstoenescu for tracking this issue.

[mesqueeb]

Will Quasar switch to Webpack 4 soon?
I read that some native webpack tree-shaking that was previously broken is all solved in version 4. : )

[rstoenescu]

Quasar CLI with webpack 4 is in internal testing at the moment. Will be released shortly after I get back from my short vacation.

[mesqueeb]

Let us know if we can help! It's kinda hard living without my service workers. lol
: D

[rstoenescu]

Invalid report. Code gets embedded in index.html.
No need to wait for the webpack4 based CLI.

[mesqueeb]

@rstoenescu I see that my code in service-worker-prod.js is included in the index.html of the dist/pwa-ios.

However, I did notice that my service worker wasn't prompting my users anymore to refresh the page to get the new service worker. Also I wonder why there is a second service-worker added as service-worker.js to the dist folder?

This was only after the macOS/iOS update which had the new Apple-style service workers.

[rstoenescu]

There's only one service-worker. "service-worker.js" is used to manage the SW, and your "service-worker-prod.js" file is used to register that service worker and catch the events emitted by it. If your events are not working as expected, pls inspect them. No fault in Quasar on this one.

Also please note that the Webpack4 CLI will have the "register service worker" much much easier to cope with ;)

[mygnu]

hi @rstoenescu where do you edit/modify that "service-worker.js" file, src-pwa has only service-worker.{prod.js,dev.js} if i create a new file it doesn't get included.
Are we missing something?

[rstoenescu]

Hi @mygnu , just edit those two. Most likely you want to edit the one ending with "prod.js". There's only one service-worker that can run at a time, so why adding another file?

[mygnu]

Thanks @rstoenescu I think I'm missing something here, let's say
if i make a change in service-worker.prod.js that gets added to index.html file. but upon building the project, webpack also generates the service-worker.js file in the root dir. this is where the service worker is following is the example of the output service-worker.js file

'use strict';
var precacheConfig = [
    ['app.eaa825174045b9a804a2632f39c252d8.css', '11ac52a1b3fe8cc390ac0fdd3ec96396'],
    ['fonts/Roboto-Bold.ad140ff.woff', 'ad140ff02a7091257e2b31619106194e'],
    ['fonts/Roboto-Light.37fbbba.woff', '37fbbbad5577a95bdf058307c717c882'],
    ['fonts/Roboto-Medium.303ded6.woff', '303ded6436dcf7ea75157e2aeff876ce'],
    ['fonts/Roboto-Regular.081b11e.woff', '081b11ebaca8ad30fd092e01451015dc'],
    ['fonts/Roboto-Thin.90d3804.woff', '90d3804f0231704c15ccc5861245e8ce'],
    ['fonts/fa-light-300.9228ba6.woff', '9228ba67c398cbec427a739fb4f0ae69'],
    ['fonts/fa-light-300.9dd2364.ttf', '9dd236466cb7d88990013d92596fac66'],
    ['fonts/fa-light-300.c9466c5.woff2', 'c9466c55ff23a5a8789c97ef750ea645'],
    ['fonts/fa-light-300.ea667c4.eot', 'ea667c4dacaaa4eb0f4c18a19479c8d0'],
    ['fonts/fa-regular-400.19dd848.ttf', '19dd8480b75f6236cb1a0043ab27e5d0'],
    ['fonts/fa-regular-400.2f7126b.woff2', '2f7126b4061ecfb71b7edc1a5a2c5498'],
    ['fonts/fa-regular-400.92f3ac9.eot', '92f3ac9e89057645ac33a650611e6694'],
    ['fonts/fa-regular-400.9b029dd.woff', '9b029dd85abf87a93781aedb0deb7002'],
    ['fonts/fa-solid-900.2b8bb00.eot', '2b8bb00eb38b4dede9eb7b5ef43d7cf4'],
    ['fonts/fa-solid-900.b785cc8.woff2', 'b785cc8166f279154472f5ac8ad73d8b'],
    ['fonts/fa-solid-900.cc47a11.woff', 'cc47a1156a100247faf6361b45a3b30e'],
    ['fonts/fa-solid-900.d9180d5.ttf', 'd9180d5bd501c7acd75a92ad45f9280a'],
    ['fonts/mdi.6473d7d.woff', '6473d7d5a01bb3f8fccd5bbeaf2be312'],
    ['img/fa-light-300.8cbc64d.svg', '8cbc64df70e811fc2f827f5558a7c183'],
    ['img/fa-regular-400.b35bbeb.svg', 'b35bbeb5a372f515c105574874c2994b'],
    ['img/fa-solid-900.6af4011.svg', '6af4011dec30d97a7ac96a475a822b09'],
    ['index.html', '17d8beb5f35caf5922369fb9802590e8'],
    ['js/0.5bbd1658014acf9516f4.js', '185623b29770e8fc77b5efccc21aab58'],
    ['js/1.66b94a8b23bb6dcd3b4c.js', '21b85c8e491be1e5b80fa7fa6698c153'],
    ['js/10.5eb50dcf48bf93314bcf.js', 'f763ab397e72296b3d24014085989ac4'],
    ['js/11.21c737232e00a1749414.js', '1c735f1cc8ea29fddb66a68c4aee44b4'],
    ['js/12.cd8ea458768826e23f64.js', 'cd753bfc453e916aebbb8ef78dab1c82'],
    ['js/13.594fc7908d450ea756fd.js', '9761234baa93c5fbfb45cf98fb0df132'],
    ['js/14.a2f045695caa39e720e2.js', '09a0aec3b3040a9b6c2763e0f997c5b4'],
    ['js/15.dcf263b3caaf3900be60.js', '4d3ba76969825463005df0f01db7eaf7'],
    ['js/16.febf5532c401fb17290e.js', '2cd106948e3a3d03e5c39480f4c11b90'],
    ['js/17.d227c0f441593d354dd1.js', 'e1281ec2706cad3cd215c3560c5d0409'],
    ['js/2.3763ed32f6eedd8232b0.js', 'd225080ad95905749761f9b361423c63'],
    ['js/3.a337cc144fc68ecdf9a8.js', 'bbef9270cdfaf683bbcd05aa79d2cf1e'],
    ['js/4.7a7fba499a7635966c01.js', '61a8cea3d786a45ce78b8804b5d95fb7'],
    ['js/5.3618dbf212ed261fbafd.js', 'c031dc04832d02402d964a3c21cef4b5'],
    ['js/6.15b0013b4781dac5b8ab.js', '964b495e82b871ac41073aefa4f61eaf'],
    ['js/7.3cba85cfa4a43dcf1f86.js', 'd24fe9cccfcda8ff99f452696d6105e9'],
    ['js/8.6e9f0d379a6ac2ad199e.js', 'c15b7913f3147fff7a32db506ef68760'],
    ['js/9.4ed33578b75d2b436f77.js', '329794f26fff83ffc35b04591877549a'],
    ['js/app.9e1d4dc47be318c4724e.js', 'e9d9e9bfe06d033c020a60387153ad6a'],
    ['js/vendor.178d8c4ecc3f07ebf11b.js', '84f17086dd315c3d19d096100165619f'],
    ['manifest.json', 'a3e1c44857c5bf2c7ae985b168440799'],
    ['statics/162464_311243-lq.mp3', '737dd35649ef8b9346d7d306490445ad'],
    ['statics/202029_2605156-lq.mp3', '94df2de9c2c3bab0e0d77db7c65c827d'],
    ['statics/icons/apple-icon-152x152.png', '4b799633850b808737a95daaa833f397'],
    ['statics/icons/favicon-16x16.png', '46d2106ef89198f3a490ab4f6fabfa19'],
    ['statics/icons/favicon-32x32.png', '9088f2f1a4fe1d06bb6e26381e9ec881'],
    ['statics/icons/favicon-64x64.png', '1a82c071e92ea8a539697c43ddc84972'],
    ['statics/icons/icon-128x128.png', '3548288ed5eb17c532fdb851875da6ce'],
    ['statics/icons/icon-192x192.png', '572ccde6d087dc67efb74bfb039438ef'],
    ['statics/icons/icon-256x256.png', 'b1d440478806d16fb24762f5fdf46873'],
    ['statics/icons/icon-384x384.png', '6d224e459a5deee52784c4931b87a72d'],
    ['statics/icons/icon-512x512.png', 'dd4e5648d7206dcdfa80b0a9aa15e8b1'],
    ['statics/icons/ms-icon-144x144.png', '40f0ca5860868f9574c13e17b7a64328'],
    ['statics/logo.png', '33b858c9221ec3755ded42587e7ba0a7'],
    ['statics/person.svg', 'c10727389ee7c1866059fcf52c22ef32']
  ],
  cacheName = 'sw-precache-v3-lets-organise-' + (self.registration ? self.registration.scope : ''),
  ignoreUrlParametersMatching = [/^utm_/],
  addDirectoryIndex = function(e, a) {
    var c = new URL(e);
    return c.pathname.slice(-1) === '/' && (c.pathname += a), c.toString();
  },
  cleanResponse = function(e) {
    return e.redirected
      ? ('body' in e ? Promise.resolve(e.body) : e.blob()).then(function(a) {
        return new Response(a, {
          headers: e.headers,
          status: e.status,
          statusText: e.statusText
        });
      })
      : Promise.resolve(e);
  },
  createCacheKey = function(e, a, c, f) {
    var t = new URL(e);
    return (
      (f && t.pathname.match(f)) ||
        (t.search += (t.search ? '&' : '') + encodeURIComponent(a) + '=' + encodeURIComponent(c)),
      t.toString()
    );
  },
  isPathWhitelisted = function(e, a) {
    if (e.length === 0) return !0;
    var c = new URL(a).pathname;
    return e.some(function(e) {
      return c.match(e);
    });
  },
  stripIgnoredUrlParameters = function(e, a) {
    var c = new URL(e);
    return (
      (c.hash = ''),
      (c.search = c.search
        .slice(1)
        .split('&')
        .map(function(e) {
          return e.split('=');
        })
        .filter(function(e) {
          return a.every(function(a) {
            return !a.test(e[0]);
          });
        })
        .map(function(e) {
          return e.join('=');
        })
        .join('&')),
      c.toString()
    );
  },
  hashParamName = '_sw-precache',
  urlsToCacheKeys = new Map(
    precacheConfig.map(function(e) {
      var a = e[0],
        c = e[1],
        f = new URL(a, self.location),
        t = createCacheKey(f, hashParamName, c, !1);
      return [f.toString(), t];
    })
  );
function setOfCachedUrls(e) {
  return e
    .keys()
    .then(function(e) {
      return e.map(function(e) {
        return e.url;
      });
    })
    .then(function(e) {
      return new Set(e);
    });
}
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches
      .open(cacheName)
      .then(function(e) {
        return setOfCachedUrls(e).then(function(a) {
          return Promise.all(
            Array.from(urlsToCacheKeys.values()).map(function(c) {
              if (!a.has(c)) {
                var f = new Request(c, { credentials: 'same-origin' });
                return fetch(f).then(function(a) {
                  if (!a.ok) {
                    throw new Error(
                      'Request for ' + c + ' returned a response with status ' + a.status
                    );
                  }
                  return cleanResponse(a).then(function(a) {
                    return e.put(c, a);
                  });
                });
              }
            })
          );
        });
      })
      .then(function() {
        return self.skipWaiting();
      })
  );
}),
self.addEventListener('activate', function(e) {
  var a = new Set(urlsToCacheKeys.values());
  e.waitUntil(
    caches
      .open(cacheName)
      .then(function(e) {
        return e.keys().then(function(c) {
          return Promise.all(
            c.map(function(c) {
              if (!a.has(c.url)) return e.delete(c);
            })
          );
        });
      })
      .then(function() {
        return self.clients.claim();
      })
  );
}),
self.addEventListener('fetch', function(e) {
  if (e.request.method === 'GET') {
    var a,
      c = stripIgnoredUrlParameters(e.request.url, ignoreUrlParametersMatching);
    (a = urlsToCacheKeys.has(c)) ||
        ((c = addDirectoryIndex(c, 'index.html')), (a = urlsToCacheKeys.has(c)));
    0,
    a &&
          e.respondWith(
            caches
              .open(cacheName)
              .then(function(e) {
                return e.match(urlsToCacheKeys.get(c)).then(function(e) {
                  if (e) return e;
                  throw Error('The cached response that was expected is missing.');
                });
              })
              .catch(function(a) {
                return (
                  console.warn(
                    'Couldn\'t serve response for "%s" from cache: %O',
                    e.request.url,
                    a
                  ),
                  fetch(e.request)
                );
              })
          );
  }
});

As you said that there can only be one service worker file, how do i make changes or add code to this file with reference to self self. the code that gets embedded in index.html only registers this service worker. and making changes to service-worker.prod.js only changes embedded code not the service worker itself.
Thank you for your time

[rstoenescu]

@mygnu Please upgrade to Quasar v0.16 (very easy, the CLI will even guide you -- but read the upgrade guide anyway) -- it uses Workbox instead of sw-precache-plugin. With Workbox you can create the service worker file yourself, as opposed to sw-precache which generates it automatically.

So to summarise: there's the service registration file (what in v0.15 was service-worker-[dev/prod].js) and the service worker file (generated automatically by sw-precache in v0.15; in v0.16 you can set quasar.conf > pwa > workboxPluginMode: 'InjectManifest' and the src-pwa/custom-service-worker.js will become your custom written service worker file). If it seems convoluted, please head to the docs. Everything is explained in detail and you'll see it's easy.