Kako integrirati servisne radnike u Next.js aplikacije

Servisni radnici su skripte koje se izvode u pozadini kako bi modernim web aplikacijama pružile moćne mogućnosti predmemoriranja i druge značajke.

Ove značajke web-pregledniku donose besprijekorno i jednostavno iskustvo izvornih aplikacija.

Uslužni radnici temeljna su komponenta u stvaranju progresivnih web aplikacija (PWA).

Razumijevanje uslužnih radnika

Uslužni radnik je vrsta JavaScript web radnik koji radi u pozadini, odvojeno od glavne JavaScript niti, tako da ne blokira. To znači da ne uzrokuje kašnjenja ili prekide korisničkog sučelja aplikacije ili interakcije korisnika s njom.

Uslužni radnici funkcioniraju kao proxy poslužitelji—stoje između web aplikacija i mreže. Mogu presresti zahtjeve i odgovore, spremiti resurse u predmemoriju i pružiti izvanmrežnu podršku. To pomaže osigurati da se web-aplikacije osjećaju besprijekornije i jednostavnije, čak i kada korisnik nije na mreži.

Ključne aplikacije za uslužne radnike

Postoji nekoliko prijava za uslužne radnike. Oni uključuju:

• PWA-ovi: Servisni radnici pružaju veliku moć progresivnim web aplikacijama. Izvode prilagođene mrežne zahtjeve, push obavijesti, izvanmrežnu podršku i brzo učitavanje.
• Spremanje u predmemoriju: Uslužni radnici mogu pohraniti sredstva aplikacije—slike, JavaScript kod i CSS datoteke—u predmemoriju preglednika. To omogućuje pregledniku da ih dohvati iz predmemorije umjesto da ih dohvaća s udaljenog poslužitelja preko mreže. Kao rezultat toga, sadržaj se učitava brže, što je osobito korisno za korisnike sa sporom ili nepouzdanom internetskom vezom.
• Sinkronizacija u pozadini: Servisni radnici mogu sinkronizirati podatke i pokretati druge pozadinske zadatke, čak i kada korisnik nije u aktivnoj interakciji s aplikacijom ili kada aplikacija nije otvorena u pregledniku.

Integracija Service Workera u Next.js aplikacije

Prije nego što uđete u kod, pomaže vam razumjeti kako rade uslužni radnici. Dvije su ključne faze korištenja uslužnih radnika: registracija i aktiviranje.

Tijekom prve faze preglednik registrira uslužnog radnika. Evo jednostavnog primjera:

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

Kod prvo provjerava podržava li preglednik servisne radnike, što rade svi moderni web preglednici. Ako ova podrška postoji, nastavlja se s registracijom uslužnog radnika koji se nalazi na navedenoj stazi datoteke.

U fazi aktivacije trebate instalirati i aktivirati servisnog radnika slušajući instalirati i aktivirati događanja pomoću JavaScript slušatelji događaja. Evo kako to možete postići:

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

Ovaj kod možete uključiti odmah nakon postupka registracije. Trebao bi se pokrenuti odmah nakon uspješnog postupka registracije uslužnog radnika.

Kôd ovog projekta možete pronaći u GitHub spremište.

Napravite Next.js projekt

Za početak pokrenite ovu naredbu za lokalno postavljanje Next.js projekta:

npx create-next-app next-project

Dodavanje uslužnog radnika u Next.js aplikaciju uključuje sljedeće korake:

1. Registrirajte uslužnog radnika u okruženju globalnog opsega.
2. Stvorite JavaScript datoteku uslužnog radnika u javnom imeniku.

Dodavanje uslužnog radnika

Najprije registrirajte uslužnog radnika. Ažurirajte src/pages/_app.js datoteku na sljedeći način. Uključivanje koda u ovu datoteku osigurava da se serviser registrira kada se aplikacija učita i ima pristup svim sredstvima aplikacije.

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 okidač kuke kada se komponenta montira. Kao i u prethodnom primjeru, kod prvo provjerava podržava li korisnički preglednik servisne radnike.

Ako podrška postoji, ona registrira skriptu uslužnog radnika koja se nalazi na navedenoj stazi datoteke i specificira njezin opseg kao "/”. To znači da serviser ima kontrolu nad svim resursima u aplikaciji. Ako želite, možete dati detaljniji opseg, npr. "/products”.

Ako je registracija uspješna, bilježi poruku o uspješnosti, zajedno s opsegom. Ako dođe do pogreške tijekom postupka registracije, kod će je uhvatiti i zabilježiti poruku o pogrešci.

Instalirajte i aktivirajte Service Worker

Dodajte sljedeći kod u novu datoteku, javni/uslužni-radnik.js.

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

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

Da biste testirali je li servisni radnik uspješno registriran, instaliran i aktiviran, pokrenite razvojni poslužitelj i otvorite svoju aplikaciju u pregledniku.

npm run dev

Otvoren Chromeovi alati za razvojne programere prozor (ili ekvivalent vašeg preglednika) i idite na Primjena tab. Ispod Uslužni radnici odjeljak, trebali biste vidjeti uslužnog radnika kojeg ste registrirali.

S uspješno registriranim, instaliranim i aktiviranim uslužnim radnikom možete implementirati nekoliko funkcija kao što su predmemorija, sinkronizacija u pozadini ili slanje push obavijesti.

Spremanje resursa u predmemoriju s uslužnim radnicima

Predmemoriranje sredstava aplikacije na korisničkom uređaju može poboljšati performanse omogućavanjem bržeg pristupa, posebno u situacijama s nepouzdanim internetskim vezama.

Da biste predmemorirali sredstva aplikacije, uključite sljedeći kod u service-worker.js datoteka.

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;
 });
 });
 })
 );
});

Kada korisnik prvi put pristupi početnoj stranici, ovaj kod provjerava postoji li predmemorirani odgovor za zahtjev u predmemoriji. Ako odgovor u predmemoriji postoji, usluga ga vraća klijentu.

Ako ne postoji predmemorirani odgovor, servisni radnik dohvaća resurs s poslužitelja preko mreže. Služi odgovor klijentu i sprema ga za buduće zahtjeve.

Da biste vidjeli predmemorirana sredstva, otvorite karticu Aplikacija u alatima za razvojne programere. Ispod Pohrana predmemorije trebali biste vidjeti popis predmemoriranih sredstava. Također možete provjeriti Izvan mreže opcija pod Uslužni radnik odjeljak i ponovno učitajte stranicu kako biste simulirali izvanmrežno iskustvo.

Sada, nakon što posjetite početnu stranicu, preglednik će poslužiti resurse pohranjene u predmemoriju umjesto da pokušava uputiti mrežne zahtjeve za dohvaćanje podataka.

Korištenje uslužnih radnika za poboljšanje učinka

Servisni radnici su moćan alat za poboljšanje performansi Next.js aplikacija. Oni mogu predmemorirati resurse, presresti zahtjeve i pružiti izvanmrežnu podršku, a sve to može poboljšati korisničko iskustvo.

Međutim, važno je napomenuti da uslužni radnici također mogu biti složeni za implementaciju i upravljanje. Važno je pažljivo razmotriti potencijalne prednosti i nedostatke uslužnih radnika prije nego ih upotrijebite.