feat: add SSR workbox support

playground/error.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+// prevent reactive update when clearing error
+const { error } = defineProps<{
+ error: Partial<NuxtError>
+}>()
+console.error(error)
+</script>
+
+<template>
+ <div>
+ <NuxtLayout>
+ <h1>Error</h1>
+ <NuxtLink to="/">
+ Back Home
+ </NuxtLink>
+ </NuxtLayout>
+ </div>
+</template>

playground/nuxt.config.ts

@@ -23,6 +23,9 @@ export default defineNuxtConfig({
  },
  pwa: {
  registerType: 'autoUpdate',
+ enableSSR: {
+ cache: true,
+ },
  manifest: {
  name: 'Nuxt Vite PWA',
  short_name: 'NuxtVitePWA',
@@ -48,6 +51,8 @@ export default defineNuxtConfig({
  },
  workbox: {
  navigateFallback: '/',
+ sourcemap: true,
+ mode: 'development',
  globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
  },
  client: {
@@ -57,7 +62,7 @@ export default defineNuxtConfig({
  periodicSyncForUpdates: 20,
  },
  devOptions: {
- enabled: true,
+ enabled: false,
  suppressWarnings: true,
  navigateFallbackAllowlist: [/^\/$/],
  type: 'module',

playground/pages/about.vue

@@ -1,8 +1,8 @@
 <template>
  <div>
- <div>Nuxt Vite PWA</div>
+ <h1>About</h1>
  <NuxtLink to="/">
- Home 1
+ Go to Home
  </NuxtLink>
  </div>
 </template>

playground/pages/hi/[id].vue

@@ -0,0 +1,19 @@
+<template>
+ <div>
+ <h3 text-2xl font-500>
+ Hi,
+ </h3>
+ <div text-xl>
+ <NuxtPage :page-key="page => page.fullPath" />
+ </div>
+
+ <div>
+ <NuxtLink
+ class="m-3 text-sm btn"
+ to="/"
+ >
+ Back
+ </NuxtLink>
+ </div>
+ </div>
+</template>

playground/pages/hi/[id]/detail.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute<'hi-id-detail'>()
+const name = route.params.id ?? ''
+if (process.server) {
+ // eslint-disable-next-line no-console
+ console.log('Server side', name)
+}
+</script>
+
+<template>
+ <div>
+ <div text-xl>
+ Detail {{ name }}
+ </div>
+ <NuxtLink :to="`/hi/${name}`" class="m-3 text-sm btn">
+ Back Hi
+ </NuxtLink>
+ </div>
+</template>

playground/pages/hi/[id]/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute<'hi-id'>()
+const name = route.params.id ?? ''
+if (process.server) {
+ // eslint-disable-next-line no-console
+ console.log('Server side', name)
+}
+</script>
+
+<template>
+ <div>
+ <div text-xl>
+ {{ name }}!
+ </div>
+ <NuxtLink :to="`/hi/${name}/detail`" class="m-3 text-sm btn">
+ Detail
+ </NuxtLink>
+ </div>
+</template>

playground/pages/index.vue

@@ -1,6 +1,38 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+function go() {
+ if (name.value)
+ router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
 <template>
  <div>
  <div>Nuxt Vite PWA</div>
+ <div>
+ <input
+ id="input"
+ v-model="name"
+ placeholder="What's your name?"
+ type="text"
+ autocomplete="off"
+ @keydown.enter="go"
+ >
+ <div>
+ <button
+ :disabled="!name"
+ @click="go"
+ >
+ GO
+ </button>
+ </div>
+ </div>
+ <NuxtLink to="/list">
+ Go to list
+ </NuxtLink>
+ <br>
  <NuxtLink to="/about">
  About
  </NuxtLink>

playground/pages/list.vue

@@ -0,0 +1,9 @@
+<template>
+ <div>
+ <h1>List</h1>
+ <NuxtPage />
+ <NuxtLink to="/">
+ Go to index
+ </nuxtlink>
+ </div>
+</template>

playground/pages/list/[id]/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+definePageMeta({
+ key: route => route.fullPath,
+})
+const route = useRoute<'list-id'>()
+const name = route.params.id ?? ''
+if (process.server) {
+ // eslint-disable-next-line no-console
+ console.log('Server side', name)
+}
+</script>
+
+<template>
+ <div>
+ <h1>Child</h1>
+ <NuxtLink to="/list">
+ Back
+ </NuxtLink>
+ </div>
+</template>

playground/pages/list/example.vue

@@ -0,0 +1,8 @@
+<template>
+ <div>
+ <NuxtPage />
+ <NuxtLink to="/list">
+ Back
+ </NuxtLink>
+ </div>
+</template>

playground/pages/list/example/index.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+ <h1>Example</h1>
+ </div>
+</template>

playground/pages/list/example2.vue

@@ -0,0 +1,8 @@
+<template>
+ <div>
+ <h1>Example 2</h1>
+ <NuxtLink to="/list">
+ Back
+ </NuxtLink>
+ </div>
+</template>

playground/pages/list/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+ <div>
+ <NuxtLink to="/list/1">
+ Go to /list/1
+ </NuxtLink>
+ <br>
+ <NuxtLink to="/list/2">
+ Go to /list/2
+ </NuxtLink>
+ <br>
+ <NuxtLink to="/list/example">
+ Go to example
+ </NuxtLink>
+ <br>
+ <NuxtLink to="/list/example2">
+ Go to example 2
+ </NuxtLink>
+ </div>
+</template>

src/config.ts

@@ -1,9 +1,15 @@
-import type { Nuxt } from '@nuxt/schema'
+import type { Nuxt, NuxtPage } from '@nuxt/schema'
 import { resolve } from 'pathe'
 import type { NitroConfig } from 'nitropack'
+import type { RuntimeCaching } from 'workbox-build'
 import type { ModuleOptions } from './types'
 
-export function configurePWAOptions(options: ModuleOptions, nuxt: Nuxt, nitroConfig: NitroConfig) {
+export function configurePWAOptions(
+ options: ModuleOptions,
+ nuxt: Nuxt,
+ nitroConfig: NitroConfig,
+ ssrPages?: NuxtPage[],
+) {
  if (!options.outDir) {
  const publicDir = nitroConfig.output?.publicDir ?? nuxt.options.nitro?.output?.publicDir
  options.outDir = publicDir ? resolve(publicDir) : resolve(nuxt.options.buildDir, '../.output/public')
@@ -20,6 +26,7 @@ export function configurePWAOptions(options: ModuleOptions, nuxt: Nuxt, nitroCon
  >
 
  if (options.strategies === 'injectManifest') {
+ // TODO: handle enableSSR, we need to inject the routeRules with a custom recipe
  options.injectManifest = options.injectManifest ?? {}
  config = options.injectManifest
  }
@@ -35,6 +42,40 @@ export function configurePWAOptions(options: ModuleOptions, nuxt: Nuxt, nitroCon
  if (options.devOptions?.enabled && !options.devOptions.navigateFallbackAllowlist)
  options.devOptions.navigateFallbackAllowlist = [nuxt.options.app.baseURL ? new RegExp(nuxt.options.app.baseURL) : /\//]
  }
+ else if (ssrPages?.length) {
+ const {
+ cache = false,
+ cacheName = 'ssr-pages',
+ offlinePage = `${nuxt.options.app.baseURL ?? '/'}error?offline`,
+ } = options.enableSSR!
+ // 1. filter prerender pages: will go to the sw precache manifest
+ // what happens if prerender is enabled but prerender routes with ssr?
+ // don't use nitroConfig, we have _nuxt and __nuxt_error
+ const prerenderPages = nuxt.options.nitro.prerender?.routes ?? []
+ const rules = collectRules(ssrPages.filter(p => !prerenderPages.includes(p.path)))
+ // 2. prepare runtime caching for ssr pages
+ const routesInfo = Array.from(rules.keys()).map(r => createSSRHandler(r))
+ // 3. configure workbox properly: since we have two builds, we need to check if previously added
+ if (routesInfo.length > 0) {
+ const navigateFallbackDenylist = options.workbox.navigateFallbackDenylist ?? []
+ const runtimeCaching = options.workbox.runtimeCaching ?? []
+ routesInfo.forEach((r) => {
+ const path = r.urlPattern as string
+ const { exp, dynamic } = rules.get(path)!
+ const source = exp.source
+ if (!navigateFallbackDenylist.some(d => d.source === source))
+ navigateFallbackDenylist.push(exp)
+
+ const index = runtimeCaching.findIndex(d => d.urlPattern === path)
+ if (index > -1)
+ runtimeCaching[index] = createSSRHandlerFunction(cache, cacheName, offlinePage, exp, dynamic)
+ else
+ runtimeCaching.push(r)
+ })
+ options.workbox.navigateFallbackDenylist = navigateFallbackDenylist
+ options.workbox.runtimeCaching = runtimeCaching
+ }
+ }
  config = options.workbox
  }
  if (!nuxt.options.dev)
@@ -59,3 +100,88 @@ function createManifestTransform(base: string): import('workbox-build').Manifest
  return { manifest: entries, warnings: [] }
  }
 }
+
+function createSSRHandler(route: string): RuntimeCaching {
+ return {
+ urlPattern: route,
+ handler: 'NetworkOnly',
+ }
+}
+
+function createSSRHandlerFunction(
+ cache: boolean,
+ cacheName: string,
+ offlinePage: string,
+ regex: RegExp,
+ dynamic: boolean,
+): RuntimeCaching {
+ return cache && !dynamic
+ // eslint-disable-next-line no-eval
+ ? eval(`() => ({
+ urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(${regex}),
+ handler: 'NetworkFirst',
+ options: {
+ cacheName: ${JSON.stringify(cacheName)},
+ cacheableResponse: {
+ statuses: [200]
+ },
+ matchOptions: {
+ ignoreVary: true,
+ ignoreSearch: true
+ },
+ plugins: [{
+ handlerDidError: async () => Response.redirect(${JSON.stringify(offlinePage)}, 302),
+ cacheWillUpdate: async ({ response }) => response.status === 200 ? response : null
+ }]
+ }
+ })`)()
+ // eslint-disable-next-line no-eval
+ : eval(`() => ({
+ urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(${regex}),
+ handler: 'NetworkOnly',
+ options: {
+ matchOptions: {
+ ignoreVary: true,
+ ignoreSearch: true
+ },
+ plugins: [{
+ handlerDidError: async () => Response.redirect(${JSON.stringify(offlinePage)}, 302),
+ cacheWillUpdate: async () => null
+ }]
+ }
+ })`)()
+}
+
+function createRouteRegex(path: string) {
+ const dynamicRoute = path.indexOf(':')
+ return dynamicRoute > -1
+ ? { exp: new RegExp(`^${path.slice(0, dynamicRoute)}`), dynamic: true }
+ : { exp: new RegExp(`^${path}$`), dynamic: false }
+}
+
+function traversePage(page: NuxtPage, rules: Map<string, { exp: RegExp; dynamic: boolean }>, parentRoute?: string) {
+ const path = `${parentRoute ? `${parentRoute}/` : ''}${page.path}`
+ const route = createRouteRegex(path)
+ rules.set(path, route)
+ if (!route.dynamic) {
+ if (page.children?.length) {
+ page.children?.filter(p => p.path !== '')
+ .sort((a, b) => {
+ if (a.path.startsWith(':'))
+ return 1
+
+ if (b.path.startsWith(':'))
+ return -1
+
+ return b.path.length - a.path.length
+ })
+ .forEach(p => traversePage(p, rules, path))
+ }
+ }
+}
+
+function collectRules(ssrPages: NuxtPage[]) {
+ const rules = new Map<string, { exp: RegExp; dynamic: boolean }>()
+ ssrPages.forEach(p => traversePage(p, rules))
+ return rules
+}