fix: precached files are not updated (#386)

* fix: precached files are not updated

* refactor: move randomString to utils

* refactor: apply default revision in options.js

* test: update snapshot

* test: fix revision

Co-authored-by: pooya parsa <[email protected]>

Author: kedrzu

lib/workbox/module.js

@@ -35,6 +35,7 @@ module.exports = async function nuxtWorkbox (nuxt, pwa, moduleContainer) {
           'importScripts',
           'config',
           'cacheNames',
+          'cacheOptions',
           'clientsClaim',
           'skipWaiting',
           'cleanupOutdatedCaches',

lib/workbox/options.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const { joinUrl, getRouteParams, startCase } = require('../utils')
+const { randomString } = require('./utils')
 const defaults = require('./defaults')
 
 function getOptions (nuxt, pwa) {
@@ -81,6 +82,17 @@ function getOptions (nuxt, pwa) {
     options.cacheOptions.cacheId = (process.env.npm_package_name || 'nuxt') + (nuxt.options.dev ? '-dev' : '-prod')
   }
 
+  // Default revision
+  if (!options.cacheOptions.revision) {
+    options.cacheOptions.revision = randomString(12)
+  }
+
+  // Normalize preCaching
+  options.preCaching = options.preCaching.map(url => ({
+    revision: options.cacheOptions.revision,
+    ...(typeof url === 'string' ? { url } : url)
+  }))
+
   // Normalize runtimeCaching
   const pluginModules = {
     BackgroundSync: 'backgroundSync.BackgroundSyncPlugin',

lib/workbox/templates/sw.js

@@ -50,6 +50,7 @@ function precacheAssets(workbox, options) {
   }
 }
 
+
 function runtimeCaching(workbox, options) {
   for (const entry of options.runtimeCaching) {
     const urlPattern = new RegExp(entry.urlPattern)

lib/workbox/utils.js

@@ -29,8 +29,21 @@ async function copyTemplate ({ src, dst, options }) {
   await writeFile(dst, compile({ options }))
 }
 
+function randomString (length) {
+  const result = []
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+
+  for (let i = 0; i < length; i++) {
+    const char = characters.charAt(Math.floor(Math.random() * characters.length))
+    result.push(char)
+  }
+
+  return result.join('')
+}
+
 module.exports = {
   readJSFiles,
   pick,
-  copyTemplate
+  copyTemplate,
+  randomString
 }

test/__snapshots__/pwa.test.js.snap

@@ -142,7 +142,7 @@ exports[`pwa manifest.json 1`] = `
 `;
 
 exports[`pwa sw.js 1`] = `
-"const options = {\\"workboxURL\\":\\"https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js\\",\\"importScripts\\":[\\"custom-sw.js\\"],\\"config\\":{\\"debug\\":true},\\"cacheNames\\":{\\"prefix\\":\\"test\\",\\"googleAnalytics\\":\\"test-ga\\"},\\"clientsClaim\\":true,\\"skipWaiting\\":true,\\"cleanupOutdatedCaches\\":true,\\"offlineAnalytics\\":true,\\"preCaching\\":[\\"/?standalone=true\\",\\"precache.js\\"],\\"runtimeCaching\\":[{\\"urlPattern\\":\\"https://google.com/.*\\",\\"handler\\":\\"CacheFirst\\",\\"method\\":\\"GET\\",\\"strategyPlugins\\":[]},{\\"urlPattern\\":\\"https://pwa.nuxtjs.org/.*\\",\\"handler\\":\\"CacheFirst\\",\\"method\\":\\"GET\\",\\"strategyOptions\\":{\\"cacheName\\":\\"nuxt-pwa\\"},\\"strategyPlugins\\":[{\\"use\\":\\"expiration.ExpirationPlugin\\",\\"config\\":[{\\"maxEntries\\":10,\\"maxAgeSeconds\\":300}]}]},{\\"urlPattern\\":\\"/_nuxt/\\",\\"handler\\":\\"CacheFirst\\",\\"method\\":\\"GET\\",\\"strategyPlugins\\":[]},{\\"urlPattern\\":\\"/\\",\\"handler\\":\\"NetworkFirst\\",\\"method\\":\\"GET\\",\\"strategyPlugins\\":[]}],\\"offlinePage\\":null,\\"pagesURLPattern\\":\\"/\\",\\"offlineStrategy\\":\\"NetworkFirst\\"}
+"const options = {\\"workboxURL\\":\\"https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js\\",\\"importScripts\\":[\\"custom-sw.js\\"],\\"config\\":{\\"debug\\":true},\\"cacheNames\\":{\\"prefix\\":\\"test\\",\\"googleAnalytics\\":\\"test-ga\\"},\\"cacheOptions\\":{\\"revision\\":\\"test-rev\\",\\"cacheId\\":\\"@nuxtjs/pwa-prod\\"},\\"clientsClaim\\":true,\\"skipWaiting\\":true,\\"cleanupOutdatedCaches\\":true,\\"offlineAnalytics\\":true,\\"preCaching\\":[{\\"revision\\":\\"test-rev\\",\\"url\\":\\"/?standalone=true\\"},{\\"revision\\":\\"test-rev\\",\\"url\\":\\"precache.js\\"}],\\"runtimeCaching\\":[{\\"urlPattern\\":\\"https://google.com/.*\\",\\"handler\\":\\"CacheFirst\\",\\"method\\":\\"GET\\",\\"strategyPlugins\\":[]},{\\"urlPattern\\":\\"https://pwa.nuxtjs.org/.*\\",\\"handler\\":\\"CacheFirst\\",\\"method\\":\\"GET\\",\\"strategyOptions\\":{\\"cacheName\\":\\"nuxt-pwa\\"},\\"strategyPlugins\\":[{\\"use\\":\\"expiration.ExpirationPlugin\\",\\"config\\":[{\\"maxEntries\\":10,\\"maxAgeSeconds\\":300}]}]},{\\"urlPattern\\":\\"/_nuxt/\\",\\"handler\\":\\"CacheFirst\\",\\"method\\":\\"GET\\",\\"strategyPlugins\\":[]},{\\"urlPattern\\":\\"/\\",\\"handler\\":\\"NetworkFirst\\",\\"method\\":\\"GET\\",\\"strategyPlugins\\":[]}],\\"offlinePage\\":null,\\"pagesURLPattern\\":\\"/\\",\\"offlineStrategy\\":\\"NetworkFirst\\"}
 
 importScripts(...[options.workboxURL, ...options.importScripts])
 
@@ -194,6 +194,7 @@ function precacheAssets(workbox, options) {
   }
 }
 
+
 function runtimeCaching(workbox, options) {
   for (const entry of options.runtimeCaching) {
     const urlPattern = new RegExp(entry.urlPattern)

test/fixture/nuxt.config.js

@@ -36,6 +36,9 @@ module.exports = {
       prefix: 'test',
       googleAnalytics: 'test-ga'
     },
+    cacheOptions: {
+      revision: 'test-rev'
+    },
     importScripts: [
       'custom-sw.js'
     ],