#StackBounty: #vue.js #service-worker #progressive-web-apps #vuetify.js #workbox Show updated PWA created in Vue

Bounty: 50

I uasing Vue.js with Vuetify and creating a PWA.

I have service-worker.js in /public folder
A snippet from vue.config.js:

     pwa: {

        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
          // swSrc is required in InjectManifest mode.
          swSrc: 'public/service-worker.js',
          // ...other Workbox options...
        }
      }

This looks too be working good and caching the shell etc.

I run build and serve up the project
npm run build

The problem i have is when i update any files, i can’t see the updated changes.

when i navigate to the url in my android device the page remains as the old one (cached).

How can i get it to update?

I tried including this code in index.html, but no success:

https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users

service-worker.js

    importScripts("/precache-manifest.8812c20b1b3401cbe039782d13cce03d.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

    console.log(`Hello from service worker`);
    if (workbox) {
      console.log(`Workbox is loaded`);


      self.__precacheManifest = [].concat(self.__precacheManifest || []);
      workbox.precaching.suppressWarnings();
      workbox.precaching.precacheAndRoute(self.__precacheManifest, {});



      addEventListener('message', (event) => {
        if (event.data && event.data.type === 'SKIP_WAITING') {
          skipWaiting();
        }
      });

    }
    else {
      console.log(`Workbox didn't load`);
    }


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.