Kā integrēt pakalpojumu darbiniekus Next.js lietojumprogrammās

Pakalpojumu darbinieki ir skripti, kas darbojas fonā, lai nodrošinātu modernām tīmekļa lietojumprogrammām jaudīgas kešatmiņas iespējas un citas funkcijas.

Šīs funkcijas nodrošina netraucētu un lietotājam draudzīgu vietējo lietotņu pieredzi tīmekļa pārlūkprogrammā.

Pakalpojumu darbinieki ir būtiska sastāvdaļa progresīvo tīmekļa lietotņu (PWA) izveidē.

Izpratne par pakalpojumu darbiniekiem

Servisa darbinieks ir sava veida JavaScript tīmekļa darbinieks kas darbojas fonā atsevišķi no galvenā JavaScript pavediena, lai tas nebloķētu. Tas nozīmē, ka tas neizraisa lietojumprogrammas lietotāja interfeisa vai lietotāja mijiedarbības aizkavēšanos vai pārtraukumus.

Pakalpojumu darbinieki darbojas kā starpniekserveri, kas atrodas starp tīmekļa lietojumprogrammām un tīklu. Viņi var pārtvert pieprasījumus un atbildes, saglabāt resursus kešatmiņā un nodrošināt bezsaistes atbalstu. Tas palīdz nodrošināt, ka tīmekļa lietotnes jūtas vienmērīgākas un lietotājam draudzīgākas pat tad, ja lietotājs nav tiešsaistē.

Galvenās lietojumprogrammas pakalpojumu darbiniekiem

Servisa darbiniekiem ir vairāki pieteikumi. Tajos ietilpst:

• PWA: Pakalpojumu darbinieki nodrošina progresīvajām tīmekļa lietotnēm lielu jaudu. Viņi veic pielāgotus tīkla pieprasījumus, push paziņojumus, bezsaistes atbalstu un ātru ielādi.
• Kešatmiņa: Pakalpojumu darbinieki var saglabāt lietojumprogrammas līdzekļus — attēlus, JavaScript kodu un CSS failus — pārlūkprogrammas kešatmiņas krātuvē. Tas ļauj pārlūkprogrammai tos izgūt no kešatmiņas, nevis ienest tos no attālā servera tīklā. Rezultātā saturs tiek ielādēts ātrāk, kas ir īpaši noderīgi lietotājiem ar lēnu vai neuzticamu interneta savienojumu.
• Fona sinhronizācija: Pakalpojumu darbinieki var sinhronizēt datus un izpildīt citus fona uzdevumus pat tad, ja lietotājs aktīvi nedarbojas ar lietojumprogrammu vai lietojumprogramma nav atvērta pārlūkprogrammā.

Pakalpojumu darbinieku integrēšana Next.js lietojumprogrammās

Pirms iedziļināties kodā, tas palīdz saprast, kā strādā servisa darbinieki. Ir divas galvenās pakalpojumu darbinieku izmantošanas fāzes: reģistrācija un aktivizēšana.

Pirmajā fāzē pārlūkprogramma reģistrē apkalpojošo darbinieku. Šeit ir vienkāršs piemērs:

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

Kods vispirms pārbauda, ​​vai pārlūkprogramma atbalsta pakalpojumu sniedzējus, ko dara visas mūsdienu tīmekļa pārlūkprogrammas. Ja šis atbalsts pastāv, tiek reģistrēts servisa darbinieks, kas atrodas norādītajā faila ceļā.

Aktivizācijas fāzē jums ir jāinstalē un jāaktivizē servisa darbinieks, klausoties uzstādīt un aktivizēt notikumi, izmantojot JavaScript notikumu klausītāji. Lūk, kā to varat sasniegt:

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

Jūs varat iekļaut šo kodu uzreiz pēc reģistrācijas procesa. Tam vajadzētu darboties uzreiz pēc tam, kad servisa darbinieka reģistrācijas process ir veiksmīgs.

Jūs varat atrast šī projekta kodu tajā GitHub krātuve.

Izveidojiet Next.js projektu

Lai sāktu darbu, palaidiet šo komandu, lai lokāli izveidotu Next.js projektu:

npx create-next-app next-project

Servisa darbinieka pievienošana lietojumprogrammai Next.js ietver šādas darbības:

1. Reģistrējiet servisa darbinieku globālā mēroga vidē.
2. Izveidojiet pakalpojumu darbinieka JavaScript failu publiskajā direktorijā.

Servisa darbinieka pievienošana

