@pwa-platform/react 0.1.0-beta.1 → 0.1.0-beta.2

package/README.md

@@ -4,6 +4,20 @@ React 19 binding for PWA Platform.
 
 Use `PwaProvider` and `usePwa()` in a React 19 application. Also configure `@pwa-platform/vite` for build artifacts.
 
+The current source adds an opt-in update notice (not present in the published `0.1.0-beta.1`):
+
+```tsx
+import { PwaUpdateNotice } from "@pwa-platform/react/ui";
+import "@pwa-platform/react/update-notice.css";
+
+<PwaProvider config={config}>
+  <App />
+  <PwaUpdateNotice />
+</PwaProvider>
+```
+
+The default is a non-modal bottom-right card. `position` also accepts `bottom-center`, `top-right`, and `top-center`; `messages` overrides Chinese copy. Use `colors={{ primaryButtonBackground: "#006e52", primaryButtonText: "#ffffff" }}` for simple brand colors; `surface`, `text`, `mutedText`, and `border` are also available. Inherited `--pwa-update-*` CSS variables control the remaining appearance; `colors` takes precedence for values it sets. `reloadPage` can replace the final reload action when the application must protect unsaved work. Only a click on “刷新页面” calls it. The component does not register the worker; the application still calls `register()` and may configure `updateCheck` for long-lived pages.
+
 This is a `0.1.0` prerelease. It provides online use, installation integration, static precaching, a safe offline fallback, and controlled updates. It does not enable runtime business API caching, private data caching, automatic write replay, or Push for applications. Production deployment requires the application and infrastructure checks described in the PWA Platform release runbook.
 
 License: MIT.

package/dist/ui.d.ts

@@ -0,0 +1,33 @@
+import { type ReactElement } from "react";
+export type PwaUpdateNoticePosition = "bottom-right" | "bottom-center" | "top-right" | "top-center";
+export type PwaUpdateNoticeMessages = {
+    readonly readyTitle: string;
+    readonly readyBody: string;
+    readonly update: string;
+    readonly later: string;
+    readonly updatingTitle: string;
+    readonly updatingBody: string;
+    readonly reloadTitle: string;
+    readonly reloadBody: string;
+    readonly reload: string;
+    readonly errorTitle: string;
+    readonly errorBody: string;
+    readonly retry: string;
+};
+export type PwaUpdateNoticeProps = {
+    readonly position?: PwaUpdateNoticePosition;
+    readonly messages?: Partial<PwaUpdateNoticeMessages>;
+    readonly colors?: Partial<PwaUpdateNoticeColors>;
+    readonly reloadPage?: () => void;
+};
+export type PwaUpdateNoticeColors = {
+    readonly surface: string;
+    readonly text: string;
+    readonly mutedText: string;
+    readonly border: string;
+    readonly primaryButtonBackground: string;
+    readonly primaryButtonText: string;
+};
+/** Opt-in, non-modal update notice. Import `@pwa-platform/react/update-notice.css` for its default appearance. */
+export declare function PwaUpdateNotice({ position, messages: overrides, colors, reloadPage, }: PwaUpdateNoticeProps): ReactElement | null;
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1G,MAAM,MAAM,uBAAuB,GAAG,cAAc,GAAG,eAAe,GAAG,WAAW,GAAG,YAAY,CAAC;AAEpG,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IAC5C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACrD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACjD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CAAC;IACzC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACpC,CAAC;AAsBF,kHAAkH;AAClH,wBAAgB,eAAe,CAAC,EAC9B,QAAyB,EACzB,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,UAAU,GACX,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA6H5C"}

package/dist/ui.js

