claude/kochwas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pwa): Update-Toast zeigt neue Version an
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m15s
Details

Browse Source 
pwaStore ($lib/client/pwa.svelte.ts):
- Hängt sich an navigator.serviceWorker.ready, hört auf updatefound und
  setzt updateAvailable = true, sobald ein neuer SW im Status 'installed'
  ist UND es einen aktiven controller gibt (= Update eines bestehenden
  Tabs, nicht die erste Installation).
- Polling alle 30 Minuten via registration.update(), damit der User den
  Toast auch sieht, wenn er die Seite lange offen hat ohne zu navigieren.
- reload() ruft location.reload(); dismiss() schließt den Toast nur.

UpdateToast.svelte:
- Schwarzer Pill-Toast unten zentriert, mit Text, grünem "Neu laden"-
  Button (RefreshCw-Icon) und X zum Wegklicken.
- Slide-Up-Animation beim Erscheinen.
- Responsive: auf Mobile (<420px) wird's zum vollbreiten Banner statt
  Pill.

Root-Layout mountet <UpdateToast /> direkt neben <ConfirmDialog />.
onMount ruft pwaStore.init().

Status-Check der Live-Instanz https://kochwas.siegeln.net:
- manifest.webmanifest wird korrekt als JSON ausgeliefert
- service-worker.js (3.4 KB) ist verfügbar
- iOS Apple-Meta-Tags + Android theme-color sind im HTML <head>
PWA selbst funktioniert also bereits; der Toast war das fehlende Teil
für transparente User-seitige Updates.
This commit is contained in:
hsiegeln
2026-04-17 19:38:00 +02:00
parent dd52e44f67
commit f72fe64d8e
3 changed files with 166 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/+layout.svelte
View File

@@ -5,9 +5,11 @@
import { Settings, CookingPot, Globe, Utensils } from 'lucide-svelte';
import { profileStore } from '$lib/client/profile.svelte';
import { wishlistStore } from '$lib/client/wishlist.svelte';
import { pwaStore } from '$lib/client/pwa.svelte';
import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import SearchLoader from '$lib/components/SearchLoader.svelte';
import UpdateToast from '$lib/components/UpdateToast.svelte';
import type { SearchHit } from '$lib/server/recipes/search-local';
import type { WebHit } from '$lib/server/search/searxng';
@@ -112,6 +114,7 @@
onMount(() => {
profileStore.load();
void wishlistStore.refresh();
void pwaStore.init();
document.addEventListener('click', handleClickOutside);
document.addEventListener('keydown', handleKey);
return () => {
@@ -122,6 +125,7 @@
</script>
<ConfirmDialog />
<UpdateToast />
<header class="bar">
<div class="bar-inner">