PWA Service Worker

App.vue

<template>
  <div id="app">
    <h1>My app</h1>
  </div>
</template>

<script>
export default {
  name: 'My app',
  mounted() {
    document.addEventListener('updateReady', this.showRefreshUI);
  },
  beforeDestroy() {
    document.removeEventListener('updateReady', this.showRefreshUI);
  },
  methods: {
    showRefreshUI: function() {
      alert('Pew version available, please reload!');
    }
  }
};
</script>

registerServiceWorker.js

/* eslint-disable no-console */

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

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' +
          'For more details, visit https://goo.gl/AFskqB'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated(registration) {
      new CustomEvent('swUpdated', { detail: registration });
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

service-worker.js

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.core.setCacheNameDetails({
  prefix: 'tramspotter',
  suffix: 'v0.2.4'
});
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});