Service Workers with Vue and Bundling

I did not use your plugins but I used workbox plugin for Vue. The configuration is quite simple and well documented.

Installing in an Already Created Project

vue add workbox-pwa

Config example

// Inside vue.config.jsmodule.exports = {  // ...other vue-cli plugin options...  pwa: {    name: 'My App',    themeColor: '#4DBA87',    msTileColor: '#000000',    appleMobileWebAppCapable: 'yes',    appleMobileWebAppStatusBarStyle: 'black',    manifestOptions: {      start_url: '/'    },    // configure the workbox plugin    workboxPluginMode: 'GenerateSW', // 'GenerateSW' will lead to a new service worker file being created each time you rebuild your web app.    workboxOptions: {      swDest: 'service-worker.js'    }  }}

You could use service-worker-loader instead (which is based on worker-loader).

1. Install service-worker-loader:

   npm i -D service-worker-loader

2. Create a service worker script (e.g., at ./src/sw.js) with the following example contents:

   import { format } from 'date-fns'self.addEventListener('install', () => {  console.log('Service worker installed', format(new Date(), `'Today is a' eeee`))})

3. Import the service worker script in your entry file:

   // main.jsimport registerServiceWorker from 'service-worker-loader!./sw'registerServiceWorker({ scope: '/' }).then(registration => {  //...  registration.showNotification('Notification Title', {    body: 'Hello world!',  })})

demo