Palvelutyöntekijöiden integrointi Next.js-sovelluksiin

Palvelutyöntekijät ovat komentosarjoja, jotka toimivat taustalla ja tarjoavat tehokkaita välimuistiominaisuuksia ja muita ominaisuuksia nykyaikaisille verkkosovelluksille.

Nämä ominaisuudet tuovat natiivisovellusten saumattoman ja käyttäjäystävällisen kokemuksen verkkoselaimeen.

Palvelutyöntekijät ovat olennainen osa Progressive Web Apps (PWA) -sovellusten luomista.

Palvelutyöntekijöiden ymmärtäminen

Palvelutyöntekijä on eräänlainen JavaScript-verkkotyöntekijä joka toimii taustalla erillään JavaScript-pääsäikeestä, jotta se ei estä. Tämä tarkoittaa, että se ei aiheuta viiveitä tai keskeytyksiä sovelluksen käyttöliittymään tai käyttäjän vuorovaikutukseen sen kanssa.

Palvelutyöntekijät toimivat välityspalvelimina – verkkosovellusten ja verkon välissä. He voivat siepata pyyntöjä ja vastauksia, tallentaa resursseja välimuistiin ja tarjota offline-tukea. Tämä auttaa varmistamaan, että verkkosovellukset tuntuvat saumattomimmilta ja käyttäjäystävällisemmiltä, ​​vaikka käyttäjä ei olisi verkossa.

Keskeiset sovellukset palvelutyöntekijöille

Palvelutyöntekijöille on useita sovelluksia. Ne sisältävät:

• PWA: t: Palvelutyöntekijät tarjoavat suuria tehoja progressiivisille verkkosovelluksille. Ne suorittavat mukautettuja verkkopyyntöjä, push-ilmoituksia, offline-tukea ja nopeaa latausta.
• Välimuisti: Palvelutyöntekijät voivat tallentaa sovelluksen resursseja – kuvia, JavaScript-koodia ja CSS-tiedostoja – selaimen välimuistiin. Näin selain voi hakea ne välimuististaan ​​sen sijaan, että se noutaisi ne etäpalvelimelta verkon kautta. Tämän seurauksena sisältö latautuu nopeammin, mikä on erityisen hyödyllistä käyttäjille, joilla on hitaat tai epäluotettavat Internet-yhteydet.
• Taustan synkronointi: Palvelutyöntekijät voivat synkronoida tietoja ja suorittaa muita taustatehtäviä, vaikka käyttäjä ei olisi aktiivisesti vuorovaikutuksessa sovelluksen kanssa tai kun sovellus ei ole auki selaimessa.

Palvelutyöntekijöiden integrointi Next.js-sovelluksiin

Ennen kuin sukellat koodiin, se auttaa ymmärtämään, kuinka palvelutyöntekijät toimivat. Palvelutyöntekijöiden käytössä on kaksi keskeistä vaihetta: rekisteröinti ja aktivointi.

Ensimmäisessä vaiheessa selain rekisteröi palvelutyöntekijän. Tässä on yksinkertainen esimerkki:

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

Koodi tarkistaa ensin, tukeeko selain palvelutyöntekijöitä, kuten kaikki nykyaikaiset verkkoselaimet tekevät. Jos tämä tuki on olemassa, se rekisteröi palvelutyöntekijän, joka sijaitsee määritetyssä tiedostopolussa.

Aktivointivaiheessa sinun on asennettava ja aktivoitava palvelutyöntekijä kuuntelemalla Asentaa ja aktivoida tapahtumia käyttämällä JavaScript-tapahtuman kuuntelijat. Voit saavuttaa tämän seuraavasti:

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

Voit lisätä tämän koodin heti rekisteröintiprosessin jälkeen. Sen pitäisi käynnistyä heti, kun palvelutyöntekijän rekisteröintiprosessi on onnistunut.

Löydät tämän projektin koodin siitä GitHub arkisto.

Luo Next.js-projekti

Aloita suorittamalla seuraava komento rakentaaksesi Next.js-projektin paikallisesti:

npx create-next-app next-project

Palvelutyöntekijän lisääminen Next.js-sovellukseen sisältää seuraavat vaiheet:

1. Rekisteröi huoltotyöntekijä globaalissa ympäristössä.
2. Luo palvelutyöntekijän JavaScript-tiedosto julkiseen hakemistoon.

