.github/workflows/cr.yml

@@ -22,6 +22,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4.0.0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+          cache: pnpm
       - run: pnpm install
       - run: pnpm build
       - run: pnpx pkg-pr-new publish --compact --no-template --pnpm

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20.17.0
 
       - run: npx changelogithub
         env:

CONTRIBUTING.md

@@ -34,7 +34,7 @@ The `vite-plugin-pwa` repo includes a set of examples where you can test the cha
 - `pnpm run examples`: select `sveltekit` framework and default options on the cli (you can also test another options)
 - `pnpm run examples`: select `solid` framework and default options on the cli (you can also test another options)
 
-> The default options from the `cli` are just to check your changes are not breaking major ui/app frameworks build: `generateSW` strategy, `Prompt for update` behavior and `Enable periodic SW updates` to `no`. 
+> The default options from the `cli` are just to check your changes are not breaking major ui/app frameworks build: `generateSW` strategy, `Prompt for update` behavior and `Enable periodic SW updates` to `no`.
 
 > If your changes are specific to some behavior, just use the corresponding option on the `cli`.
 

README.md

@@ -27,7 +27,6 @@ Zero-config PWA Framework-agnostic Plugin for Vite
   </a>
 </p>
 
-
 ## 🚀 Features
 
 - 📖 [**Documentation & guides**](https://vite-pwa-org.netlify.app/)
@@ -53,12 +52,12 @@ Zero-config PWA Framework-agnostic Plugin for Vite
 > From v0.13, `vite-plugin-pwa` requires **Vite 3.1 or above**.
 
 ```bash
-npm i vite-plugin-pwa -D 
+npm i vite-plugin-pwa -D
 
-# yarn 
+# yarn
 yarn add vite-plugin-pwa -D
 
-# pnpm 
+# pnpm
 pnpm add vite-plugin-pwa -D
 ```
 
@@ -77,7 +76,7 @@ export default {
 }
 ```
 
-Read the [📖 documentation](https://vite-pwa-org.netlify.app/guide/) for a complete guide on how to configure and use 
+Read the [📖 documentation](https://vite-pwa-org.netlify.app/guide/) for a complete guide on how to configure and use
 this plugin.
 
 Check out the client type declarations [client.d.ts](./client.d.ts) for built-in frameworks support.
@@ -89,7 +88,6 @@ Check out the type declaration [src/types.ts](./src/types.ts) and the following
 - [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest)
 - [Workbox](https://developers.google.com/web/tools/workbox)
 
-
 ## 📄 License
 
 [MIT](./LICENSE) License &copy; 2020-PRESENT [Anthony Fu](https://github.com/antfu)

eslint.config.js

@@ -3,8 +3,10 @@ import antfu from '@antfu/eslint-config'
 export default await antfu(
   {
     ignores: [
+      'netlify.toml',
       '**/build/**',
       '**/dist/**',
+      '**/docs/**',
       '**/dev-dist/**',
     ],
   },

examples/assets-generator/src/pwa.ts

@@ -1,6 +1,6 @@
-import { pwaInfo } from 'virtual:pwa-info'
 import { pwaAssetsHead } from 'virtual:pwa-assets/head'
 import { pwaAssetsIcons } from 'virtual:pwa-assets/icons'
+import { pwaInfo } from 'virtual:pwa-info'
 import { registerSW } from 'virtual:pwa-register'
 
 console.log(pwaInfo)

examples/assets-generator/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import type { PWAAssetsOptions } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
 
 const pwaAssets: PWAAssetsOptions = process.env.INLINE_PWA_ASSETS

examples/preact-router/src/ReloadPrompt.tsx

@@ -1,7 +1,7 @@
-import './ReloadPrompt.css'
+import { pwaInfo } from 'virtual:pwa-info'
 
 import { useRegisterSW } from 'virtual:pwa-register/preact'
-import { pwaInfo } from 'virtual:pwa-info'
+import './ReloadPrompt.css'
 
 console.log(pwaInfo)
 
@@ -43,17 +43,17 @@ function ReloadPrompt() {
   return (
     <div className="ReloadPrompt-container">
       { (offlineReady || needRefresh)
-      && (
-        <div className="ReloadPrompt-toast">
-          <div className="ReloadPrompt-message">
-            { offlineReady
-              ? <span>App ready to work offline</span>
-              : <span>New content available, click on reload button to update.</span>}
+        && (
+          <div className="ReloadPrompt-toast">
+            <div className="ReloadPrompt-message">
+              { offlineReady
+                ? <span>App ready to work offline</span>
+                : <span>New content available, click on reload button to update.</span>}
+            </div>
+            { needRefresh && <button className="ReloadPrompt-toast-button" onClick={() => updateServiceWorker()}>Reload</button> }
+            <button className="ReloadPrompt-toast-button" onClick={() => close()}>Close</button>
           </div>
-          { needRefresh && <button className="ReloadPrompt-toast-button" onClick={() => updateServiceWorker(true)}>Reload</button> }
-          <button className="ReloadPrompt-toast-button" onClick={() => close()}>Close</button>
-        </div>
-      )}
+        )}
       <div className="ReloadPrompt-date">{buildDate}</div>
     </div>
   )

examples/preact-router/src/app.tsx

@@ -1,9 +1,9 @@
 import { Router } from 'preact-router'
 
-import ReloadPrompt from './ReloadPrompt'
-import Home from './pages/Home'
 import About from './pages/About'
 import Hi from './pages/hi/[name]'
+import Home from './pages/Home'
+import ReloadPrompt from './ReloadPrompt'
 
 import './App.css'
 

examples/preact-router/src/claims-sw.ts

@@ -1,5 +1,5 @@
-import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { clientsClaim } from 'workbox-core'
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
 
 declare let self: ServiceWorkerGlobalScope

examples/preact-router/src/pages/Home.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'preact/hooks'
 import { route } from 'preact-router'
+import { useState } from 'preact/hooks'
 import './Home.css'
 
 function Home() {

examples/preact-router/test/build.test.ts

@@ -1,7 +1,7 @@
 import { existsSync, readFileSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
 import process from 'node:process'
+import { fileURLToPath } from 'node:url'
 
 import { describe, expect, it } from 'vitest'
 
@@ -32,13 +32,13 @@ describe('preact: test-build', () => {
         const workboxName = resolvePath(_dirname, `../dist/${match?.[1]}.js`)
         expect(existsSync(workboxName), `${workboxName} doesn't exist`).toBeTruthy()
         const workboxContent = readFileSync(workboxName, 'utf-8')
-        match = workboxContent.match(/self\['workbox:core:[0-9.]+']/)
+        match = workboxContent.match(/self\['workbox:core:[0-9.]+'\]/)
         expect(match && match.length === 1, 'missing workbox:core module').toBeTruthy()
         match = swContent.match(/self\.skipWaiting\(\);?\s*workbox\.clientsClaim\(\)/)
         expect(match && match.length === 1, 'missing self.skipWaiting and clientsClaim workbox calls').toBeTruthy()
       }
       else {
-        match = swContent.match(/self\['workbox:core:[0-9.]+']/)
+        match = swContent.match(/self\['workbox:core:[0-9.]+'\]/)
         expect(match && match.length === 1, 'missing workbox:core module').toBeTruthy()
         match = swContent.match(/self\.skipWaiting\(\);?\s*clientsClaim\(\)/)
         expect(match && match.length === 1, 'missing self.skipWaiting and clientsClaim workbox calls').toBeTruthy()

examples/preact-router/vite.config.ts

@@ -1,9 +1,9 @@
+import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 import process from 'node:process'
-import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
-import { VitePWA } from 'vite-plugin-pwa'
-import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 import replace from '@rollup/plugin-replace'
+import { defineConfig } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'
 
 const pwaOptions: Partial<VitePWAOptions> = {
   mode: 'development',

examples/react-router/src/ReloadPrompt.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import './ReloadPrompt.css'
+import { pwaInfo } from 'virtual:pwa-info'
 
 import { useRegisterSW } from 'virtual:pwa-register/react'
-import { pwaInfo } from 'virtual:pwa-info'
+import './ReloadPrompt.css'
 
 console.log(pwaInfo)
 
@@ -44,17 +44,17 @@ function ReloadPrompt() {
   return (
     <div className="ReloadPrompt-container">
       { (offlineReady || needRefresh)
-      && (
-        <div className="ReloadPrompt-toast">
-          <div className="ReloadPrompt-message">
-            { offlineReady
-              ? <span>App ready to work offline</span>
-              : <span>New content available, click on reload button to update.</span>}
+        && (
+          <div className="ReloadPrompt-toast">
+            <div className="ReloadPrompt-toast-message">
+              { offlineReady
+                ? <span>App ready to work offline</span>
+                : <span>New content available, click on reload button to update.</span>}
+            </div>
+            { needRefresh && <button className="ReloadPrompt-toast-button" onClick={() => updateServiceWorker()}>Reload</button> }
+            <button className="ReloadPrompt-toast-button" onClick={() => close()}>Close</button>
           </div>
-          { needRefresh && <button className="ReloadPrompt-toast-button" onClick={() => updateServiceWorker(true)}>Reload</button> }
-          <button className="ReloadPrompt-toast-button" onClick={() => close()}>Close</button>
-        </div>
-      )}
+        )}
       <div className="ReloadPrompt-date">{buildDate}</div>
     </div>
   )

examples/react-router/src/claims-sw.ts

@@ -1,5 +1,5 @@
-import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { clientsClaim } from 'workbox-core'
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
 
 declare let self: ServiceWorkerGlobalScope

examples/react-router/src/main.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import App from './App'
-import Home from './pages/Home'
 import About from './pages/About'
 import Hi from './pages/hi/[name]'
+import Home from './pages/Home'
+import './index.css'
 
 createRoot(document.getElementById('app')!).render(
   <BrowserRouter>

examples/react-router/test/build.test.ts

@@ -1,7 +1,7 @@
 import { existsSync, readFileSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
 import process from 'node:process'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 
 const _dirname = typeof __dirname !== 'undefined'
@@ -31,13 +31,13 @@ describe('react: test-build', () => {
         const workboxName = resolvePath(_dirname, `../dist/${match?.[1]}.js`)
         expect(existsSync(workboxName), `${workboxName} doesn't exist`).toBeTruthy()
         const workboxContent = readFileSync(workboxName, 'utf-8')
-        match = workboxContent.match(/self\['workbox:core:[0-9.]+']/)
+        match = workboxContent.match(/self\['workbox:core:[0-9.]+'\]/)
         expect(match && match.length === 1, 'missing workbox:core module').toBeTruthy()
         match = swContent.match(/self\.skipWaiting\(\);?\s*workbox\.clientsClaim\(\)/)
         expect(match && match.length === 1, 'missing self.skipWaiting and clientsClaim workbox calls').toBeTruthy()
       }
       else {
-        match = swContent.match(/self\['workbox:core:[0-9.]+']/)
+        match = swContent.match(/self\['workbox:core:[0-9.]+'\]/)
         expect(match && match.length === 1, 'missing workbox:core module').toBeTruthy()
         match = swContent.match(/self\.skipWaiting\(\);?\s*clientsClaim\(\)/)
         expect(match && match.length === 1, 'missing self.skipWaiting and clientsClaim workbox calls').toBeTruthy()

examples/react-router/vite.config.ts

@@ -1,9 +1,9 @@
+import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 import process from 'node:process'
-import { defineConfig } from 'vite'
+import replace from '@rollup/plugin-replace'
 import react from '@vitejs/plugin-react'
-import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
-import replace from '@rollup/plugin-replace'
 
 const pwaOptions: Partial<VitePWAOptions> = {
   mode: 'development',

examples/solid-router/src/ReloadPrompt.tsx

@@ -1,7 +1,7 @@
 import type { Component } from 'solid-js'
 import { Show } from 'solid-js'
-import { useRegisterSW } from 'virtual:pwa-register/solid'
 import { pwaInfo } from 'virtual:pwa-info'
+import { useRegisterSW } from 'virtual:pwa-register/solid'
 import styles from './ReloadPrompt.module.css'
 
 console.log(pwaInfo)
@@ -51,7 +51,7 @@ const ReloadPrompt: Component = () => {
             </Show>
           </div>
           <Show when={needRefresh()}>
-            <button class={styles.ToastButton} onClick={() => updateServiceWorker(true)}>Reload</button>
+            <button class={styles.ToastButton} onClick={() => updateServiceWorker()}>Reload</button>
           </Show>
           <button class={styles.ToastButton} onClick={() => close()}>Close</button>
         </div>

examples/solid-router/src/app.tsx

@@ -1,8 +1,8 @@
 import type { Component } from 'solid-js'
 import { useRoutes } from '@solidjs/router'
-import { routes } from './routes'
 import styles from './app.module.css'
 import ReloadPrompt from './ReloadPrompt'
+import { routes } from './routes'
 
 const App: Component = () => {
   // replaced dynamically

examples/solid-router/src/claims-sw.ts

@@ -1,5 +1,5 @@
-import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { clientsClaim } from 'workbox-core'
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
 
 declare let self: ServiceWorkerGlobalScope

examples/solid-router/src/index.tsx

@@ -1,5 +1,5 @@
-import { render } from 'solid-js/web'
 import { Router } from '@solidjs/router'
+import { render } from 'solid-js/web'
 import App from './app'
 
 render(

examples/solid-router/src/pages/home.tsx

@@ -1,5 +1,5 @@
-import { createSignal } from 'solid-js'
 import { useNavigate } from '@solidjs/router'
+import { createSignal } from 'solid-js'
 import styles from './home.module.css'
 
 export default function Home() {

examples/solid-router/src/routes.ts

@@ -1,8 +1,8 @@
-import { lazy } from 'solid-js'
 import type { RouteDefinition } from '@solidjs/router'
+import { lazy } from 'solid-js'
 
-import Home from './pages/home'
 import HiData from './pages/hi/[name].data'
+import Home from './pages/home'
 
 export const routes: RouteDefinition[] = [
   {

examples/solid-router/test/build.test.ts

@@ -1,7 +1,7 @@
 import { existsSync, readFileSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
 import process from 'node:process'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 
 const _dirname = typeof __dirname !== 'undefined'
@@ -31,13 +31,13 @@ describe('solid: test-build', () => {
         const workboxName = resolvePath(_dirname, `../dist/${match?.[1]}.js`)
         expect(existsSync(workboxName), `${workboxName} doesn't exist`).toBeTruthy()
         const workboxContent = readFileSync(workboxName, 'utf-8')
-        match = workboxContent.match(/self\['workbox:core:[0-9.]+']/)
+        match = workboxContent.match(/self\['workbox:core:[0-9.]+'\]/)
         expect(match && match.length === 1, 'missing workbox:core module').toBeTruthy()
         match = swContent.match(/self\.skipWaiting\(\);?\s*workbox\.clientsClaim\(\)/)
         expect(match && match.length === 1, 'missing self.skipWaiting and clientsClaim workbox calls').toBeTruthy()
       }
       else {
-        match = swContent.match(/self\['workbox:core:[0-9.]+']/)
+        match = swContent.match(/self\['workbox:core:[0-9.]+'\]/)
         expect(match && match.length === 1, 'missing workbox:core module').toBeTruthy()
         match = swContent.match(/self\.skipWaiting\(\);?\s*clientsClaim\(\)/)
         expect(match && match.length === 1, 'missing self.skipWaiting and clientsClaim workbox calls').toBeTruthy()

examples/solid-router/vite.config.ts

@@ -1,9 +1,9 @@
+import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
 import process from 'node:process'
+import replace from '@rollup/plugin-replace'
 import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
 import { VitePWA } from 'vite-plugin-pwa'
-import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
-import replace from '@rollup/plugin-replace'
+import solidPlugin from 'vite-plugin-solid'
 
 const pwaOptions: Partial<VitePWAOptions> = {
   mode: 'development',