@@ -0,0 +1,147 @@
+import { createElement, useEffect, useRef, useState } from "react";
+import { usePwa } from "./index.js";
+const DEFAULT_MESSAGES = {
+    readyTitle: "有可用更新",
+    readyBody: "新版离线资源已准备好，你可以在合适的时候更新。",
+    update: "更新",
+    later: "稍后",
+    updatingTitle: "正在更新",
+    updatingBody: "正在切换离线资源，请稍候。",
+    reloadTitle: "更新已完成",
+    reloadBody: "需要时刷新页面，以确保使用最新内容。",
+    reload: "刷新页面",
+    errorTitle: "更新未完成",
+    errorBody: "请检查连接后重试。",
+    retry: "重试",
+};
+const REMIND_AFTER_MS = 30 * 60_000;
+const STABLE_WAITING_MS = 100;
+/** Opt-in, non-modal update notice. Import `@pwa-platform/react/update-notice.css` for its default appearance. */
+export function PwaUpdateNotice({ position = "bottom-right", messages: overrides, colors, reloadPage, }) {
+    const pwa = usePwa();
+    const waiting = pwa.state.updateWaiting;
+    const [phase, setPhase] = useState("ready");
+    const [dismissed, setDismissed] = useState(false);
+    const [stableWaiting, setStableWaiting] = useState(false);
+    const previousWaiting = useRef(false);
+    const stableWaitingRef = useRef(false);
+    const takeoverObserved = useRef(false);
+    const reminder = useRef(undefined);
+    const waitingTimer = useRef(undefined);
+    const mounted = useRef(true);
+    function clearReminder() {
+        if (reminder.current !== undefined)
+            clearTimeout(reminder.current);
+        reminder.current = undefined;
+    }
+    function clearWaitingTimer() {
+        if (waitingTimer.current !== undefined)
+            clearTimeout(waitingTimer.current);
+        waitingTimer.current = undefined;
+    }
+    function markStableWaiting(value) {
+        stableWaitingRef.current = value;
+        setStableWaiting(value);
+    }
+    useEffect(() => {
+        const wasWaiting = previousWaiting.current;
+        previousWaiting.current = waiting;
+        if (waiting && !wasWaiting) {
+            takeoverObserved.current = false;
+            setPhase("ready");
+            setDismissed(false);
+            markStableWaiting(false);
+            clearReminder();
+            clearWaitingTimer();
+            waitingTimer.current = setTimeout(() => {
+                waitingTimer.current = undefined;
+                if (previousWaiting.current)
+                    markStableWaiting(true);
+            }, STABLE_WAITING_MS);
+        }
+        else if (!waiting && wasWaiting) {
+            const wasStable = stableWaitingRef.current;
+            clearWaitingTimer();
+            markStableWaiting(false);
+            takeoverObserved.current = wasStable;
+            setPhase(wasStable ? "reload" : "ready");
+            setDismissed(false);
+            clearReminder();
+        }
+    }, [waiting]);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            clearReminder();
+            clearWaitingTimer();
+            previousWaiting.current = false;
+        };
+    }, []);
+    function later() {
+        setDismissed(true);
+        clearReminder();
+        reminder.current = setTimeout(() => {
+            reminder.current = undefined;
+            if (previousWaiting.current)
+                setDismissed(false);
+        }, REMIND_AFTER_MS);
+    }
+    async function apply() {
+        if (phase === "updating")
+            return;
+        setPhase("updating");
+        try {
+            const applied = await pwa.applyUpdate();
+            if (!mounted.current)
+                return;
+            setPhase(applied || takeoverObserved.current ? "reload" : "ready");
+        }
+        catch {
+            if (mounted.current)
+                setPhase(takeoverObserved.current ? "reload" : "error");
+        }
+    }
+    function reload() {
+        if (reloadPage !== undefined)
+            reloadPage();
+        else
+            window.location.reload();
+    }
+    const mode = phase === "ready" ? (waiting && stableWaiting && !dismissed ? "ready" : null) : phase;
+    if (mode === null)
+        return null;
+    const messages = { ...DEFAULT_MESSAGES, ...overrides };
+    const title = messages[`${mode}Title`];
+    const body = messages[`${mode}Body`];
+    const buttons = [];
+    if (mode === "ready") {
+        buttons.push(createElement("button", { key: "update", type: "button", className: "pwa-update-notice__button pwa-update-notice__button--primary", onClick: () => void apply() }, messages.update));
+        buttons.push(createElement("button", { key: "later", type: "button", className: "pwa-update-notice__button", onClick: later }, messages.later));
+    }
+    else if (mode === "updating") {
+        buttons.push(createElement("button", { key: "updating", type: "button", className: "pwa-update-notice__button pwa-update-notice__button--primary", disabled: true }, messages.updatingTitle));
+    }
+    else if (mode === "reload") {
+        buttons.push(createElement("button", { key: "reload", type: "button", className: "pwa-update-notice__button pwa-update-notice__button--primary", onClick: reload }, messages.reload));
+    }
+    else {
+        buttons.push(createElement("button", { key: "retry", type: "button", className: "pwa-update-notice__button pwa-update-notice__button--primary", onClick: () => void apply() }, messages.retry));
+    }
+    return createElement("section", {
+        className: "pwa-update-notice",
+        "data-position": position,
+        style: {
+            "--pwa-update-surface": colors?.surface,
+            "--pwa-update-text": colors?.text,
+            "--pwa-update-muted": colors?.mutedText,
+            "--pwa-update-border": colors?.border,
+            "--pwa-update-accent": colors?.primaryButtonBackground,
+            "--pwa-update-accent-text": colors?.primaryButtonText,
+        },
+        role: "status",
+        "aria-live": "polite",
+        "aria-busy": mode === "updating",
+    }, createElement("h2", { className: "pwa-update-notice__title" }, title), createElement("p", { className: "pwa-update-notice__body" }, body), createElement("div", { className: "pwa-update-notice__actions" }, buttons));
+}
+//# sourceMappingURL=ui.js.map

