Kaip integruoti paslaugų darbuotojus į Next.js programas

Aptarnavimo darbuotojai yra scenarijai, kurie veikia fone, kad šiuolaikinėms žiniatinklio programoms teiktų galingas talpyklos galimybes ir kitas funkcijas.

Šios funkcijos suteikia sklandžią ir patogią savųjų programų patirtį žiniatinklio naršyklėje.

Paslaugų darbuotojai yra pagrindinis komponentas kuriant progresyvias žiniatinklio programas (PWA).

Paslaugų darbuotojų supratimas

Aptarnaujantis darbuotojas yra tam tikra rūšis JavaScript žiniatinklio darbuotojas kuri veikia fone, atskirai nuo pagrindinės „JavaScript“ gijos, kad ji neblokuotų. Tai reiškia, kad tai nesukelia vėlavimų ar trukdžių programos vartotojo sąsajai arba vartotojo sąveikai su ja.

Paslaugų darbuotojai veikia kaip tarpiniai serveriai – sėdi tarp žiniatinklio programų ir tinklo. Jie gali perimti užklausas ir atsakymus, talpinti išteklius ir teikti palaikymą neprisijungus. Tai padeda užtikrinti, kad žiniatinklio programos būtų sklandesnės ir patogesnės vartotojui, net kai vartotojas neprisijungęs.

Pagrindinės programos paslaugų darbuotojams

Paslaugų darbuotojams yra keletas programų. Jie įtraukia:

• PWA: Paslaugų darbuotojai suteikia daug galių progresyvioms žiniatinklio programoms. Jie atlieka pasirinktines tinklo užklausas, tiesioginius pranešimus, palaikymą neprisijungus ir greitą įkėlimą.
• Talpykla: Paslaugų darbuotojai gali saugoti programos išteklius – vaizdus, ​​„JavaScript“ kodą ir CSS failus – naršyklės talpyklos saugykloje. Tai leidžia naršyklei juos nuskaityti iš talpyklos, o ne gauti iš nuotolinio serverio per tinklą. Dėl to turinys įkeliamas greičiau, o tai ypač naudinga vartotojams, kurių interneto ryšys yra lėtas arba nepatikimas.
• Sinchronizavimas fone: Paslaugų darbuotojai gali sinchronizuoti duomenis ir vykdyti kitas fonines užduotis, net kai vartotojas aktyviai nebendrauja su programa arba kai programa nėra atidaryta naršyklėje.

Paslaugų darbuotojų integravimas į Next.js programas

Prieš pasineriant į kodą, tai padeda suprasti, kaip dirba aptarnaujantys darbuotojai. Yra du pagrindiniai paslaugų darbuotojų naudojimo etapai: Registracija ir aktyvinimas.

Pirmojo etapo metu naršyklė užregistruoja aptarnavimo darbuotoją. Štai paprastas pavyzdys:

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

Kodas pirmiausia patikrina, ar naršyklė palaiko paslaugų darbuotojus, o tai daro visos šiuolaikinės interneto naršyklės. Jei šis palaikymas yra, jis registruoja aptarnavimo darbuotoją, esantį nurodytame failo kelyje.

Aktyvinimo etape turite įdiegti ir suaktyvinti aptarnavimo darbuotoją, klausydami diegti ir aktyvuoti naudojant renginius „JavaScript“ įvykių klausytojai. Štai kaip galite tai pasiekti:

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

Šį kodą galite įtraukti iškart po registracijos. Jis turėtų būti paleistas iš karto po sėkmingo aptarnavimo darbuotojo registracijos proceso.

Šio projekto kodą galite rasti jame GitHub saugykla.

Sukurkite Next.js projektą

Norėdami pradėti, paleiskite šią komandą, kad sukurtumėte Next.js projektą vietoje:

npx create-next-app next-project

Aptarnavimo darbuotojo įtraukimas į Next.js programą apima šiuos veiksmus:

1. Užregistruokite aptarnavimo darbuotoją pasaulinės apimties aplinkoje.
2. Sukurkite paslaugų darbuotojo „JavaScript“ failą viešajame kataloge.

