feat(workbox): precaching (#81)

src/module.ts

@@ -56,7 +56,12 @@ export default defineNuxtModule<PWAOptions>({
     },
     workbox: {
       autoRegister: true,
+      cacheOptions: {
+        directoryIndex: '/',
+        revision: undefined,
+      },
       enabled: !nuxt.options.dev,
+      preCaching: [],
       templatePath: null,
       workboxVersion: '6.5.3',
       workboxUrl: null,

src/parts/workbox/index.ts

@@ -1,7 +1,9 @@
 import { addTemplate, useNuxt } from '@nuxt/kit'
 import consola from 'consola'
 import { join } from 'pathe'
+import { randomString } from '../../utils'
 import type { PWAContext } from '../../types'
+import type { WorkboxOptions } from './types'
 
 export default async (pwa: PWAContext) => {
   if (!pwa.workbox || !pwa.workbox.enabled)
@@ -18,6 +20,16 @@ export default async (pwa: PWAContext) => {
   if (!options.workboxUrl)
     options.workboxUrl = `https://storage.googleapis.com/workbox-cdn/releases/${options.workboxVersion}/workbox-sw.js`
 
+  if (!options.cacheOptions.revision)
+    options.cacheOptions.revision = randomString(12)
+
+  const normalizePreCaching = (arr: WorkboxOptions['preCaching']) => arr.map(url => ({
+    revision: options.cacheOptions.revision!,
+    url: typeof url === 'string' ? url : url.url,
+  }))
+
+  options.preCaching = normalizePreCaching(options.preCaching)
+
   // Define Service Worker
   addTemplate({
     src: options.templatePath ? await pwa._resolver.resolvePath(options.templatePath) : pwa._resolver.resolve('../templates/workbox/sw.js'),

src/parts/workbox/types.ts

@@ -1,6 +1,11 @@
 export interface WorkboxOptions {
   autoRegister: boolean
+  cacheOptions: {
+    directoryIndex: string
+    revision: string | undefined
+  }
   enabled: boolean
+  preCaching: Array<string | { revision: string; url: string }>
   templatePath: string | null
   workboxVersion: string
   workboxUrl: string | null

src/utils.ts

@@ -0,0 +1,4 @@
+export function randomString (length: number) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  return Array.from({ length }, () => characters.charAt(Math.floor(Math.random() * characters.length))).join('')
+}

templates/workbox/sw.js

@@ -1,4 +1,6 @@
-importScripts('<%= options.workboxUrl %>')
+const options = <%= JSON.stringify(options) %>
+
+importScripts(options.workboxUrl)
 
 self.addEventListener('install', () => self.skipWaiting())
 self.addEventListener('activate', () => self.clients.claim())
@@ -7,6 +9,7 @@ const { registerRoute } = workbox.routing
 const { NetworkFirst, StaleWhileRevalidate, CacheFirst } = workbox.strategies
 const { CacheableResponsePlugin } = workbox.cacheableResponse
 const { ExpirationPlugin } = workbox.expiration
+const { precacheAndRoute } = workbox.precaching
 
 // Cache page navigations (html) with a Network First strategy
 registerRoute(
@@ -48,3 +51,8 @@ registerRoute(
     ]
   })
 )
+
+// Precaching
+if (options.preCaching.length) {
+  precacheAndRoute(options.preCaching, options.cacheOptions)
+}