package/dist/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"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"}

package/dist/update-notice.css

@@ -0,0 +1,113 @@
+.pwa-update-notice {
+  --pwa-update-default-surface: #ffffff;
+  --pwa-update-default-text: #1f2328;
+  --pwa-update-default-muted: #57616d;
+  --pwa-update-default-border: #d0d7de;
+  --pwa-update-default-accent: #0b5cd5;
+  --pwa-update-default-accent-text: #ffffff;
+  position: fixed;
+  z-index: var(--pwa-update-z-index, 1200);
+  box-sizing: border-box;
+  width: min(24rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border: 1px solid var(--pwa-update-border, var(--pwa-update-default-border));
+  border-radius: var(--pwa-update-radius, 0.5rem);
+  background: var(--pwa-update-surface, var(--pwa-update-default-surface));
+  color: var(--pwa-update-text, var(--pwa-update-default-text));
+  box-shadow: var(--pwa-update-shadow, 0 8px 24px rgb(15 23 42 / 12%));
+  font-family: var(--pwa-update-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  color-scheme: light;
+}
+
+.pwa-update-notice[data-position="bottom-right"] {
+  inset-block-end: calc(1rem + env(safe-area-inset-bottom));
+  inset-inline-end: calc(1rem + env(safe-area-inset-right));
+}
+
+.pwa-update-notice[data-position="bottom-center"] {
+  inset-block-end: calc(1rem + env(safe-area-inset-bottom));
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.pwa-update-notice[data-position="top-right"] {
+  inset-block-start: calc(1rem + env(safe-area-inset-top));
+  inset-inline-end: calc(1rem + env(safe-area-inset-right));
+}
+
+.pwa-update-notice[data-position="top-center"] {
+  inset-block-start: calc(1rem + env(safe-area-inset-top));
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.pwa-update-notice__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.pwa-update-notice__body {
+  margin: 0.375rem 0 0;
+  color: var(--pwa-update-muted, var(--pwa-update-default-muted));
+}
+
+.pwa-update-notice__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.875rem;
+}
+
+.pwa-update-notice__button {
+  min-height: 44px;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid var(--pwa-update-border, var(--pwa-update-default-border));
+  border-radius: var(--pwa-update-radius, 0.5rem);
+  background: var(--pwa-update-surface, var(--pwa-update-default-surface));
+  color: var(--pwa-update-text, var(--pwa-update-default-text));
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pwa-update-notice__button--primary {
+  border-color: var(--pwa-update-accent, var(--pwa-update-default-accent));
+  background: var(--pwa-update-accent, var(--pwa-update-default-accent));
+  color: var(--pwa-update-accent-text, var(--pwa-update-default-accent-text));
+}
+
+.pwa-update-notice__button:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.pwa-update-notice__button:focus-visible {
+  outline: 2px solid var(--pwa-update-accent, var(--pwa-update-default-accent));
+  outline-offset: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pwa-update-notice {
+    --pwa-update-default-surface: #161b22;
+    --pwa-update-default-text: #e6e9ec;
+    --pwa-update-default-muted: #a6b0bd;
+    --pwa-update-default-border: #3d4652;
+    --pwa-update-default-accent: #4c93ff;
+    --pwa-update-default-accent-text: #0b1220;
+    color-scheme: dark;
+  }
+}
+
+@media (max-width: 480px) {
+  .pwa-update-notice[data-position] {
+    inset-inline-start: 1rem;
+    inset-inline-end: 1rem;
+    width: auto;
+    transform: none;
+  }
+}

package/package.json

@@ -1,15 +1,22 @@
 {
   "name": "@pwa-platform/react",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "description": "React 19 binding for PWA Platform.",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/update-notice.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./update-notice.css": "./dist/update-notice.css"
   },
   "types": "./dist/index.d.ts",
   "files": [
@@ -19,12 +26,12 @@
     "react": "^19.2.0"
   },
   "dependencies": {
-    "@pwa-platform/client-runtime": "0.1.0-beta.1"
+    "@pwa-platform/client-runtime": "0.1.0-beta.2"
   },
   "devDependencies": {
     "@types/react": "19.3.0",
     "react": "19.3.0",
-    "@pwa-platform/vue": "0.1.0-beta.1"
+    "@pwa-platform/vue": "0.1.0-beta.2"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -35,7 +42,7 @@
     "tag": "next"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.build.json",
+    "build": "tsc --project tsconfig.build.json && node -e \"require('node:fs').copyFileSync('src/update-notice.css', 'dist/update-notice.css')\"",
     "test": "vitest run",
     "typecheck": "tsc --noEmit --project tsconfig.json"
   }