A Service Workers integrálása a Next.js alkalmazásokba

A szervizmunkások olyan szkriptek, amelyek a háttérben futnak, hogy hatékony gyorsítótárazási képességeket és egyéb funkciókat biztosítsanak a modern webalkalmazásoknak.

Ezek a funkciók a natív alkalmazások zökkenőmentes és felhasználóbarát élményét hozzák a webböngészőhöz.

A szervizmunkások alapvető összetevői a progresszív webalkalmazások (PWA) létrehozásának.

A szervizmunkások megértése

A szervizmunkás egyfajta JavaScript webmunkás amely a háttérben fut, külön a fő JavaScript-száltól, így nem blokkol. Ez azt jelenti, hogy nem okoz késéseket vagy megszakításokat az alkalmazás felhasználói felületében vagy a felhasználó interakciójában.

A szervizmunkások proxyszerverként működnek – a webalkalmazások és a hálózat között ülve. Elfoghatják a kéréseket és válaszokat, tárolhatják az erőforrásokat, és offline támogatást nyújthatnak. Ez segít abban, hogy a webalkalmazások gördülékenyebbek és felhasználóbarátabbak legyenek, még akkor is, ha a felhasználó nincs online.

Kulcsfontosságú alkalmazások szervizmunkások számára

Számos alkalmazás létezik a szervizmunkások számára. Tartalmazzák:

• PWA-k: A szervizmunkások nagy teljesítményt nyújtanak a progresszív webalkalmazásokhoz. Egyéni hálózati kéréseket, push értesítéseket, offline támogatást és gyors betöltést hajtanak végre.
• Gyorsítótárazás: A szervizmunkások tárolhatják az alkalmazás eszközeit – képeket, JavaScript-kódot és CSS-fájlokat – a böngésző gyorsítótárában. Ez lehetővé teszi, hogy a böngésző lekérje őket a gyorsítótárából, ahelyett, hogy a hálózaton keresztül a távoli szerverről kérné le őket. Ennek eredményeként a tartalom gyorsabban töltődik be, ami különösen hasznos a lassú vagy megbízhatatlan internetkapcsolattal rendelkező felhasználók számára.
• Háttér szinkronizálás: A szervizmunkások szinkronizálhatják az adatokat és futtathatnak más háttérfeladatokat, még akkor is, ha a felhasználó nem aktívan kommunikál az alkalmazással, vagy ha az alkalmazás nincs megnyitva a böngészőben.

Service Workers integrációja a Next.js alkalmazásokban

Mielőtt belemerülne a kódba, segít megérteni, hogyan dolgoznak a szervizmunkások. A szervizmunkások igénybevételének két fő fázisa van: bejegyzés és aktiválás.

Az első fázisban a böngésző regisztrálja a szervizmunkást. Íme egy egyszerű példa:

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

A kód először ellenőrzi, hogy a böngésző támogatja-e a szervizmunkásokat, amit minden modern webböngésző megtesz. Ha ez a támogatás létezik, akkor a megadott fájlútvonalon található szervizmunkás regisztrálása következik.

Az aktiválási fázisban telepítenie és aktiválnia kell egy szervizmunkást a következő meghallgatásával telepítés és aktiválja események felhasználásával JavaScript eseményfigyelők. Ezt a következőképpen érheti el:

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

Ezt a kódot közvetlenül a regisztrációs folyamat után adhatja meg. Közvetlenül a szervizmunkás regisztrációs folyamata után futnia kell.

A projekt kódja megtalálható benne GitHub adattár.

Hozzon létre egy Next.js projektet

A kezdéshez futtassa ezt a parancsot a Next.js projekt helyi felépítéséhez:

npx create-next-app next-project

Service worker hozzáadása Next.js alkalmazáshoz a következő lépésekből áll:

1. Regisztráljon szervizmunkást a globális hatókörű környezetben.
2. Hozzon létre egy szervizmunkás JavaScript-fájlt a nyilvános könyvtárban.

Service Worker hozzáadása

