feat(workbox): preCaching option

Author: pooya parsa

docs/modules/workbox.md

@@ -67,14 +67,21 @@ It is recommanded to test workbox using `nuxt build`/`nuxt start`. You can enabl
 
 <!-- Precache -->
 
+### `preCaching`
+
+(Array) Cache a set of files when registering service worker. Default is `[]`
+
+Workbox takes a lot of the heavy lifting out of precaching by simplifying the API and ensuring assets are downloaded efficiently.
+
 ### `cacheOptions`
 
 (Object) Default:
 
 ```js
 {
   cacheId: '<npm package name> || nuxt',
-  directoryIndex: '/'
+  directoryIndex: '/',
+  revision: undefined
 }
 ```
 

packages/workbox/lib/defaults.js

@@ -14,9 +14,11 @@ module.exports = {
   workboxExtensions: [],
 
   // Precache
+  preCaching: [],
   cacheOptions: {
     cacheId: process.env.npm_package_name || 'nuxt',
-    directoryIndex: '/'
+    directoryIndex: '/',
+    revision: undefined
   },
   cachingExtensions: [],
 

packages/workbox/lib/options.js

@@ -56,6 +56,16 @@ function getOptions (moduleOptions) {
     })
   }
 
+  // Add offlineAssets to precaching
+  if (options.offlineAssets.length) {
+    options.preCaching.unshift(...options.offlineAssets)
+  }
+
+  // Add offlinePage to precaching
+  if (options.offlinePage) {
+    options.preCaching.unshift(options.offlinePage)
+  }
+
   // Normalize runtimeCaching
   options.runtimeCaching = options.runtimeCaching.map(entry => ({
     ...entry,

packages/workbox/templates/sw.js

@@ -33,17 +33,9 @@ workbox.googleAnalytics.initialize()
 // Precaches
 // --------------------------------------------------
 
-// Precache build artifacts
-workbox.precaching.precacheAndRoute([], <%= JSON.stringify(options.cacheOptions, null, 2) %>)
-
-<% if (options.offlineAssets.length) { %>
-// Precache offlineAssets
-workbox.precaching.precacheAndRoute([<%= options.offlineAssets.map((i) => `'${i}'`).join(', ') %>])
-<% } %>
-
-<% if (options.offlinePage) { %>
-// Precache offlinePage
-workbox.precaching.precacheAndRoute(['<%= options.offlinePage %>'])
+// Precache assets
+<% if (options.preCaching.length) { %>
+workbox.precaching.precacheAndRoute(<%= JSON.stringify(options.preCaching, null, 2) %>, <%= JSON.stringify(options.cacheOptions, null, 2) %>)
 <% } %>
 
 <% if (options.cachingExtensions) { %>

test/__snapshots__/pwa.test.js.snap

@@ -79,8 +79,13 @@ workbox.googleAnalytics.initialize()
 // Precaches
 // --------------------------------------------------
 
-// Precache build artifacts
-workbox.precaching.precacheAndRoute([], {
+// Precache assets
+
+workbox.precaching.precacheAndRoute([
+  \\"/offline.html\\",
+  \\"/offline.png\\",
+  \\"precahce.1.js\\"
+], {
   \\"cacheId\\": \\"nuxt\\",
   \\"directoryIndex\\": \\"/\\"
 })
@@ -96,7 +101,12 @@ workbox.precaching.precacheAndRoute([], {
 // Register route handlers for runtimeCaching
 workbox.routing.registerRoute(new RegExp('https://google.com/.*'), workbox.strategies.cacheFirst ({}), 'GET')
 workbox.routing.registerRoute(new RegExp('/_nuxt/(?!.*(__webpack_hmr|hot-update))'), workbox.strategies.cacheFirst ({}), 'GET')
-workbox.routing.registerRoute(new RegExp('^/(?!.*(__webpack_hmr|hot-update))'), workbox.strategies.networkFirst ({}), 'GET')
+
+// Register router handler for offlinePage
+workbox.routing.registerRoute(new RegExp('/.*'), ({event}) => {
+  return workbox.strategies.networkOnly().handle({event})
+    .catch(() => caches.match('/offline.html'))
+})
 
 // -- Start of routingExtensions --
 // Routing Extension

test/fixture/nuxt.config.js

@@ -42,6 +42,14 @@ module.exports = {
     routingExtensions: [
       '~/sw/routing'
     ],
+    preCaching: [
+      'precahce.1.js'
+    ],
+    offline: true,
+    offlinePage: '/offline.html',
+    offlineAssets: [
+      '/offline.png'
+    ],
     runtimeCaching: [
       {
         urlPattern: 'https://google.com/.*',