Palvelutyöntekijän lisääminen

Rekisteröi ensin huoltotyöntekijä. Päivitä src/pages/_app.js tiedosto seuraavasti. Koodin sisällyttäminen tähän tiedostoon varmistaa, että palvelutyöntekijä rekisteröityy sovelluksen latautuessa ja hänellä on pääsy kaikkiin sovelluksen resursseihin.

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 koukku laukeaa, kun komponentti kiinnittyy. Kuten edellisessä esimerkissä, koodi tarkistaa ensin, tukeeko käyttäjän selain palvelutyöntekijöitä.

Jos tuki on olemassa, se rekisteröi määritetyssä tiedostopolussa sijaitsevan palvelutyön komentosarjan ja määrittää sen laajuuden seuraavasti:/”. Tämä tarkoittaa, että palvelutyöntekijä hallitsee kaikkia sovelluksen resursseja. Voit tarjota tarkemman laajuuden, jos haluat, esimerkiksi "/products”.

Jos rekisteröinti onnistuu, se kirjaa onnistumisviestin ja sen laajuuden. Jos rekisteröintiprosessin aikana tapahtuu virhe, koodi nappaa sen ja kirjaa virheilmoituksen.

Asenna ja aktivoi Service Worker

Lisää seuraava koodi uuteen tiedostoon, 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();

Voit testata, onko palvelutyöntekijä rekisteröitynyt, asennettu ja aktivoitu onnistuneesti käynnistämällä kehityspalvelimen ja avaamalla sovelluksesi selaimessa.

npm run dev

Avata Chromen kehittäjätyökalut ikkuna (tai vastaava selaimesi) ja siirry kohtaan Sovellus -välilehti. Alla Palvelutyöntekijät -osiossa sinun pitäisi nähdä rekisteröimäsi palvelutyöntekijä.

Kun palvelutyöntekijä on rekisteröity, asennettu ja aktivoitu onnistuneesti, voit toteuttaa useita toimintoja, kuten välimuistin, taustasynkronoinnin tai push-ilmoitusten lähettäminen.

Tallenna resurssit välimuistiin palvelutyöntekijöiden avulla

Sovellusresurssien välimuistiin tallentaminen käyttäjän laitteessa voi parantaa suorituskykyä mahdollistamalla nopeamman käytön, erityisesti tilanteissa, joissa Internet-yhteydet ovat epäluotettavia.

Voit tallentaa sovelluksen resurssit välimuistiin lisäämällä seuraavan koodin sovellukseen service-worker.js tiedosto.

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

Kun käyttäjä ensimmäisen kerran avaa kotisivun, tämä koodi tarkistaa, onko välimuistissa välimuistissa oleva vastaus pyyntöön. Jos välimuistissa oleva vastaus on olemassa, palvelu palauttaa sen asiakkaalle.

Jos välimuistissa ei ole vastausta, palvelutyöntekijä hakee resurssin palvelimelta verkon kautta. Se palvelee vastausta asiakkaalle ja tallentaa sen välimuistiin tulevia pyyntöjä varten.

Voit tarkastella välimuistissa olevia resursseja avaamalla Sovellus-välilehden kehittäjätyökaluissa. Alla Välimuistin tallennus -osiossa, sinun pitäisi nähdä luettelo välimuistissa olevista resursseista. Voit myös tarkistaa Offline-tilassa vaihtoehto alla Palvelutyöntekijä -osio ja lataa sivu uudelleen simuloidaksesi offline-kokemusta.

Nyt kun vierailet kotisivulla, selain palvelee välimuistiin tallennettuja resursseja sen sijaan, että se yrittäisi tehdä verkkopyyntöjä tietojen hakemiseksi.

Palvelutyöntekijöiden käyttö suorituskyvyn parantamiseksi

Palvelutyöntekijät ovat tehokas työkalu Next.js-sovellusten suorituskyvyn parantamiseen. He voivat tallentaa resursseja välimuistiin, siepata pyyntöjä ja tarjota offline-tukea, mikä kaikki voi parantaa käyttökokemusta.

On kuitenkin tärkeää huomata, että palvelutyöntekijät voivat olla myös monimutkaisia ​​toteuttaa ja hallita. On tärkeää harkita huolellisesti palvelutyöntekijöiden mahdollisia etuja ja haittoja, ennen kuin käytät niitä.