Hook in register-service-worker update and display Notification in App

[iklemm]

I hook in register-service-worker.js and want to display a Notification on update. Whats the best way to display a message to the user by notify?

// register-service-worker.js
...
updated (registration) {
 // how to trigger $q.notify('You have an update') on my App?
 },

Can i get access to $q from within the updated method. Or should i dispatch an event e.g. on the windows object that i have to capture in some component?

[dobbel]

@iklemm

here’s service worker code:

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



register(process.env.SERVICE_WORKER_FILE, {
      registrationOptions: { scope: "./" },

    updated(/*registration*/) {
         Notify.create({
            // message: i18n.t('messages.update_available'),
            message: "Update my app",
            icon: "announcement",
            onDismiss() {
                location.reload(true);
            }
        });
   }
});

But beware someone has reported problems with chrome:
https://forum.quasar-framework.org/topic/6959/solved-chrome-but-not-ff-nor-safari-randomly-fails-pwa-update/39?_=1605376523099

[iklemm]

Great, Notify works for me this way. - Thank You!

I just needed the notification at this point.

And yes, updating the app did not work for me either by just doing a forced reloading.

I do have to unregister the serviceworker and afterwards reload the app for a new installation to have all data updated.

Like this:

navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.unregister();
      }
      window.location.reload(true);
    });

Of course there might be more elegeant ways, but this worked for me.

[jaybo_nomad]

@iklemm Did you unregister the service worker within the updated() method in the service worker itself, or in your app code?