feat(workbox): enabled option and self destroying sw

Author: pi0

docs/content/en/workbox.md

@@ -38,13 +38,15 @@ pwa: {
 
 (Boolean) Automatically register `/sw.js` on page load. Enabled by default.
 
-### `dev`
+### `enabled`
 
-(Boolean) Enable workbox in dev mode of nuxt. (Disabled by default - Not recommended)
+(Boolean) Enable workbox module. Workbox is **only enabled for production mode by default**.
 
-**IMPORTANT NOTE:** Remember to clean application data and unregister service workers in your browser or you will experience infinity loop!
+**IMPORTANT NOTES:**
 
-It is recommended to test workbox using `nuxt build`/`nuxt start`. You can enable debug mode using `workbox.config.debug`.
+- It is recommended to test workbox using `nuxt build`/`nuxt start`. You can enable debug mode using `workbox.config.debug` for production to debug.
+- When setting `enabled` to `true`, remember to clean application data and unregister service workers in your browser when changing mode between dev or prod to avoid issues.
+- When `enabled` is set to `false` (default for `nuxt dev`) workbox module registers a self-destroying worker and cleans `window.caches`. To completely disable module you can set `pwa.workbox: false` in `nuxt.config`.
 
 <!-- Config -->
 

lib/workbox/defaults.js

@@ -4,7 +4,7 @@ module.exports = {
   workboxURL: undefined,
   importScripts: [],
   autoRegister: true,
-  dev: undefined,
+  enabled: undefined,
 
   // Config
   config: {},

lib/workbox/module.js

@@ -11,13 +11,13 @@ module.exports = function nuxtWorkbox (pwa) {
     // Warning for dev option
     if (options.dev) {
       // eslint-disable-next-line no-console
-      console.warn('Workbox running in `dev` mode. Please clear browser cache and prevent using this option for production!')
+      console.warn('Workbox is running in development mode')
     }
 
     // Register plugin
     if (options.autoRegister) {
       this.addPlugin({
-        src: path.resolve(__dirname, 'templates/workbox.js'),
+        src: path.resolve(__dirname, `templates/workbox${options.enabled ? '' : '.unregister'}.js`),
         ssr: false,
         fileName: 'workbox.js',
         options: {

lib/workbox/options.js

@@ -5,6 +5,11 @@ const defaults = require('./defaults')
 function getOptions (pwa) {
   const options = { ...defaults, ...pwa.workbox }
 
+  // enabled
+  if (options.enabled === undefined) {
+    options.enabled = !this.options.dev || options.dev /* backward compat */
+  }
+
   // routerBase
   if (!options.routerBase) {
     options.routerBase = this.options.router.base
@@ -18,8 +23,7 @@ function getOptions (pwa) {
 
   // swTemplate
   if (!options.swTemplate) {
-    const disabled = this.options.dev && !options.dev
-    options.swTemplate = path.resolve(__dirname, `templates/sw${disabled ? '.disable' : ''}.js`)
+    options.swTemplate = path.resolve(__dirname, `templates/sw${options.enabled ? '' : '.unregister'}.js`)
   }
 
   // swDest

lib/workbox/templates/sw.disable.js

@@ -0,0 +1,17 @@
+// THIS FILE SHOULD NOT BE VERSION CONTROLLED
+
+// https://github.com/NekR/self-destroying-sw
+
+self.addEventListener('install', function (e) {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (e) {
+  self.registration.unregister()
+    .then(function () {
+      return self.clients.matchAll()
+    })
+    .then(function (clients) {
+      clients.forEach(client => client.navigate(client.url))
+    })
+})

lib/workbox/templates/sw.unregister.js

@@ -0,0 +1,20 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.getRegistrations().then((registrations) => {
+    for (const registration of registrations) {
+      // Force update service worker for self-unregister
+      registration.update()
+    }
+  })
+}
+
+if ('caches' in window) {
+  caches.keys()
+    .then((keys) => {
+      if (keys.length) {
+        console.info('[pwa] [workbox] Cleaning cache for:', keys.join(', '))
+        for (const key of keys) {
+          caches.delete(key)
+        }
+      }
+    })
+}