Pridedamas aptarnavimo darbuotojas

Pirmiausia užregistruokite serviso darbuotoją. Atnaujinkite src/pages/_app.js failą taip. Įtraukus kodą į šį failą, paslaugų darbuotojas užsiregistruos, kai programa įkeliama, ir turės prieigą prie visų programos išteklių.

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 naudojimoEfektas kabliukas suveikia, kai komponentas tvirtinamas. Kaip ir ankstesniame pavyzdyje, kodas pirmiausia patikrina, ar vartotojo naršyklė palaiko paslaugų darbuotojus.

Jei palaikymas yra, jis užregistruoja paslaugų darbuotojo scenarijų, esantį nurodytame failo kelyje, ir nurodo jo apimtį kaip „/”. Tai reiškia, kad paslaugų darbuotojas gali valdyti visus programos išteklius. Jei norite, galite pateikti išsamesnę apimtį, pvz., „/products”.

Jei registracija sėkminga, ji registruoja sėkmės pranešimą kartu su jo apimtimi. Jei registracijos proceso metu įvyko klaida, kodas ją užfiksuos ir užregistruos klaidos pranešimą.

Įdiekite ir suaktyvinkite paslaugų darbuotoją

Pridėkite šį kodą prie naujo failo, 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();

Norėdami patikrinti, ar paslaugų darbuotojas sėkmingai užregistruotas, įdiegtas ir suaktyvintas, paleiskite kūrimo serverį ir atidarykite programą naršyklėje.

npm run dev

Atviras „Chrome“ kūrėjo įrankiai langą (arba atitinkamą naršyklę) ir eikite į Taikymas skirtuką. Pagal Paslaugų darbuotojai skiltyje turėtumėte pamatyti jūsų užregistruotą aptarnavimo darbuotoją.

Sėkmingai užregistravę, įdiegę ir suaktyvinę aptarnavimo darbuotoją, galite įdiegti kelias funkcijas, pvz., talpyklą, sinchronizavimą fone arba siunčiami tiesioginiai pranešimai.

Išteklių kaupimas talpykloje su paslaugų darbuotojais

Programų išteklių talpykloje saugojimas vartotojo įrenginyje gali pagerinti našumą, nes suteikia galimybę greičiau pasiekti, ypač kai interneto ryšys yra nepatikimas.

Norėdami talpykloje išsaugoti programos išteklius, įtraukite šį kodą į service-worker.js failą.

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

Kai vartotojas pirmą kartą pasiekia pagrindinį puslapį, šis kodas patikrina, ar talpykloje yra užklausos atsakymas. Jei atsakymas talpykloje yra, paslauga grąžina jį klientui.

Jei talpykloje nėra atsakymo, paslaugų darbuotojas tinkle paima išteklius iš serverio. Jis aptarnauja atsakymą klientui ir saugo jį būsimoms užklausoms.

Norėdami peržiūrėti talpykloje saugomus išteklius, kūrėjo įrankiuose atidarykite skirtuką Programa. Pagal Talpyklos saugykla skyrių, turėtumėte pamatyti talpykloje esančių išteklių sąrašą. Taip pat galite patikrinti Neprisijungus parinktis pagal Aptarnavimo darbuotojas skyrių ir iš naujo įkelkite puslapį, kad imituotumėte naudojimąsi neprisijungus.

Dabar, kai apsilankysite pagrindiniame puslapyje, naršyklė aptarnaus talpyklos saugykloje saugomus išteklius, o ne bandys pateikti tinklo užklausas gauti duomenis.

Paslaugų darbuotojų naudojimas našumui pagerinti

Aptarnavimo darbuotojai yra galingas įrankis Next.js programų našumui pagerinti. Jie gali išsaugoti išteklius talpykloje, perimti užklausas ir teikti palaikymą neprisijungus – visa tai gali pagerinti vartotojo patirtį.

Tačiau svarbu pažymėti, kad paslaugų darbuotojus taip pat gali būti sudėtinga įdiegti ir valdyti. Svarbu atidžiai apsvarstyti galimus paslaugų darbuotojų privalumus ir trūkumus prieš juos naudodami.