← Zurück zur Werkstatt
Hinter den Kulissen

pwa-kit

Ein kleiner Baustein, mit dem Web-Apps offline funktionieren und aktuell bleiben.

pwa-kit

Über das Projekt

Der Aktualisierungsmechanismus von Bitey, verallgemeinert: ein PWA, der sich selbst aktualisiert und dies anschließend sagt, anstatt um Erlaubnis zu bitten, dass er nicht benötigt wird.

Kopie sw.js und pwa-update.js in das Web-Root einer App und vernetzen sie. Es gibt keinen Build-Schritt, keinen Bundler und keine Abhängigkeiten – und das ist der Punkt: Diese Apps sind statische Verzeichnisse.

Ein neuer Servicemitarbeiter wird sofort installiert und aktiviert, ohne auf das Schließen von Tabs warten zu müssen. Jedes geöffnete Fenster schließt die aktuelle Arbeit sicher ab, bevor nahtlos auf die neueste Version neu geladen wird.

Galerie

Funktionen

  • ⚡ Sofortige Aktivierung: Neue Mitarbeiter installieren und übernehmen, ohne dass veraltete Mitarbeiter tagelang in geöffneten Browser-Registerkarten verweilen.
  • 🛡️ Schutz vor nicht gespeicherter Arbeit (isBusy): Der Arbeiter fragt, anstatt blind zu navigieren; Seiten werden neu geladen, bis ausstehende Änderungen oder Formularstatus sicher gelöst sind.
  • 🌐 Network-First-Frische: Online-Anfragen haben immer Vorrang, um sicherzustellen, dass bereitgestellte Änderungen beim nächsten Neuladen wirksam werden und im Offline-Zustand auf den Cache zurückgreifen.
  • 🔔 Benachrichtigungen zum Bereinigen des Sitzungsspeichers: Vermeidet verunreinigende URL-Abfragezeichenfolgen mit Update-Flags und informiert Benutzer sauber durch In-App-Toasts.
  • 🚨 Integrierte Cache-Fluchtluke: Beinhaltet einen Notabmelde- und Cache-Bust-Mechanismus für blockierte Clients.