oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fase-14): PWA auto-update toast (14.1)

Browse Source 
Migrate from `registerSW({ immediate: true })` to `useRegisterSW` from
`virtual:pwa-register/svelte`, mirror its `needRefresh` / `offlineReady`
stores into stable layout-local writables, and render a new
`UpdateToast` pill (bottom-center) that surfaces:

  - "New version available" + a "Reload" button that calls
    `updateServiceWorker(true)`
  - "Ready to use offline" (auto-dismiss after 4s) on first install

Adds `[pwa] …` console.info telemetry on register / need-refresh /
apply. Stand-in for the unavailable `updateViaCache: 'none'` runtime
option (RegisterSWOptions doesn't expose it in vite-plugin-pwa 0.21.2):
poll `reg.update()` every 15min, which keeps a too-aggressively-cached
SW file from pinning users on the previous build for up to 24h.

`apps/web/src/global.d.ts` declares the virtual module's surface inline
so svelte-check picks it up without a relative path into node_modules;
the same file pre-declares the Fase-14.3 `__APP_VERSION__` triplet.

PU-01 stubs the registrar via `window.__pwaRegisterStub` (the layout
checks for it before calling the real `useRegisterSW`) so the toast
flow can be driven from a Playwright test without a second build.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-05-18 06:59:29 +02:00
parent d34c578ad8
commit a6e6915b0b
6 changed files with 342 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
apps/web/src/lib/components/UpdateToast.svelte Normal file
View File

@@ -0,0 +1,92 @@
<script lang="ts">
/**
* Fase 14.1 — PWA update + offline-ready notification.
*
* Driven by two writable<boolean> stores produced by `useRegisterSW()`
* (or its test stub). The component is purely presentational: state
* lives in the stores, behaviour (`onReload`) is injected.
*
* - When `needRefresh` flips true, a sticky pill appears with a
* "Reload" button. Clicking it calls `onReload()` which is wired
* in the root layout to `updateServiceWorker(true)`.
* - When `offlineReady` flips true (first install), a transient
* pill appears for 4s and then auto-dismisses.
*
* Both pills share the same bottom-center slot. If both fire at once
* the update toast wins (more actionable).
*/
import { onMount } from 'svelte';
import type { Writable } from 'svelte/store';
import * as m from '$lib/paraglide/messages';
const {
needRefresh,
offlineReady,
onReload
}: {
needRefresh: Writable<boolean>;
offlineReady: Writable<boolean>;
onReload: () => void | Promise<void>;
} = $props();
let showOfflineReady = $state(false);
let offlineTimer: ReturnType<typeof setTimeout> | null = null;
onMount(() => {
const unsub = offlineReady.subscribe((v) => {
if (!v) return;
showOfflineReady = true;
console.info('[pwa] offline-ready');
if (offlineTimer) clearTimeout(offlineTimer);
offlineTimer = setTimeout(() => {
showOfflineReady = false;
offlineReady.set(false);
}, 4_000);
});
return () => {
unsub();
if (offlineTimer) clearTimeout(offlineTimer);
};
});
async function handleReload() {
console.info('[pwa] applying update');
await onReload();
}
</script>
{#if $needRefresh}
<div
data-testid="pwa-update-toast"
role="status"
aria-live="polite"
class="pointer-events-none fixed inset-x-0 bottom-20 z-50 flex justify-center px-4 md:bottom-6"
>
<div
class="pointer-events-auto flex items-center gap-3 rounded-full bg-slate-900 px-4 py-2 text-sm text-white shadow-[0px_20px_40px_rgba(15,23,42,0.3)] dark:bg-slate-100 dark:text-slate-900"
>
<span>{m.pwa_update_available()}</span>
<button
type="button"
data-testid="pwa-update-reload"
onclick={handleReload}
class="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white hover:bg-white/25 dark:bg-slate-900/15 dark:text-slate-900 dark:hover:bg-slate-900/25"
>
{m.pwa_update_reload()}
</button>
</div>
</div>
{:else if showOfflineReady}
<div
data-testid="pwa-offline-ready-toast"
role="status"
aria-live="polite"
class="pointer-events-none fixed inset-x-0 bottom-20 z-50 flex justify-center px-4 md:bottom-6"
>
<div
class="pointer-events-auto flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm text-white shadow-[0px_20px_40px_rgba(15,23,42,0.3)] dark:bg-slate-100 dark:text-slate-900"
>
<span>{m.pwa_offline_ready()}</span>
</div>
</div>
{/if}