feat(worbox): offlineAssets (#86)

Author: galvez

docs/modules/workbox.md

@@ -23,9 +23,11 @@ workbox: {
 
 **importScripts** (Array) - Additional scripts to be imported in service worker script. (Relative to `/`. Can be placed in `assets/` directory)
 
+**offlineAssets** (String) - List of assets to precache, in case you need extra files precached other than the ones automatically processed (`_nuxt/*` etc) or you want to ensure assets used by your `offlinePage`. (Example: `['/offline.png']`)
+
 **offlinePage** (String) - Enables routing all offline requests to the specified path. (Example: `/offline.html`)
 
-**offlinePageAssets** (String) - List of offline page assets to precache (Example: `['/offline.png']`)
+**Please note** that enabling `offlinePage` will disable `/.*` caching and will route all offline requests to the specified path. Nuxt assets are still precached as are the ones specified in `offlineAssets`.
 
 **cachingExtensions** (String) - Loads and inserts the contents of the specified file path into the service worker script, below autogenerated calls to `workbox.precaching.*`. You may add as many extra calls as you want to this file.
 

packages/workbox/index.js

@@ -90,7 +90,7 @@ function getOptions (moduleOptions) {
     },
     offline: true,
     offlinePage: null,
-    offlinePageAssets: [],
+    offlineAssets: [],
     _runtimeCaching: [
       // Cache all _nuxt resources at runtime
       // They are hashed by webpack so are safe to loaded by cacheFirst handler
@@ -104,6 +104,13 @@ function getOptions (moduleOptions) {
 
   const options = defaultsDeep({}, this.options.workbox, moduleOptions, defaults)
 
+  // Backward compatibility
+  // https://github.com/nuxt-community/pwa-module/pull/86
+  if (Array.isArray(options.offlinePageAssets)) {
+    options.offlineAssets = options.offlineAssets.concat(options.offlinePageAssets)
+    delete options.offlinePageAssets
+  }
+
   // Optionally cache other routes for offline
   if (options.offline && !options.offlinePage) {
     options._runtimeCaching.push({
@@ -134,7 +141,7 @@ function addTemplates (options) {
     fileName: 'sw.template.js',
     options: {
       offlinePage: options.offlinePage,
-      offlinePageAssets: options.offlinePageAssets,
+      offlineAssets: options.offlineAssets,
       cachingExtensions: options.cachingExtensions,
       routingExtensions: options.routingExtensions,
       importScripts: [options.wbDst].concat(options.importScripts || []),

packages/workbox/templates/sw.template.js

@@ -1,13 +1,10 @@
 importScripts(<%= options.importScripts.map((i) => `'${i}'`).join(', ') %>)
 
 workbox.precaching.precacheAndRoute([], <%= JSON.stringify(options.wbOptions, null, 2) %>)
-
-<% if (options.offlinePage) { %>
-workbox.precaching.precacheAndRoute(['<%= options.offlinePage %>'])
-<% if (options.offlinePageAssets.length) { %>
-workbox.precaching.precacheAndRoute([<%= options.offlinePageAssets.map((i) => `'${i}'`).join(', ') %>])
-<% } %>
+<% if (options.offlineAssets.length) { %>
+workbox.precaching.precacheAndRoute([<%= options.offlineAssets.map((i) => `'${i}'`).join(', ') %>])
 <% } %>
+<% if (options.offlinePage) { %>workbox.precaching.precacheAndRoute(['<%= options.offlinePage %>'])<% } %>
 <% if (options.cachingExtensions) { %><%= options.cachingExtensions %><% } %>
 <% if (options.clientsClaim) { %>workbox.clientsClaim()<% } %>
 <% if (options.skipWaiting) { %>workbox.skipWaiting()<% } %>