Kuidas integreerida teenusetöötajaid rakendustesse Next.js

Teenindustöötajad on skriptid, mis töötavad taustal, et pakkuda kaasaegsetele veebirakendustele võimsaid vahemällu salvestamise võimalusi ja muid funktsioone.

Need funktsioonid toovad veebibrauserisse omarakenduste sujuva ja kasutajasõbraliku kasutuskogemuse.

Teenindustöötajad on progressiivsete veebirakenduste (PWA) loomisel põhikomponent.

Teenindustöötajate mõistmine

Teenindustöötaja on teatud tüüpi JavaScripti veebitöötaja mis töötab taustal peamisest JavaScripti lõimest eraldi, nii et see ei blokeeri. See tähendab, et see ei põhjusta viivitusi ega katkestusi rakenduse kasutajaliideses ega kasutaja suhtluses sellega.

Teenindustöötajad toimivad puhverserveritena – istuvad veebirakenduste ja võrgu vahel. Nad saavad päringuid ja vastuseid pealt kuulata, ressursse vahemällu salvestada ja võrguühenduseta tuge pakkuda. See aitab tagada, et veebirakendused tunduksid sujuvamad ja kasutajasõbralikumad isegi siis, kui kasutaja pole võrgus.

Peamised rakendused teenindustöötajatele

Teenindustöötajate jaoks on mitu rakendust. Nad sisaldavad:

• PWA-d: Teenindustöötajad pakuvad progressiivsetele veebirakendustele suurt jõudu. Nad täidavad kohandatud võrgupäringuid, tõukemärguandeid, võrguühenduseta tuge ja kiiret laadimist.
• Vahemällu salvestamine: Teenindustöötajad saavad salvestada rakenduse varad – pildid, JavaScripti koodi ja CSS-failid – brauseri vahemällu. See võimaldab brauseril need oma vahemälust alla laadida, mitte võrgu kaudu kaugserverist tuua. Selle tulemusena laaditakse sisu kiiremini, mis on eriti kasulik aeglase või ebausaldusväärse Interneti-ühendusega kasutajatele.
• Taustal sünkroonimine: Teenindustöötajad saavad andmeid sünkroonida ja muid taustatoiminguid käivitada isegi siis, kui kasutaja rakendusega aktiivselt ei suhtle või kui rakendus pole brauseris avatud.

Teenusetöötajate integreerimine Next.js-i rakendustes

Enne koodisse sukeldumist aitab see mõista, kuidas teenindustöötajad töötavad. Teenindustöötajate kasutamisel on kaks peamist etappi: registreerimine ja aktiveerimine.

Esimeses etapis registreerib brauser teenindustöötaja. Siin on lihtne näide:

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

Kood kontrollib esmalt, kas brauser toetab teenindustöötajaid, mida teevad kõik kaasaegsed veebibrauserid. Kui see tugi on olemas, registreerib see määratud failiteel asuva teenindustöötaja.

Aktiveerimisfaasis peate installima ja aktiveerima teenindustöötaja, kuulates seda installida ja aktiveerida üritusi kasutades JavaScripti sündmuste kuulajad. Seda saate saavutada järgmiselt.

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

Saate selle koodi lisada kohe pärast registreerimisprotsessi. See peaks käivituma kohe pärast teenindustöötaja registreerimisprotsessi õnnestumist.

Selle projekti koodi leiate sellest GitHub hoidla.

Looge projekt Next.js

Alustamiseks käivitage järgmine käsk Next.js projekti lokaalseks karkassiks:

npx create-next-app next-project

Teenusetöötaja lisamine rakendusele Next.js hõlmab järgmisi samme.

1. Registreerige teenindustöötaja globaalses keskkonnas.
2. Looge avalikku kataloogi teenindustöötaja JavaScripti fail.

Teenindaja lisamine

Esmalt registreerige teenindustöötaja. Värskendage src/pages/_app.js faili järgmiselt. Koodi kaasamine sellesse faili tagab, et teenindustöötaja registreerub rakenduse laadimisel ja tal on juurdepääs kogu rakenduse varadele.

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 konks käivitub komponendi paigaldamisel. Sarnaselt eelmisele näitele kontrollib kood esmalt, kas kasutaja brauser toetab teenindustöötajaid.

Kui tugi on olemas, registreerib see teenusetöötaja skripti, mis asub määratud failiteel, ja määrab selle ulatuse kui "/”. See tähendab, et teenindustöötaja kontrollib kõiki rakenduse ressursse. Soovi korral saate anda täpsema ulatuse, nt "/products”.

Kui registreerimine õnnestub, logib see eduteate koos selle ulatusega. Kui registreerimisprotsessi ajal ilmneb tõrge, püüab kood selle kinni ja logib veateate.

Installige ja aktiveerige Service Worker

Lisage uude faili järgmine kood, 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();

Et testida, kas teenindustöötaja on edukalt registreeritud, installitud ja aktiveeritud, käivitage arendusserver ja avage brauseris oma rakendus.

npm run dev

Avatud Chrome'i arendaja tööriistad aken (või teie brauseri ekvivalent) ja navigeerige Rakendus sakk. all Teenindustöötajad jaotises peaksite nägema teenindustöötajat, kelle olete registreerinud.

Kui teenindustöötaja on edukalt registreeritud, installitud ja aktiveeritud, saate rakendada mitmeid funktsioone, nagu vahemällu salvestamine, taustal sünkroonimine või push-teadete saatmine.

Ressursside vahemällu salvestamine teenindustöötajatega

Rakendusevarade vahemällu salvestamine kasutaja seadmesse võib parandada jõudlust, võimaldades kiiremat juurdepääsu, eriti olukordades, kus Interneti-ühendus on ebausaldusväärne.

Rakenduse varade vahemällu salvestamiseks lisage järgmine kood service-worker.js faili.

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

Kui kasutaja avab esimest korda avalehe, kontrollib see kood, kas vahemälus on päringu vahemällu salvestatud vastus. Kui vahemällu salvestatud vastus on olemas, tagastab teenus selle kliendile.

Kui vahemällu salvestatud vastust pole, hangib teenindustöötaja ressursi serverist võrgu kaudu. See teenindab vastust kliendile ja salvestab selle vahemällu tulevaste päringute jaoks.

Vahemällu salvestatud varade vaatamiseks avage arendaja tööriistades vahekaart Rakendus. all Vahemälu salvestusruum jaotises peaksite nägema vahemällu salvestatud varade loendit. Samuti saate kontrollida Võrguühenduseta valiku all Teenindustöötaja ja laadige leht uuesti, et simuleerida võrguühenduseta kogemust.

Nüüd, kui külastate avalehte, teenindab brauser vahemällu salvestatud ressursse, selle asemel, et proovida esitada võrgupäringuid andmete toomiseks.

Teenindustöötajate kasutamine jõudluse parandamiseks

Teenindustöötajad on võimas tööriist Next.js-i rakenduste jõudluse parandamiseks. Nad saavad ressursse vahemällu salvestada, päringuid pealt kuulata ja võrguühenduseta tuge pakkuda, mis kõik võib kasutajakogemust parandada.

Siiski on oluline märkida, et teenindustöötajate rakendamine ja haldamine võib samuti olla keeruline. Enne nende kasutamist on oluline hoolikalt kaaluda teenindustöötajate võimalikke eeliseid ja puudusi.