diff --git a/example/package.json b/example/package.json index 3ae02e6..4727d4e 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", @@ -20,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" 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 ( +
+ {prompt.value && ( +
+
+ + New content available, click on reload button to update. + +
+ + +
+ )} +
+ ); +}); 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$(() => {
+