From 0089f12f826382067bdced2b42957373cc7b527d Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 16 Jan 2024 00:36:36 +0100
Subject: [PATCH 1/5] feat: add prompt for update behavior

---
 example/package.json                          |  1 +
 .../pwa-prompt/pwa-prompt.module.css          | 34 +++++++++++
 .../src/components/pwa-prompt/pwa-prompt.tsx  | 42 ++++++++++++++
 example/src/routes/layout.tsx                 |  2 +
 example/vite.config.ts                        |  6 +-
 package.json                                  | 13 +++++
 scripts/postbuild.mjs                         |  6 ++
 src/assets/options.ts                         |  2 +
 src/plugins/client.ts                         |  1 +
 src/prompt-for-update.ts                      | 46 +++++++++++++++
 src/sw.ts                                     | 56 +++++++++----------
 src/types.ts                                  |  6 ++
 vite.config.ts                                |  7 ++-
 13 files changed, 191 insertions(+), 31 deletions(-)
 create mode 100644 example/src/components/pwa-prompt/pwa-prompt.module.css
 create mode 100644 example/src/components/pwa-prompt/pwa-prompt.tsx
 create mode 100644 src/prompt-for-update.ts

diff --git a/example/package.json b/example/package.json
index 3ae02e6..99c37bf 100644
--- a/example/package.json
+++ b/example/package.json
@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "build": "qwik build",
+    "build-prompt": "PROMPT=true qwik build",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts",
diff --git a/example/src/components/pwa-prompt/pwa-prompt.module.css b/example/src/components/pwa-prompt/pwa-prompt.module.css
new file mode 100644
index 0000000..bb338c6
--- /dev/null
+++ b/example/src/components/pwa-prompt/pwa-prompt.module.css
@@ -0,0 +1,34 @@
+.ReloadPrompt-container {
+    padding: 0;
+    margin: 0;
+    width: 0;
+    display: block;
+    height: 0;
+}
+.ReloadPrompt-date {
+    visibility: hidden;
+}
+.ReloadPrompt-toast {
+    color: var(--qwik-light-blue);
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    margin: 16px;
+    padding: 12px;
+    border: 1px solid #8885;
+    border-radius: 4px;
+    z-index: 1;
+    text-align: left;
+    box-shadow: 3px 4px 5px 0 #8885;
+    background-color: var(--qwik-dark-background);
+}
+.ReloadPrompt-toast-message {
+    margin-bottom: 8px;
+}
+.ReloadPrompt-toast-button {
+    border: 1px solid #8885;
+    outline: none;
+    margin-right: 5px;
+    border-radius: 2px;
+    padding: 3px 10px;
+}
diff --git a/example/src/components/pwa-prompt/pwa-prompt.tsx b/example/src/components/pwa-prompt/pwa-prompt.tsx
new file mode 100644
index 0000000..391a947
--- /dev/null
+++ b/example/src/components/pwa-prompt/pwa-prompt.tsx
@@ -0,0 +1,42 @@
+import styles from "./pwa-prompt.module.css";
+import { $, component$ } from "@builder.io/qwik";
+import { usePromptForUpdate } from "@qwikdev/pwa/prompt-for-update";
+
+export default component$(() => {
+  // qwik pwa prompt for update
+  const { prompt } = usePromptForUpdate();
+
+  const hidePrompt = $(() => {
+    prompt.value = false;
+  });
+  const loadNewVersion = $(() => {
+    // @ts-ignore ignore globals for now
+    window.loadNewVersion();
+  });
+
+  return (
+    <div class={styles["ReloadPrompt-container"]}>
+      {prompt.value && (
+        <div class={styles["ReloadPrompt-toast"]}>
+          <div class={styles["ReloadPrompt-message"]}>
+            <span>
+              New content available, click on reload button to update.
+            </span>
+          </div>
+          <button
+            class={styles["ReloadPrompt-toast-button"]}
+            onClick$={() => loadNewVersion()}
+          >
+            Reload
+          </button>
+          <button
+            class={styles["ReloadPrompt-toast-button"]}
+            onClick$={() => hidePrompt()}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/example/src/routes/layout.tsx b/example/src/routes/layout.tsx
index 1ca5f36..e9b1820 100644
--- a/example/src/routes/layout.tsx
+++ b/example/src/routes/layout.tsx
@@ -4,6 +4,7 @@ import type { RequestHandler } from "@builder.io/qwik-city";
 
 import Header from "~/components/starter/header/header";
 import Footer from "~/components/starter/footer/footer";
+import PWAPrompt from "~/components/pwa-prompt/pwa-prompt";
 
 import styles from "./styles.css?inline";
 
@@ -32,6 +33,7 @@ export default component$(() => {
       <main>
         <Slot />
       </main>
+      <PWAPrompt />
       <Footer />
     </>
   );
diff --git a/example/vite.config.ts b/example/vite.config.ts
index c70e9af..95f994b 100644
--- a/example/vite.config.ts
+++ b/example/vite.config.ts
@@ -4,9 +4,11 @@ import { qwikCity } from "@builder.io/qwik-city/vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { type PWAOptions, qwikPwa } from "@qwikdev/pwa";
 
+const promptForUpdate = process.env.PROMPT === "true";
+
 const config: PWAOptions | undefined = process.env.CUSTOM_CONFIG === "true"
- ? { config: true }
-    : undefined;
+ ? { config: true, promptForUpdate }
+    : { config: false, promptForUpdate, preset: "minimal-2023" };
 
 export default defineConfig(() => {
   return {
diff --git a/package.json b/package.json
index d04783d..c314cd6 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,16 @@
         "default": "./lib/sw.qwik.cjs"
       }
     },
+    "./prompt-for-update": {
+      "import": {
+        "types": "./lib-types/prompt-for-update.d.mts",
+        "default": "./lib/prompt-for-update.qwik.js"
+      },
+      "require": {
+        "types": "./lib-types/prompt-for-update.d.cts",
+        "default": "./lib/prompt-for-update.qwik.cjs"
+      }
+    },
     "./*": "./*"
   },
   "main": "lib/index.qwik.js",
@@ -57,6 +67,9 @@
       "head": [
         "./lib-types/head.d.ts"
       ],
+      "prompt-for-update": [
+        "./lib-types/prompt-for-update.d.ts"
+      ],
       "sw": [
         "./lib-types/sw.d.ts"
       ],
diff --git a/scripts/postbuild.mjs b/scripts/postbuild.mjs
index 3a4e1c9..a589a25 100644
--- a/scripts/postbuild.mjs
+++ b/scripts/postbuild.mjs
@@ -11,6 +11,12 @@ async function postBuild() {
         writeFile("./lib-types/head.d.mts", content, "utf-8"),
       ]);
     }),
+    readFile("./lib-types/prompt-for-update.d.ts", "utf-8").then((content) => {
+      return Promise.all([
+        writeFile("./lib-types/prompt-for-update.d.cts", content, "utf-8"),
+        writeFile("./lib-types/prompt-for-update.d.mts", content, "utf-8"),
+      ]);
+    }),
     readFile("./lib-types/index.d.ts", "utf-8").then((content) => {
       return Promise.all([
         writeFile("./lib-types/index.d.cts", content, "utf-8"),
diff --git a/src/assets/options.ts b/src/assets/options.ts
index 37fdc59..4734a1f 100644
--- a/src/assets/options.ts
+++ b/src/assets/options.ts
@@ -17,6 +17,7 @@ export function resolveOptions(ctx: QwikPWAContext) {
     includeHtmlHeadLinks = true,
     includeThemeColor = true,
     includeWebManifest = false,
+    promptForUpdate = false,
   } = ctx.userOptions;
 
   ctx.options = {
@@ -30,5 +31,6 @@ export function resolveOptions(ctx: QwikPWAContext) {
     includeHtmlHeadLinks,
     includeThemeColor,
     includeWebManifest,
+    promptForUpdate,
   };
 }
diff --git a/src/plugins/client.ts b/src/plugins/client.ts
index 4bae94e..3c4270a 100644
--- a/src/plugins/client.ts
+++ b/src/plugins/client.ts
@@ -26,6 +26,7 @@ export default function ClientPlugin(ctx: QwikPWAContext): Plugin {
         const swCodeUpdate = `
         const excludeAssets = ['_headers', '_redirects']
         const version = ${JSON.stringify(ctx.version)};
+        const prompt = ${JSON.stringify(ctx.options.promptForUpdate)};
         const publicDirAssets = ${JSON.stringify(publicDirAssets)};
         const emittedAssets = ${JSON.stringify([
           ...generatedAssetsUrls,
diff --git a/src/prompt-for-update.ts b/src/prompt-for-update.ts
new file mode 100644
index 0000000..6afd43b
--- /dev/null
+++ b/src/prompt-for-update.ts
@@ -0,0 +1,46 @@
+import { $, useOnDocument, useSignal } from "@builder.io/qwik";
+
+export function usePromptForUpdate() {
+  const prompt = useSignal(false);
+
+  useOnDocument(
+    "load",
+    $(() => {
+      if ("serviceWorker" in navigator) {
+        let swr: ServiceWorkerRegistration | null;
+        // @ts-ignore ignore globals for now
+        window.loadNewVersion = () => {
+          console.log("loadNewVersion", {
+            prompt: prompt.value,
+            waiting: swr?.waiting,
+            state: swr?.waiting?.state,
+          });
+          prompt.value && swr?.waiting?.postMessage({ type: "SKIP_WAITING" });
+        };
+        navigator.serviceWorker.ready.then((registration) => {
+          swr = registration;
+          registration.addEventListener("updatefound", () => {
+            const newSW = registration.installing;
+            newSW?.addEventListener("statechange", () => {
+              console.log("newSW.state", newSW?.state);
+              if (newSW?.state === "activated") {
+                window.location.reload();
+              }
+              if (newSW?.state === "installed") {
+                // New service worker is installed, but awaiting activation
+                prompt.value = true;
+              }
+            });
+          });
+          // if already installed, but not activated, for example,
+          // when the user cancels the prompt and then refreshes the page
+          if (registration.waiting) {
+            prompt.value = true;
+          }
+        });
+      }
+    }),
+  );
+
+  return { prompt };
+}
diff --git a/src/sw.ts b/src/sw.ts
index df58ea1..a5cf0c9 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -12,7 +12,9 @@ import {
   setDefaultHandler,
 } from "workbox-routing";
 
-export const assets = [...publicDirAssets, ...emittedAssets].filter((asset) => !excludeAssets.includes(asset));
+export const assets = [...publicDirAssets, ...emittedAssets].filter(
+  (asset) => !excludeAssets.includes(asset),
+);
 export { routes };
 
 function urlsToEntries(urls: string[], hash: string): PrecacheEntry[] {
@@ -26,15 +28,14 @@ function urlsToEntries(urls: string[], hash: string): PrecacheEntry[] {
 
 /**
  * Add PWA capabilities.
- *
- * **WARNING**: "prompt" mode not available yet.
- *
- * @param mode
- * @default "auto-update"
  */
-export function setupPwa(mode: "auto-update" | "prompt" = "auto-update") {
+export function setupPwa() {
   if (import.meta.env.DEV) {
-    console.info(`Qwik PWA v${version}, using ${mode} strategy`);
+    console.info(
+      `Qwik PWA v${version}, using ${
+        prompt ? "prompt-for-update" : "auto-update"
+      } strategy`,
+    );
   }
 
   const noParamRoutes = routes.filter((r) => !r.hasParams);
@@ -62,32 +63,30 @@ export function setupPwa(mode: "auto-update" | "prompt" = "auto-update") {
     registerRoute(route.pattern, new StaleWhileRevalidate());
   }
 
-  if (mode === "prompt") {
-    if (import.meta.env.DEV) {
-      console.warn(
-        `Qwik PWA v${version}\nWARNING: "prompt" mode not available yet`,
-      );
-    }
-    /*
+  if (prompt) {
+    // if (import.meta.env.DEV) {
+    //   console.warn(
+    //     `Qwik PWA v${version}\nWARNING: "prompt" mode not available yet`,
+    //   );
+    // }
+
     self.addEventListener("message", (event) => {
       if (event.data.type === "SKIP_WAITING") {
         self.skipWaiting();
       }
     });
-    */
-  }
-  // else {
-  // Skip-Waiting Service Worker-based solution
-  self.addEventListener("activate", async () => {
-    // after we've taken over, iterate over all the current clients (windows)
-    const clients = await self.clients.matchAll({ type: "window" });
-    clients.forEach((client) => {
-      // ...and refresh each one of them
-      client.navigate(client.url);
+  } else {
+    // Skip-Waiting Service Worker-based solution
+    self.addEventListener("activate", async () => {
+      // after we've taken over, iterate over all the current clients (windows)
+      const clients = await self.clients.matchAll({ type: "window" });
+      clients.forEach((client) => {
+        // ...and refresh each one of them
+        client.navigate(client.url);
+      });
     });
-  });
-  self.skipWaiting();
-  // }
+    self.skipWaiting();
+  }
 
   const base = "/build/"; // TODO: it should be dynamic based on the build
   const qprefetchEvent = new MessageEvent<ServiceWorkerMessage>("message", {
@@ -103,6 +102,7 @@ export function setupPwa(mode: "auto-update" | "prompt" = "auto-update") {
 }
 
 declare const version: string;
+declare const prompt: boolean;
 declare const appBundles: AppBundle[];
 
 declare const excludeAssets: string[];
diff --git a/src/types.ts b/src/types.ts
index 0e0997a..5377bc9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -92,4 +92,10 @@ export interface PWAOptions {
    * @default false
    */
   includeWebManifest?: boolean;
+  /**
+   *
+   *
+   * @default false
+   */
+  promptForUpdate?: boolean;
 }
diff --git a/vite.config.ts b/vite.config.ts
index 89d0292..d60ca44 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,7 +13,12 @@ export default defineConfig({
   build: {
     target: "es2020",
     lib: {
-      entry: ["./src/index.ts", "./src/sw.ts", "./src/head.ts"],
+      entry: [
+        "./src/index.ts",
+        "./src/sw.ts",
+        "./src/head.ts",
+        "./src/prompt-for-update.ts",
+      ],
       formats: ["es", "cjs"],
       fileName: (format, entryName) =>
         `${entryName}.qwik.${format === "es" ? "js" : "cjs"}`,

From 747c5e037d9e807b5e29f5c268de61c84cfcd68e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 16 Jan 2024 00:45:05 +0100
Subject: [PATCH 2/5] chore: add hint for global loadNewVersion in prompt for
 update module

---
 src/prompt-for-update.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/prompt-for-update.ts b/src/prompt-for-update.ts
index 6afd43b..4192b14 100644
--- a/src/prompt-for-update.ts
+++ b/src/prompt-for-update.ts
@@ -44,3 +44,11 @@ export function usePromptForUpdate() {
 
   return { prompt };
 }
+
+/* can we do this in qwik?
+declare global {
+  interface Window {
+    loadNewVersion: () => void;
+  }
+}
+*/

From 8c8d0a59fea3db18a122032c0b9cb76aa93942a6 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 16 Jan 2024 00:48:48 +0100
Subject: [PATCH 3/5] chore: add hint for prompt configuration in prompt for
 update module

---
 src/prompt-for-update.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/prompt-for-update.ts b/src/prompt-for-update.ts
index 4192b14..f6db0bd 100644
--- a/src/prompt-for-update.ts
+++ b/src/prompt-for-update.ts
@@ -1,5 +1,9 @@
 import { $, useOnDocument, useSignal } from "@builder.io/qwik";
 
+// TODO: expose a new virtual for prompt configuration and add protection here:
+//  don't include useOnDocument if using auto-update
+//  the auto-update behavior will claim all clients from the sw
+
 export function usePromptForUpdate() {
   const prompt = useSignal(false);
 
@@ -45,7 +49,7 @@ export function usePromptForUpdate() {
   return { prompt };
 }
 
-/* can we do this in qwik?
+/* can we do this here in qwik?
 declare global {
   interface Window {
     loadNewVersion: () => void;

From 7cabf6fcab2f99ee625e79bc568fe85ad2885948 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 16 Jan 2024 01:46:22 +0100
Subject: [PATCH 4/5] chore: add preview for prompt script

---
 example/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example/package.json b/example/package.json
index 99c37bf..4727d4e 100644
--- a/example/package.json
+++ b/example/package.json
@@ -21,6 +21,7 @@
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
     "preview": "qwik build preview && vite preview",
+    "preview-prompt": "PROMPT=true qwik build preview && vite preview",
     "serve": "wrangler pages dev ./dist",
     "start": "vite --open --mode ssr",
     "qwik": "qwik"

From b0468dcddec23cd3d03d8f513a8952c2938e0897 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 16 Jan 2024 19:57:00 +0100
Subject: [PATCH 5/5] chore: expose prompt to prevent behavior on auto-update

---
 example/vite.config.ts   |  1 +
 src/plugins/client.ts    |  2 +-
 src/plugins/main.ts      | 13 ++++++++++++
 src/prompt-for-update.ts | 19 +++++++++---------
 src/sw.ts                | 43 ++++++++++++++++++++++++++++------------
 vite.config.ts           |  1 +
 6 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/example/vite.config.ts b/example/vite.config.ts
index 95f994b..14ab302 100644
--- a/example/vite.config.ts
+++ b/example/vite.config.ts
@@ -12,6 +12,7 @@ const config: PWAOptions | undefined = process.env.CUSTOM_CONFIG === "true"
 
 export default defineConfig(() => {
   return {
+    mode: "development",
     define: {
       // enables debugging in workbox
       "process.env.NODE_ENV": JSON.stringify("development"),
diff --git a/src/plugins/client.ts b/src/plugins/client.ts
index 3c4270a..1f1f9a7 100644
--- a/src/plugins/client.ts
+++ b/src/plugins/client.ts
@@ -26,7 +26,7 @@ export default function ClientPlugin(ctx: QwikPWAContext): Plugin {
         const swCodeUpdate = `
         const excludeAssets = ['_headers', '_redirects']
         const version = ${JSON.stringify(ctx.version)};
-        const prompt = ${JSON.stringify(ctx.options.promptForUpdate)};
+        const promptForUpdate = ${ctx.userOptions.promptForUpdate === true};
         const publicDirAssets = ${JSON.stringify(publicDirAssets)};
         const emittedAssets = ${JSON.stringify([
           ...generatedAssetsUrls,
diff --git a/src/plugins/main.ts b/src/plugins/main.ts
index c4bd2f9..574b105 100644
--- a/src/plugins/main.ts
+++ b/src/plugins/main.ts
@@ -1,6 +1,9 @@
 import { initializeContext, type QwikPWAContext } from "../context";
 import type { Plugin } from "vite";
 
+const VIRTUAL_CLIENT_MODE = "virtual:qwik-pwa/client-mode";
+const RESOLVED_VIRTUAL_CLIENT_MODE = `\0${VIRTUAL_CLIENT_MODE}`;
+
 export default function MainPlugin(ctx: QwikPWAContext): Plugin {
   return {
     name: "qwik-pwa:main",
@@ -8,5 +11,15 @@ export default function MainPlugin(ctx: QwikPWAContext): Plugin {
     configResolved(config) {
       initializeContext(ctx, config);
     },
+    resolveId(id) {
+      if (id === VIRTUAL_CLIENT_MODE) return RESOLVED_VIRTUAL_CLIENT_MODE;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_CLIENT_MODE) {
+        return `export const promptForUpdate = ${
+          ctx.userOptions.promptForUpdate === true
+        };`;
+      }
+    },
   };
 }
diff --git a/src/prompt-for-update.ts b/src/prompt-for-update.ts
index f6db0bd..9348ab6 100644
--- a/src/prompt-for-update.ts
+++ b/src/prompt-for-update.ts
@@ -1,8 +1,6 @@
 import { $, useOnDocument, useSignal } from "@builder.io/qwik";
-
-// TODO: expose a new virtual for prompt configuration and add protection here:
-//  don't include useOnDocument if using auto-update
-//  the auto-update behavior will claim all clients from the sw
+// @ts-ignore
+import { promptForUpdate } from "virtual:qwik-pwa/client-mode";
 
 export function usePromptForUpdate() {
   const prompt = useSignal(false);
@@ -10,7 +8,8 @@ export function usePromptForUpdate() {
   useOnDocument(
     "load",
     $(() => {
-      if ("serviceWorker" in navigator) {
+      // if using auto-update, remove the prompt logic
+      if (promptForUpdate === true && "serviceWorker" in navigator) {
         let swr: ServiceWorkerRegistration | null;
         // @ts-ignore ignore globals for now
         window.loadNewVersion = () => {
@@ -19,7 +18,9 @@ export function usePromptForUpdate() {
             waiting: swr?.waiting,
             state: swr?.waiting?.state,
           });
-          prompt.value && swr?.waiting?.postMessage({ type: "SKIP_WAITING" });
+          if (prompt.value && swr?.waiting?.state === "installed") {
+            swr.waiting.postMessage({ type: "SKIP_WAITING" });
+          }
         };
         navigator.serviceWorker.ready.then((registration) => {
           swr = registration;
@@ -36,9 +37,9 @@ export function usePromptForUpdate() {
               }
             });
           });
-          // if already installed, but not activated, for example,
-          // when the user cancels the prompt and then refreshes the page
-          if (registration.waiting) {
+          // if already installed, but still not activated
+          // for example, when the user cancels the prompt and then refreshes the page
+          if (registration.waiting?.state === "installed") {
             prompt.value = true;
           }
         });
diff --git a/src/sw.ts b/src/sw.ts
index a5cf0c9..6159c4a 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -12,17 +12,40 @@ import {
   setDefaultHandler,
 } from "workbox-routing";
 
+const serviceWorkerName = self.location.pathname.replace(/^\//, "");
+const useExcludedAssets = [
+  ...excludeAssets,
+  serviceWorkerName,
+  `build/${serviceWorkerName}`,
+];
+
+const buildMap: Map<string, string | null> = appBundles.reduce(
+  (map, bundle) => {
+    const bundleName = bundle[0];
+    if (useExcludedAssets.includes(bundleName)) return map;
+
+    const revision = bundle.length === 3 && bundle[2].length;
+    map.set(bundleName, revision ? null : manifestHash);
+    map.set(`build/${bundleName}`, revision ? null : manifestHash);
+    return map;
+  },
+  new Map<string, string | null>(),
+);
+// console.log("buildMap", buildMap);
 export const assets = [...publicDirAssets, ...emittedAssets].filter(
-  (asset) => !excludeAssets.includes(asset),
+  (asset) => !useExcludedAssets.includes(asset),
 );
+
 export { routes };
 
+// TODO: check what happens with urls when using a custom base in Vite/Qwik
+const urlsToEntriesMatcher = /^build\/q-/;
 function urlsToEntries(urls: string[], hash: string): PrecacheEntry[] {
-  const matcher = /^build\/q-/;
   return urls.map((url) => {
-    const match = url.match(matcher);
     // use null revision, removing the revision or using undefined will cause workbox warnings in runtime
-    return match ? { url, revision: null } : { url, revision: hash };
+    return buildMap.has(url)
+      ? { url, revision: buildMap.get(url) }
+      : { url, revision: url.match(urlsToEntriesMatcher) ? null : hash };
   });
 }
 
@@ -33,7 +56,7 @@ export function setupPwa() {
   if (import.meta.env.DEV) {
     console.info(
       `Qwik PWA v${version}, using ${
-        prompt ? "prompt-for-update" : "auto-update"
+        promptForUpdate ? "prompt-for-update" : "auto-update"
       } strategy`,
     );
   }
@@ -63,13 +86,7 @@ export function setupPwa() {
     registerRoute(route.pattern, new StaleWhileRevalidate());
   }
 
-  if (prompt) {
-    // if (import.meta.env.DEV) {
-    //   console.warn(
-    //     `Qwik PWA v${version}\nWARNING: "prompt" mode not available yet`,
-    //   );
-    // }
-
+  if (promptForUpdate) {
     self.addEventListener("message", (event) => {
       if (event.data.type === "SKIP_WAITING") {
         self.skipWaiting();
@@ -102,7 +119,7 @@ export function setupPwa() {
 }
 
 declare const version: string;
-declare const prompt: boolean;
+declare const promptForUpdate: boolean;
 declare const appBundles: AppBundle[];
 
 declare const excludeAssets: string[];
diff --git a/vite.config.ts b/vite.config.ts
index d60ca44..4968b95 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
       external: [
         "fast-glob",
         "virtual:qwik-pwa/head",
+        "virtual:qwik-pwa/client-mode",
         ...excludeAll(builtinModules),
         ...builtinModules,
         /^node:.*/,