pwa

pwa copied to clipboard

I want to show a message when a new service worker has been installed and found this comment in the service-worker-prod.js file.

It's the perfect time to display a "New content is available; please refresh." message in the page's interface.

So my question is, how do I do this the best way? Can i some how access my App.vue´s methods or is it best to use vuex store to show a message box?

Me too, in fact, I did this and worked on desktop, but not in mobile.

I converted the service worker code from this template over to basically use what create-react-app uses where the service worker registration code is compiled with webpack (it's not in this template).

CRA progressive web app information

1. Delete build/service-worker-prod.js and build/service-worker-dev.js and related loading code from index.html and from build/webpack.dev.js and build/webpack.prod.js
2. Port over src/registerServiceWorker.js from CRA
3. Add proper import from src/index.js

Then you can import your Vuex store into src/registerServiceWorker.js and dispatch a notification like this:

const notifyUserAboutUpdate = worker =>
  store.dispatch(NEW_NOTIFICATION, {
    text: 'App update available!',
    secondary: true,
    showReloadButton: true,
    timeout: 0,
    onClick: () => worker.postMessage({action: 'skipWaiting'})
  })

function registerValidSW (swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      if (registration.waiting) {
        console.log('New content has been available from last session; please refresh.')
        notifyUserAboutUpdate(registration.waiting)
        return
      }

      registration.onupdatefound = () => {
        const installingWorker = registration.installing
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, 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 your web app.
              console.log('New content is available; please refresh.')
              notifyUserAboutUpdate(installingWorker)
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.')
            }
          }
        }
      }
    })
    .catch(error => {
      console.error('Error during service worker registration:', error)
    })
}

There is a simpler way to access your Vue app from the outside. In your main.js prepend before new Vue():

window.App = new Vue({ ... })

Then your App instance is available in the global scope, you can access App.$data, App.$store and so on.

Many thanks @flybayer

There is a simpler way to access your Vue app from the outside. In your main.js prepend before new Vue():

window.App = new Vue({ ... })

Then your App instance is available in the global scope, you can access App.$data, App.$store and so on.

It can be much cleaner to use EventBus

There is a simpler way to access your Vue app from the outside. In your main.js prepend before new Vue():

window.App = new Vue({ ... })

Then your App instance is available in the global scope, you can access App.$data, App.$store and so on.

It can be much cleaner to use EventBus

how to do that, please