Ako integrovať servisných pracovníkov do aplikácií Next.js

Servisní pracovníci sú skripty, ktoré sa spúšťajú na pozadí a poskytujú moderné webové aplikácie výkonné možnosti ukladania do vyrovnávacej pamäte a ďalšie funkcie.

Tieto funkcie prinášajú do webového prehliadača bezproblémový a užívateľsky prívetivý zážitok z natívnych aplikácií.

Servisní pracovníci sú základným komponentom pri vytváraní progresívnych webových aplikácií (PWA).

Pochopenie servisných pracovníkov

Servisný pracovník je typ Webový pracovník JavaScript ktorý beží na pozadí, oddelene od hlavného vlákna JavaScriptu, takže nie je blokovaný. To znamená, že nespôsobuje oneskorenia ani prerušenia používateľského rozhrania aplikácie alebo interakcie používateľa s ňou.

Servisní pracovníci fungujú ako proxy servery – sedia medzi webovými aplikáciami a sieťou. Môžu zachytávať požiadavky a odpovede, ukladať zdroje do vyrovnávacej pamäte a poskytovať offline podporu. Pomáha to zaistiť, že webové aplikácie budú bezproblémovejšie a užívateľsky prívetivejšie, aj keď používateľ nie je online.

Kľúčové aplikácie pre servisných pracovníkov

Existuje niekoľko aplikácií pre servisných pracovníkov. Zahŕňajú:

• PWA: Servisní pracovníci poskytujú veľkú silu progresívnym webovým aplikáciám. Vykonávajú vlastné sieťové požiadavky, upozornenia push, podporu offline a rýchle načítanie.
• Ukladanie do vyrovnávacej pamäte: Servisní pracovníci môžu ukladať prostriedky aplikácie – obrázky, kód JavaScript a súbory CSS – do vyrovnávacej pamäte prehliadača. To umožňuje prehliadaču načítať ich zo svojej vyrovnávacej pamäte, namiesto toho, aby ich načítal zo vzdialeného servera cez sieť. V dôsledku toho sa obsah načítava rýchlejšie, čo je užitočné najmä pre používateľov s pomalým alebo nespoľahlivým internetovým pripojením.
• Synchronizácia na pozadí: Servisní pracovníci môžu synchronizovať dáta a spúšťať iné úlohy na pozadí, aj keď používateľ aktívne neinteraguje s aplikáciou alebo keď aplikácia nie je otvorená v prehliadači.

Integrácia servisných pracovníkov v aplikáciách Next.js

Predtým, ako sa ponoríte do kódu, pomôže vám pochopiť, ako pracujú servisní pracovníci. Existujú dve kľúčové fázy používania servisných pracovníkov: registrácia a aktivácia.

Počas prvej fázy prehliadač zaregistruje servisného pracovníka. Tu je jednoduchý príklad:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

Kód najprv skontroluje, či prehliadač podporuje servisných pracovníkov, čo robia všetky moderné webové prehliadače. Ak táto podpora existuje, pristúpi k registrácii servisného pracovníka umiestneného na zadanej ceste k súboru.

Vo fáze aktivácie musíte nainštalovať a aktivovať servisného pracovníka počúvaním Inštalácia a Aktivovať udalosti pomocou Prijímače udalostí JavaScript. Tu je návod, ako to môžete dosiahnuť:

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

Tento kód môžete uviesť hneď po registrácii. Mal by sa spustiť hneď po úspešnom procese registrácie servisného pracovníka.

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Vytvorte projekt Next.js

Ak chcete začať, spustite tento príkaz na lokálne lešenie projektu Next.js:

npx create-next-app next-project

Pridanie servisného pracovníka do aplikácie Next.js zahŕňa nasledujúce kroky:

1. Zaregistrujte servisného pracovníka v prostredí globálneho rozsahu.
2. Vytvorte súbor JavaScript service worker vo verejnom adresári.

Pridanie servisného pracovníka