Először regisztráljon egy szervizmunkást. Frissítse a src/pages/_app.js fájlt az alábbiak szerint. A kód belefoglalása a fájlba biztosítja, hogy a szervizmunkás regisztráljon az alkalmazás betöltésekor, és hozzáférjen az alkalmazás összes eszközéhez.

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

A useEffect a horog kiold, amikor az alkatrész felhelyeződik. Az előző példához hasonlóan a kód először ellenőrzi, hogy a felhasználó böngészője támogatja-e a szervizmunkásokat.

Ha a támogatás létezik, akkor regisztrálja a megadott fájl útvonalon található service worker szkriptet, és a hatókörét a következőképpen adja meg/”. Ez azt jelenti, hogy a szervizmunkás az alkalmazás összes erőforrása felett rendelkezik. Ha szeretné, részletesebb hatókört is megadhat, például "/products”.

Ha a regisztráció sikeres, sikeres üzenetet naplóz a hatókörével együtt. Ha hiba történik a regisztrációs folyamat során, a kód elkapja azt, és hibaüzenetet naplóz.

Telepítse és aktiválja a Service Workert

Adja hozzá a következő kódot egy új fájlhoz, 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();

A szervizmunkás sikeres regisztrációja, telepítése és aktiválása teszteléséhez indítsa el a fejlesztői kiszolgálót, és nyissa meg az alkalmazást a böngészőben.

npm run dev

Nyisd ki A Chrome fejlesztői eszközei ablakot (vagy a böngészője megfelelőjét), és navigáljon a Alkalmazás lapon. Alatt Szolgáltató dolgozók részben látnia kell azt a szervizmunkást, amelyet regisztrált.

A sikeresen regisztrált, telepített és aktivált szervizmunkás számos funkciót megvalósíthat, például gyorsítótárat, háttérszinkronizálást vagy push értesítések küldése.

Erőforrások gyorsítótárazása szervizmunkásokkal

Az alkalmazáselemek gyorsítótárazása a felhasználó eszközén javíthatja a teljesítményt azáltal, hogy gyorsabb hozzáférést tesz lehetővé, különösen megbízhatatlan internetkapcsolat esetén.

Az alkalmazás eszközeinek gyorsítótárazásához adja meg a következő kódot a service-worker.js fájlt.

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

Amikor a felhasználó először éri el a kezdőlapot, ez a kód ellenőrzi, hogy van-e gyorsítótárban tárolt válasz a kérésre a gyorsítótárban. Ha létezik gyorsítótárazott válasz, a szolgáltatás visszaküldi azt az ügyfélnek.

Ha nincs gyorsítótárazott válasz, akkor a szervizmunkás lekéri az erőforrást a kiszolgálóról a hálózaton keresztül. Kiszolgálja a választ az ügyfélnek, és gyorsítótárazza a jövőbeni kérésekhez.

A gyorsítótárazott eszközök megtekintéséhez nyissa meg az Alkalmazás lapot a fejlesztői eszközökben. Alatt Gyorsítótár szakaszban látnia kell a gyorsítótárazott eszközök listáját. Azt is ellenőrizheti a Offline alatti opciót Szervizmunkás szakaszt, és töltse be újra az oldalt az offline élmény szimulálásához.

Mostantól, amint felkeresi a kezdőlapot, a böngésző a gyorsítótárban tárolt erőforrásokat fogja kiszolgálni, ahelyett, hogy hálózati kéréseket küldene az adatok lekérésére.

Service Workers használata a teljesítmény fokozására

A szervizmunkások hatékony eszközt jelentenek a Next.js alkalmazások teljesítményének javítására. Gyorsítótárazhatják az erőforrásokat, elfoghatják a kéréseket, és offline támogatást nyújthatnak, mindez javíthatja a felhasználói élményt.

Fontos azonban megjegyezni, hogy a szervizmunkások megvalósítása és kezelése is bonyolult lehet. Fontos, hogy alaposan mérlegelje a szolgáltatásban dolgozók lehetséges előnyeit és hátrányait, mielőtt igénybe venné őket.