Da anni qualcuno dice: “Hey, possiamo rendere questa app installabile e funzionare anche offline?” Cue la lenta, dolorosa discesa nel buco del coniglio PWA: le impostazioni dei lavoratori del servizio flaky, il caos della cache, App Router rompere le cose, e gli utenti bloccati con le vecchie versioni a meno che non hanno chiamato manualmente il Cache Gods. Così ho fatto quello che qualsiasi sviluppatore ragionevole con troppo caffè e non abbastanza pazienza avrebbe fatto: ho costruito il mio proprio pacchetto maledetto. Introducing: next-pwa-pack È un wrapper drop-in per Next.js (yep, funziona bene con App Router) che ti dà il pieno supporto PWA semplicemente avvolgendo il tuo layout con un provider. import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } e Trovare l'applicazione installa come una nativa, funziona offline, pagine cache, schede di sincronizzazione e persino navi con un pannello di sviluppo incorporato in modo da non dover indovinare se qualcosa funziona. boom Basta buttarlo dentro e andare avanti con la tua vita. Perché ho costruito questo Ogni volta che un cliente chiedeva “offline-first” o “funzioni PWA”, morivo un po’ dentro. , solo per scoprire che non supporta l'ultimo App Router, o cercherò di rollare il mio e finirei per raggirare la pagina per vedere se l'operatore del servizio ha effettivamente aggiornato. next-pwa Alla fine, mi sono reso conto che quello che volevo era una configurazione senza pensiero. Qualcosa che mi ha dato un operatore di servizio di lavoro, pre-caching, logica di aggiornamento e controllo delle versioni - e è uscito dalla strada. Qualcosa che potevo collegare a qualsiasi progetto Next.js e fidarmi. Così ho costruito questo. Cosa sta realmente accadendo sotto il cappello, Le navi in default di , e Che sw.js gestisca l'HTML e la cache delle risorse statiche con un'impostazione predefinita - le risposte HTML ricevono un TTL di 10 minuti e le risorse come JS, CSS e immagini vengono memorizzate in modo permanente. next-pwa-pack sw.js manifest.json offline.html Per mantenere tutte le schede del browser in sincronizzazione, utilizza eventi per trasmettere aggiornamenti in tutta la sessione. Se si va offline, serve un In questo modo gli utenti non affrontano lo spaventato schermo bianco. localStorage offline.html E poiché non si tratta solo di “essere offline”, ho anche aggiunto una piccola API in modo da poter interagire con il livello di cache. Desideri prefetchare alcune pagine dopo la pubblicazione di nuovi contenuti? Il trucco: c’è anche se è necessario tenere traccia dello stato di installazione o ascoltare le nuove versioni. clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Modelli di Dev Se si consente Nel provider, ottieni un pannello di debug PWA fluttuante direttamente nell'app. Visualizza il tuo stato online/offline, ti consente di pulire o aggiornare la cache, disregistrare l'operatore del servizio e persino spostare la cache mentre stai testando. devMode Poche cose da tenere a mente Non è magica, quindi dovrai ancora personalizzare il tuo manifest.json e caricare le icone se vuoi installare banner per guardare bene. Cacheamo solo le richieste GET - nessuna mutazione o dati POST sensibili - e se vuoi cambiare l'HTML TTL o altre regole di cache, dovrai modificare la direttamente (per ora - un sistema di config sta arrivando). sw.js Ma in termini di prestazioni, l'impatto è minimo, e se c'è qualcosa, i visitatori che tornano vedranno un aumento di velocità dalle risposte in cache. Che cosa è il prossimo La roadmap include il supporto per regole TTL basate sulla configurazione, notifiche push, strategie di cache più intelligenti basate su modelli di URL, integrazione con ISR (Incremental Static Regeneration), e persino un dashboard integrato per monitorare le metriche di cache hit/miss in tempo reale. Cd; il dr Io ho costruito perché sono stato fatto lavoratori di servizio di cablaggio a mano e debugging cache stale nella produzione. funziona fuori dalla scatola, gioca bene con l'ultimo funzioni, e aiuta la tua app a rimanere veloce, installabile e resiliente - senza rovinare la tua saggezza di sviluppatore. next-pwa-pack Next.js È open source, potete provarlo qui: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) Usalo, forcalo, romperlo – e dirmi cosa ne pensi. Rimanete nascosti!