Najprv zaregistrujte servisného pracovníka. Aktualizujte src/pages/_app.js súbor nasledovne. Zahrnutie kódu do tohto súboru zaistí, že sa servisný pracovník zaregistruje pri načítaní aplikácie a bude mať prístup ku všetkým aktívam aplikácie.

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

The useEffect hákové spúšte pri montáži komponentu. Podobne ako v predchádzajúcom príklade kód najprv skontroluje, či prehliadač používateľa podporuje servisných pracovníkov.

Ak podpora existuje, zaregistruje skript service worker umiestnený na zadanej ceste k súboru a určí jeho rozsah ako „/”. To znamená, že servisný pracovník má kontrolu nad všetkými zdrojmi v aplikácii. Ak chcete, môžete poskytnúť podrobnejší rozsah, napr./products”.

Ak je registrácia úspešná, zaprotokoluje správu o úspechu spolu s jej rozsahom. Ak sa počas procesu registrácie vyskytne chyba, kód ju zachytí a zaznamená chybové hlásenie.

Nainštalujte a aktivujte servisného pracovníka

Pridajte nasledujúci kód do nového súboru, public/service-worker.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

Ak chcete otestovať, či bol servisný pracovník úspešne zaregistrovaný, nainštalovaný a aktivovaný, spustite vývojový server a otvorte svoju aplikáciu v prehliadači.

npm run dev

OTVORENÉ Vývojárske nástroje prehliadača Chrome okno (alebo ekvivalent vášho prehliadača) a prejdite do Aplikácia tab. Pod Servisní pracovníci mali by ste vidieť servisného pracovníka, ktorého ste zaregistrovali.

Keď sa servisný pracovník úspešne zaregistruje, nainštaluje a aktivuje, môžete implementovať niekoľko funkcií, ako je ukladanie do vyrovnávacej pamäte, synchronizácia na pozadí alebo odosielanie push notifikácií.

Ukladanie zdrojov do vyrovnávacej pamäte pomocou servisných pracovníkov

Ukladanie prostriedkov aplikácie do vyrovnávacej pamäte na zariadení používateľa môže zlepšiť výkon tým, že umožní rýchlejší prístup, najmä v situáciách s nespoľahlivým internetovým pripojením.

Ak chcete aktíva aplikácie uložiť do vyrovnávacej pamäte, zahrňte do súboru nasledujúci kód service-worker.js súbor.

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

Keď používateľ prvýkrát vstúpi na domovskú stránku, tento kód skontroluje, či je vo vyrovnávacej pamäti uložená odpoveď na požiadavku. Ak existuje odpoveď uložená vo vyrovnávacej pamäti, služba ju vráti klientovi.

Ak neexistuje žiadna odpoveď uložená vo vyrovnávacej pamäti, servisný pracovník načíta prostriedok zo servera cez sieť. Slúži ako odpoveď klientovi a ukladá ju do vyrovnávacej pamäte pre budúce požiadavky.

Ak chcete zobraziť aktíva vo vyrovnávacej pamäti, otvorte kartu Aplikácia v nástrojoch pre vývojárov. Pod Vyrovnávacia pamäť mali by ste vidieť zoznam aktív uložených vo vyrovnávacej pamäti. Môžete tiež skontrolovať Offline možnosť pod Servisný pracovník a znova načítajte stránku, aby ste simulovali offline zážitok.

Teraz, keď navštívite domovskú stránku, prehliadač bude poskytovať prostriedky uložené vo vyrovnávacej pamäti namiesto pokusu o sieťové požiadavky na načítanie údajov.

Používanie servisných pracovníkov na zvýšenie výkonu

Servisní pracovníci sú výkonným nástrojom na zvýšenie výkonu aplikácií Next.js. Môžu ukladať zdroje do vyrovnávacej pamäte, zachytávať požiadavky a poskytovať offline podporu, čo všetko môže zlepšiť používateľskú skúsenosť.

Je však dôležité poznamenať, že implementácia a riadenie servisných pracovníkov môže byť zložité. Je dôležité dôkladne zvážiť potenciálne výhody a nevýhody servisných pracovníkov predtým, ako ich použijete.