Jau vairākus gadus kāds saka: "Hei, vai mēs varam padarīt šo lietotni instalējamu un strādāt arī bezsaistē?" Iegūstiet lēnu, sāpīgu lejupslīdi PWA trušu caurumā: viltīgi pakalpojumu darbinieku iestatījumi, kešatmiņas haoss, App Router, kas izjauc lietas, un lietotāji paliek ar vecajām versijām, ja vien viņi manuāli neizsauc Cache Dievus. Tāpēc es darīju to, ko jebkurš saprātīgs izstrādātājs ar pārāk daudz kafijas un nepietiekamu pacietību darītu: es izveidoju savu velna paketi. Introducing: next-pwa-pack Tas ir Next.js iesaiņotājs (yep, tas darbojas labi ar App Router), kas dod jums pilnīgu PWA atbalstu, vienkārši iesaiņojot savu izkārtojumu ar vienu pakalpojumu sniedzēju. import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } un Ievietojiet savu lietotni kā native, darbojas bezsaistē, kešatmiņas lapas, sinhronizācijas cilnes un pat kuģus ar iebūvētu dev paneli, lai jums nevajadzētu uzminēt, vai kaut kas darbojas. boom Vienkārši atstājiet to un dodieties tālāk ar savu dzīvi. Kāpēc es to uzbūvēju Katru reizi, kad klients lūdza “offline-first” vai “PWA funkcijas”, es nomira mazliet iekšā. , tikai lai atrastu, ka tas neatbalsta jaunāko lietotņu maršrutētāju, vai arī es mēģināšu pārvērst savu un galu galā atsvaidzināt lapu, lai redzētu, vai servisa darbinieks patiešām atjaunināja. next-pwa Galu galā, es sapratu, ka tas, ko es gribēju, bija bezjēdzīgs iestatījums. kaut kas, kas man vienkārši deva darba pakalpojumu darbinieku, iepriekšēju kešatmiņu, atjauninājumu loģiku un versiju kontroli - un izgāja no ceļa. kaut kas, ko es varētu pievienot jebkuram Next.js projektam un uzticēties. Tāpēc es to uzbūvēju. Kas patiesībā notiek Saskaņā ar Hood, Kuģi ar deficītu , un ka sw.js apstrādā HTML un statisko aktīvu kešatmiņu ar pareizu noklusējumu - HTML atbildes saņem 10 minūšu TTL, un aktīvi, piemēram, JS, CSS un attēli, tiek saglabāti pastāvīgi. next-pwa-pack sw.js manifest.json offline.html Lai saglabātu visas pārlūkprogrammas cilnes sinhronizācijā, tā izmanto notikumi, lai pārraidītu atjauninājumus visā sesijā.Ja jūs ejat bezsaistē, tas nodrošina vieglu lai lietotāji neredzētu briesmīgo balto ekrānu. localStorage offline.html Un, tā kā tas nav tikai par “nekavējoties”, es arī pievienoju nelielu API, lai jūs varētu mijiedarboties ar kešatmiņas slāni. Vai vēlaties, lai daži lapas pēc publicēšanas jaunu saturu? Tas ir triks, tur ir arī ja jums ir nepieciešams izsekot instalēšanas stāvoklim vai klausīties jaunās versijas. clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Dev Mode pārsteigumi Ja jūs varat piegādātājs, jūs saņemsiet plūstošu PWA labošanas paneli tieši jūsu lietotnē. tas parāda jūsu tiešsaistes / bezsaistes statusu, ļauj jums izdzēst vai atsvaidzināt kešatmiņu, izslēgt pakalpojumu darbinieku un pat izslēgt kešatmiņu, kamēr jūs testējat. devMode Dažas lietas, kas jāpatur prātā Tas nav burvju, tāpēc jums joprojām būs nepieciešams pielāgot savu manifest.json un augšupielādēt ikonas, ja vēlaties instalēt banerus, lai izskatītos labi. Mēs kešatmiņā tikai GET pieprasījumus - nav mutācijas vai jutīgus POST datus - un, ja vēlaties mainīt HTML TTL vai caching noteikumus, jums būs nepieciešams pielāgot tieši (pašlaik — nāk konfig sistēmas). sw.js Bet snieguma ziņā ietekme ir minimāla, un, ja kaut kas, atgriežoties apmeklētāji redzēs ātruma pieaugumu no cached atbildes. Kas ir nākamais Ceļvedis ietver atbalstu konfigurācijai balstītiem TTL noteikumiem, push paziņojumiem, gudrākām kešatmiņas stratēģijām, pamatojoties uz URL modeļiem, integrāciju ar ISR (Incremental Static Regeneration) un pat iebūvētu instrumentu, lai reāllaikā izsekotu kešatmiņas hit/miss metrikām. Tālrunis; dr Es būvēju jo es biju darījis roku vadu servisa darbiniekus un debug stale caches ražošanā. tas darbojas ārpus kastes, spēlē jauki ar jaunāko funkcijas, un palīdz jūsu lietojumprogrammai palikt ātrai, instalējamai un izturīgai - nesabojājot jūsu izstrādātāja saprātu. next-pwa-pack Next.js Tas ir atvērtā koda, jūs varat to izmēģināt šeit: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) Izmantojiet to, vilciet to, lauzt to - un pastāstiet man, ko jūs domājat. Palieciet noslēpumā!
