App.vue

<template>
  <button
    v-if="updateExists"
    @click="refreshApp"
  >
    New version available! Click to update
  </button>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      refreshing: false,
      registration: null,
      updateExists: false,
    };
  },
  
  created () {
    // Listen for swUpdated event and display refresh snackbar as required.
    document.addEventListener('swUpdated', this.showRefreshUI, { once: true });

    // Refresh all open app tabs when a new service worker is installed.
    if (navigator.serviceWorker) {
      navigator.serviceWorker.addEventListener('controllerchange', () => {
        if (this.refreshing) return;

        this.refreshing = true;
        window.location.reload();
      });
    }
  },

  methods: {
    showRefreshUI (e) {
      // Display a button inviting the user to refresh/reload the app due
      // to an app update being available.

      // The new service worker is installed, but not yet active.

      // Store the ServiceWorkerRegistration instance for later use.
      this.registration = e.detail;

      this.updateExists = true;
    },

    refreshApp () {
      // Handle a user tap on the update app button.

      this.updateExists = false;

      // Protect against missing registration.waiting.
      if (!this.registration || !this.registration.waiting) { return; }

      this.registration.waiting.postMessage('skipWaiting');
    },
  },
}
</script>