Seit Jahren sagt jemand: "Hey, können wir diese app installieren und auch offline arbeiten?" Cue den langsamen, schmerzhaften Abstieg in das PWA Kaninchenloch: flaky Service-Worker-Setups, Cache-Chaos, App-Router brechen Dinge, und Benutzer stecken mit alten Versionen, es sei denn, sie ruft manuell die Cache-Götter. Also tat ich, was jeder vernünftige Entwickler mit zu viel Kaffee und nicht genug Geduld tun würde: Ich baute mein eigenes verdammtes Paket. Introducing: next-pwa-pack Es ist ein Drop-in-Wrapper für Next.js (yep, es funktioniert gut mit App Router), der Ihnen volle PWA-Unterstützung bietet, indem Sie Ihr Layout einfach mit einem Anbieter umwickeln. import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } und Tow Ihre App installiert wie eine native, funktioniert offline, Cache-Seiten, Synchronisierungskarten und sogar Schiffe mit einem eingebauten Dev-Panel, so dass Sie nicht erraten müssen, ob etwas funktioniert. boom Lassen Sie es einfach hinein und gehen Sie mit Ihrem Leben weiter. Warum ich das gebaut habe Jedes Mal, wenn ein Kunde nach "offline-first" oder "PWA-Funktionen" fragte, starb ich ein wenig drinnen. , nur um festzustellen, dass es den neuesten App-Router nicht unterstützt, oder ich würde versuchen, meinen eigenen zu rollen und die Seite wütend zu erneuern, um zu sehen, ob der Service-Arbeiter tatsächlich aktualisiert hat. next-pwa Letztendlich erkannte ich, was ich wollte, war ein No-Brainer-Setup. Etwas, das mir nur einen funktionierenden Service-Arbeiter, Pre-Caching, Aktualisierungslogik und Versionskontrolle gab - und es ging aus dem Weg. Etwas, das ich in jedes Next.js-Projekt anschließen und vertrauen konnte. Also habe ich das gebaut. Was eigentlich losgeht Unter dem Hood, Schiffe sind defekt , der und Dass sw.js HTML und statisches Asset-Caching mit einem vernünftigen Standard abwickelt – HTML-Antworten erhalten einen 10-minütigen TTL und Assets wie JS, CSS und Bilder werden dauerhaft gespeichert. next-pwa-pack sw.js manifest.json offline.html Um alle Browser-Tabs synchron zu halten, verwendet es Ereignisse zur Übertragung von Updates während der gesamten Sitzung. Wenn Sie offline gehen, dient es einer leichten So stellen sich die Benutzer nicht dem gefürchteten weißen Bildschirm gegenüber. localStorage offline.html Und da es nicht nur darum geht, „offline zu sein“, habe ich auch eine winzige API hinzugefügt, damit Sie mit der Caching-Schicht interagieren können. Wollen Sie einige Seiten nach der Veröffentlichung neuer Inhalte vorfestigen? Der Trick: Es gibt auch wenn Sie den Installationsstatus verfolgen oder nach neuen Versionen hören müssen. clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Dev Mode Werbung Wenn Sie erlauben Es zeigt Ihren Online- / Offline-Status, ermöglicht es Ihnen, den Cache zu löschen oder zu aktualisieren, den Service-Arbeiter zu deaktivieren und sogar das Caching ein- oder auszuschalten, während Sie testen. devMode Ein paar Dinge, die Sie im Hinterkopf behalten sollten Es ist keine Magie, also müssen Sie Ihre manifest.json immer noch anpassen und Ikonen hochladen, wenn Sie Banner installieren möchten, um gut auszusehen. Wir speichern nur GET-Anfragen - keine Mutationen oder sensible POST-Daten - und wenn Sie die HTML TTL oder andere Caching-Regeln ändern möchten, müssen Sie die direkt (für den Moment - ein Konfig-System kommt). sw.js Aber im Hinblick auf die Leistung ist der Einfluss minimal, und wenn überhaupt, werden zurückkehrende Besucher eine Geschwindigkeitserhöhung von den im Cache gespeicherten Antworten sehen. Was ist als nächstes Die Roadmap umfasst Unterstützung für konfigurationsbasierte TTL-Regeln, Push-Benachrichtigungen, intelligentere Cache-Strategien basierend auf URL-Muster, Integration mit ISR (Incremental Static Regeneration) und sogar ein integriertes Dashboard, um Cache-Hit/Miss-Metriken in Echtzeit zu verfolgen. Tsch; Dr Ich baue weil ich Hand-Wire-Service-Arbeiter und Debugging Stale Caches in der Produktion gemacht wurde. Es funktioniert aus der Box, spielt schön mit den neuesten Funktionen und hilft Ihrer App, schnell, installierbar und widerstandsfähig zu bleiben - ohne Ihre Entwicklergesundheit zu zerstören. next-pwa-pack Next.js Es ist Open Source, können Sie es hier ausprobieren: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) Verwenden Sie es, schmieden Sie es, brechen Sie es - und sagen Sie mir, was Sie denken. Bleiben Sie versteckt!
