Kako integrirati storitvene delavce v aplikacije Next.js

Storitveni delavci so skripti, ki se izvajajo v ozadju in zagotavljajo zmogljive zmogljivosti predpomnjenja in druge funkcije za sodobne spletne aplikacije.

Te funkcije prinašajo brezhibno in uporabniku prijazno izkušnjo izvornih aplikacij v spletni brskalnik.

Storitveni delavci so temeljna komponenta pri ustvarjanju progresivnih spletnih aplikacij (PWA).

Razumevanje storitvenih delavcev

Storitveni delavec je vrsta JavaScript spletni delavec ki teče v ozadju, ločeno od glavne niti JavaScript, tako da ne blokira. To pomeni, da ne povzroča zamud ali prekinitev uporabniškega vmesnika aplikacije ali interakcije uporabnika z njim.

Storitveni delavci delujejo kot proxy strežniki – sedijo med spletnimi aplikacijami in omrežjem. Lahko prestrežejo zahteve in odgovore, predpomnijo vire in nudijo podporo brez povezave. To pomaga zagotoviti, da so spletne aplikacije bolj brezhibne in uporabniku prijazne, tudi ko uporabnik ni na spletu.

Ključne aplikacije za storitvene delavce

Obstaja več aplikacij za storitvene delavce. Vključujejo:

• PWA: Storitveni delavci zagotavljajo veliko moč progresivnim spletnim aplikacijam. Izvajajo omrežne zahteve po meri, potisna obvestila, podporo brez povezave in hitro nalaganje.
• Predpomnjenje: Storitveni delavci lahko shranijo sredstva aplikacije – slike, kodo JavaScript in datoteke CSS – v predpomnilnik brskalnika. To brskalniku omogoča, da jih pridobi iz svojega predpomnilnika, namesto da jih pridobi iz oddaljenega strežnika prek omrežja. Posledično se vsebina nalaga hitreje, kar je še posebej koristno za uporabnike s počasno ali nezanesljivo internetno povezavo.
• Sinhronizacija v ozadju: Storitveni delavci lahko sinhronizirajo podatke in izvajajo druga opravila v ozadju, tudi ko uporabnik ne komunicira aktivno z aplikacijo ali ko aplikacija ni odprta v brskalniku.

Vključevanje storitvenih delavcev v aplikacije Next.js

Preden se poglobite v kodo, pomaga razumeti, kako delujejo storitveni delavci. Obstajata dve ključni fazi uporabe storitvenih delavcev: registracija in aktiviranje.

V prvi fazi brskalnik registrira storitvenega delavca. Tukaj je preprost primer:

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

Koda najprej preveri, ali brskalnik podpira servisne delavce, kar počnejo vsi sodobni spletni brskalniki. Če ta podpora obstaja, se nadaljuje z registracijo storitvenega delavca, ki se nahaja na podani poti datoteke.

V fazi aktivacije morate namestiti in aktivirati servisnega delavca tako, da poslušate namestite in aktivirati dogodki z uporabo poslušalci dogodkov JavaScript. Evo, kako lahko to dosežete:

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

To kodo lahko vključite takoj po postopku registracije. Zagnati bi se moral takoj po uspešnem postopku registracije storitvenega delavca.

Kodo tega projekta najdete v GitHub repozitorij.

Ustvarite projekt Next.js

Za začetek zaženite ta ukaz za lokalno gradnjo projekta Next.js:

npx create-next-app next-project

Dodajanje storitvenega delavca v aplikacijo Next.js vključuje naslednje korake:

1. Registrirajte storitvenega delavca v okolju globalnega obsega.
2. V javnem imeniku ustvarite datoteko JavaScript storitvenega delavca.

Dodajanje storitvenega delavca

Najprej registrirajte storitvenega delavca. Posodobite src/pages/_app.js datoteko, kot sledi. Vključitev kode v to datoteko zagotavlja, da se servisni delavec registrira, ko se aplikacija naloži, in ima dostop do vseh sredstev 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 kavelj sproži, ko se komponenta namesti. Tako kot v prejšnjem primeru koda najprej preveri, ali brskalnik uporabnika podpira servisne delavce.

Če podpora obstaja, registrira skript storitvenega delavca, ki se nahaja na določeni poti datoteke, in poda njen obseg kot "/”. To pomeni, da ima servisni delavec nadzor nad vsemi viri v aplikaciji. Če želite, lahko zagotovite bolj razdrobljen obseg, npr./products”.

Če je registracija uspešna, zabeleži sporočilo o uspehu skupaj z obsegom. Če med postopkom registracije pride do napake, jo bo koda ujela in zabeležila sporočilo o napaki.

Namestite in aktivirajte Service Worker

Dodajte naslednjo kodo v novo datoteko, 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();

Če želite preizkusiti, ali je bil servisni delavec uspešno registriran, nameščen in aktiviran, zaženite razvojni strežnik in odprite svojo aplikacijo v brskalniku.

npm run dev

Odprto Chromova orodja za razvijalce okno (ali enakovredno okno vašega brskalnika) in se pomaknite do Aplikacija zavihek. Pod Storitveni delavci razdelku bi morali videti storitvenega delavca, ki ste ga registrirali.

Ko je servisni delavec uspešno registriran, nameščen in aktiviran, lahko implementirate več funkcij, kot so predpomnjenje, sinhronizacija v ozadju ali pošiljanje potisnih obvestil.

Predpomnjenje virov s servisnimi delavci

Predpomnjenje aplikacijskih sredstev na uporabnikovi napravi lahko izboljša zmogljivost, tako da omogoči hitrejši dostop, zlasti v situacijah z nezanesljivimi internetnimi povezavami.

Če želite predpomniti sredstva aplikacije, vključite naslednjo kodo v service-worker.js mapa.

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

Ko uporabnik prvič dostopa do domače strani, ta koda preveri, ali je v predpomnilniku predpomnjen odgovor za zahtevo. Če obstaja predpomnjeni odgovor, ga storitev vrne odjemalcu.

Če predpomnjenega odgovora ni, servisni delavec pridobi vir iz strežnika prek omrežja. Postreže odgovor odjemalcu in ga shrani v predpomnilnik za prihodnje zahteve.

Če si želite ogledati predpomnjena sredstva, odprite zavihek Aplikacija v orodjih za razvijalce. Pod Predpomnilnik za shranjevanje bi morali videti seznam predpomnjenih sredstev. Preverite lahko tudi Brez povezave možnost pod Storitveni delavec in znova naložite stran, da simulirate izkušnjo brez povezave.

Zdaj, ko obiščete domačo stran, bo brskalnik služil virom, shranjenim v predpomnilniku, namesto da bi poskušal narediti omrežne zahteve za pridobivanje podatkov.

Uporaba storitvenih delavcev za izboljšanje učinkovitosti

Storitveni delavci so močno orodje za izboljšanje delovanja aplikacij Next.js. Lahko predpomnijo vire, prestrežejo zahteve in zagotovijo podporo brez povezave, kar lahko izboljša uporabniško izkušnjo.

Vendar je pomembno upoštevati, da so storitveni delavci lahko tudi zapleteni za izvajanje in upravljanje. Pomembno je, da skrbno pretehtate možne prednosti in slabosti servisnih delavcev, preden jih uporabite.