Vispirms reģistrējiet servisa darbinieku. Atjauniniet src/pages/_app.js failu šādi. Koda iekļaušana šajā failā nodrošina, ka pakalpojumu darbinieks reģistrēsies, kad lietojumprogramma tiek ielādēta, un viņam ir piekļuve visiem lietojumprogrammas līdzekļiem.

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 āķis iedarbina, kad komponents tiek piestiprināts. Tāpat kā iepriekšējā piemērā, kods vispirms pārbauda, ​​vai lietotāja pārlūkprogramma atbalsta pakalpojumu sniedzējus.

Ja atbalsts pastāv, tas reģistrē pakalpojuma darbinieka skriptu, kas atrodas norādītajā faila ceļā, un norāda tā darbības jomu kā "/”. Tas nozīmē, ka servisa darbinieks var kontrolēt visus lietojumprogrammas resursus. Ja vēlaties, varat nodrošināt detalizētāku tvērumu, piemēram, “/products”.

Ja reģistrācija ir veiksmīga, tā reģistrē veiksmes ziņojumu kopā ar tā darbības jomu. Ja reģistrācijas procesa laikā rodas kļūda, kods to uztver un reģistrēs kļūdas ziņojumu.

Instalējiet un aktivizējiet Service Worker

Pievienojiet šādu kodu jaunam failam, 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();

Lai pārbaudītu, vai servisa darbinieks ir veiksmīgi reģistrēts, instalēts un aktivizēts, startējiet izstrādes serveri un atveriet lietojumprogrammu pārlūkprogrammā.

npm run dev

Atvērt Chrome izstrādātāja rīki logu (vai līdzvērtīgu pārlūkprogrammu) un dodieties uz Pieteikums cilne. Saskaņā Servisa darbinieki sadaļā, jums vajadzētu redzēt jūsu reģistrēto apkalpojošo darbinieku.

Kad pakalpojumu darbinieks ir veiksmīgi reģistrēts, instalēts un aktivizēts, varat ieviest vairākas funkcijas, piemēram, kešatmiņu, fona sinhronizāciju vai push paziņojumu sūtīšana.

Resursu saglabāšana kešatmiņā ar pakalpojumu darbiniekiem

Lietojumprogrammu līdzekļu saglabāšana kešatmiņā lietotāja ierīcē var uzlabot veiktspēju, nodrošinot ātrāku piekļuvi, jo īpaši situācijās, kad interneta savienojumi ir neuzticami.

Lai kešatmiņā saglabātu lietotnes līdzekļus, iekļaujiet tālāk norādīto kodu service-worker.js failu.

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

Kad lietotājs pirmo reizi piekļūst sākumlapai, šis kods pārbauda, ​​vai kešatmiņā ir kešatmiņā saglabāta atbilde uz pieprasījumu. Ja pastāv kešatmiņā saglabāta atbilde, pakalpojums to atdod klientam.

Ja kešatmiņā nav atbildes, pakalpojumu darbinieks tīklā ienes resursu no servera. Tas apkalpo atbildi klientam un saglabā to kešatmiņā turpmākiem pieprasījumiem.

Lai skatītu kešatmiņā saglabātos līdzekļus, izstrādātāja rīkos atveriet cilni Lietojumprogramma. Saskaņā Kešatmiņas krātuve sadaļā, jums vajadzētu redzēt kešatmiņā saglabāto līdzekļu sarakstu. Varat arī pārbaudīt Bezsaistē opcija zem Servisa darbinieks sadaļu un atkārtoti ielādējiet lapu, lai simulētu bezsaistes pieredzi.

Tagad, kad apmeklējat sākumlapu, pārlūkprogramma apkalpos kešatmiņā saglabātos resursus, nevis mēģinās veikt tīkla pieprasījumus, lai iegūtu datus.

Servisa darbinieku izmantošana veiktspējas uzlabošanai

Servisa darbinieki ir spēcīgs rīks Next.js lietotņu veiktspējas uzlabošanai. Viņi var saglabāt resursus kešatmiņā, pārtvert pieprasījumus un nodrošināt bezsaistes atbalstu, un tas viss var uzlabot lietotāja pieredzi.

Tomēr ir svarīgi atzīmēt, ka pakalpojumu sniedzēju ieviešana un pārvaldība var būt arī sarežģīta. Ir svarīgi rūpīgi apsvērt pakalpojumu darbinieku iespējamos ieguvumus un trūkumus, pirms tos izmantojat.