CODEWITHSUNDEEP
vue.jsservice-workerprogressive-web-appsvuetify.jsworkbox
raklos
raklos

Reputation: 28555

Show updated PWA created in Vue

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`);
    }

Upvotes: 1

Views: 3912

Answers (2)

arpeggie
arpeggie

Reputation: 45

I get it work by following the offer_a_page_reload_for_users. The original registerServiceWorker.js seems redundant though.

src/registerServiceWorker.js

import { Workbox } from "workbox-window";

if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
  const wb = new Workbox("/service-worker.js");

  wb.addEventListener("waiting", () => {
    const result = window.confirm("refresh now?");
    if (result) {
      wb.messageSW({ type: "SKIP_WAITING" });
    }
  });

  wb.addEventListener("controlling", () => {
    window.location.reload();
  });

  wb.register();
}

Upvotes: 1

IMRZ
IMRZ

Reputation: 216

Not sure what exactly your setup setup is, but it should be similar. Using the @vue/cli-plugin-pwa and with minimal setup below.

This will show a dialog when a new version of your app is available. Clicking yes will update your app. You will have to refresh the page somehow to actually show the new version, but that is up to you on how solve that.

vue.config.js:

module.exports = {
  pwa: {
    name: "name-of-your-app",
    short_name: "noya",
    themeColor: "#000000",
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js" // CHECK CORRECT PATH!
    }
  }
};

src/main.js:

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
// whatever other imports...

new Vue({
  render: h => h(App)
}).$mount("#app");

src/registerServiceWorker.js:

import { register } from "register-service-worker";

if (process.env.NODE_ENV === "production") {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated(registration) {
      if (window.confirm("A new version is available, update now?")) {
        const worker = registration.waiting;
        worker.postMessage({ action: "SKIP_WAITING" });
        // refresh the page or trigger a refresh programatically!  
      }
    }
  });
}

src/service-worker.js:

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

self.addEventListener("message", (event) => {
  if (event.data.action == "SKIP_WAITING") self.skipWaiting();
});

Upvotes: 3

Related Questions