Hur man integrerar Service Workers i Next.js-applikationer

Tjänstearbetare är skript som körs i bakgrunden för att ge kraftfulla cachningsfunktioner och andra funktioner till moderna webbapplikationer.

Dessa funktioner ger webbläsaren den sömlösa och användarvänliga upplevelsen av inbyggda appar.

Servicearbetare är en grundläggande komponent i skapandet av progressiva webbappar (PWA).

Förstå servicearbetare

En servicearbetare är en typ av JavaScript webbarbetare som körs i bakgrunden, separat från JavaScript-huvudtråden, så att den är icke-blockerande. Detta innebär att det inte orsakar förseningar eller avbrott i applikationens användargränssnitt eller användarens interaktion med det.

Servicearbetare fungerar som proxyservrar – sitter mellan webbapplikationer och nätverket. De kan fånga upp förfrågningar och svar, cache-resurser och ge offlinesupport. Detta hjälper till att säkerställa att webbappar känns mer sömlösa och användarvänliga, även när användaren inte är online.

Nyckelapplikationer för servicearbetare

Det finns flera applikationer för servicearbetare. De inkluderar:

• PWA: er: Servicearbetare ger stor kraft till progressiva webbappar. De utför anpassade nätverksförfrågningar, push-meddelanden, offlinesupport och snabb laddning.
• Cachning: Servicearbetare kan lagra programmets tillgångar – bilder, JavaScript-kod och CSS-filer – i webbläsarens cachelagring. Detta låter webbläsaren hämta dem från sin cache istället för att hämta dem från fjärrservern över nätverket. Som ett resultat laddas innehållet snabbare, vilket är särskilt användbart för användare med långsamma eller opålitliga internetanslutningar.
• Bakgrundssynkronisering: Servicearbetare kan synkronisera data och köra andra bakgrundsuppgifter, även när användaren inte aktivt interagerar med applikationen eller när applikationen inte är öppen i webbläsaren.

Integrering av Service Workers i Next.js-applikationer

Innan du dyker in i koden hjälper det att förstå hur servicearbetare arbetar. Det finns två nyckelfaser för att använda servicearbetare: registrering och aktivering.

Under den första fasen registrerar webbläsaren servicearbetaren. Här är ett enkelt exempel:

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

Koden kontrollerar först om webbläsaren stöder servicearbetare, vilket alla moderna webbläsare gör. Om detta stöd finns fortsätter det att registrera en servicearbetare som finns på den angivna filsökvägen.

I aktiveringsfasen måste du installera och aktivera en servicearbetare genom att lyssna på Installera och Aktivera händelser med hjälp av JavaScript-händelselyssnare. Så här kan du uppnå detta:

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

Du kan inkludera denna kod direkt efter registreringsprocessen. Det bör köras direkt efter att registreringsprocessen för servicearbetaren har lyckats.

Du kan hitta detta projekts kod i dess GitHub förvaret.

Skapa ett Next.js-projekt

För att komma igång, kör det här kommandot för att bygga ett Next.js-projekt lokalt:

npx create-next-app next-project

Att lägga till en serviceworker i en Next.js-applikation innebär följande steg:

1. Registrera en servicearbetare i den globala scope-miljön.
2. Skapa en JavaScript-fil för tjänstearbetare i den offentliga katalogen.

Lägga till en Service Worker

Registrera först en servicearbetare. Uppdatera src/pages/_app.js fil enligt följande. Att inkludera koden i denna fil säkerställer att servicearbetaren registrerar när applikationen laddas och har tillgång till applikationens alla tillgångar.

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

De useEffect kroken utlöses när komponenten monteras. Liksom föregående exempel kontrollerar koden först om användarens webbläsare stöder servicearbetare.

Om stödet finns registrerar det serviceworker-skriptet som finns på den angivna filsökvägen och anger dess omfattning som "/”. Detta innebär att servicearbetaren har kontroll över alla resurser i applikationen. Du kan tillhandahålla en mer detaljerad omfattning om du vill, t.ex. "/products”.

Om registreringen lyckas loggas ett framgångsmeddelande tillsammans med dess omfattning. Om det uppstår ett fel under registreringsprocessen kommer koden att fånga det och logga ett felmeddelande.

Installera och aktivera Service Worker

Lägg till följande kod i en ny fil, 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();

För att testa om servicearbetaren har registrerats, installerats och aktiverats, starta utvecklingsservern och öppna din applikation i webbläsaren.

npm run dev

Öppen Chromes utvecklarverktyg fönstret (eller din webbläsares motsvarighet), och navigera till Ansökan flik. Under Servicearbetare avsnitt, bör du se den servicearbetare som du har registrerat.

Med serviceworkern framgångsrikt registrerad, installerad och aktiverad kan du implementera flera funktioner som cachelagring, bakgrundssynkronisering eller skicka push-meddelanden.

Cacha resurser med servicearbetare

Cachning av programtillgångar på användarens enhet kan förbättra prestandan genom att möjliggöra snabbare åtkomst, särskilt i situationer med opålitliga internetanslutningar.

För att cachelagra appens tillgångar, inkludera följande kod i service-worker.js fil.

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

När en användare först går in på hemsidan kontrollerar denna kod om det finns ett cachat svar för begäran i cachen. Om ett cachat svar finns returnerar tjänsten det till klienten.

Om det inte finns något cachat svar hämtar tjänstearbetaren resursen från servern över nätverket. Det serverar svaret till klienten och cachar det för framtida förfrågningar.

Om du vill se de cachade tillgångarna öppnar du fliken Program i utvecklarverktygen. Under Cachelagring avsnitt, bör du se en lista över de cachade tillgångarna. Du kan också kontrollera Off-line alternativet under Servicearbetare och ladda om sidan för att simulera en offlineupplevelse.

Nu, när du besöker hemsidan, kommer webbläsaren att betjäna resurser som lagras i cachelagringen istället för att försöka göra nätverksbegäranden för att hämta data.

Använda servicearbetare för att förbättra prestanda

Servicearbetare är ett kraftfullt verktyg för att förbättra prestandan för Next.js-appar. De kan cache resurser, avlyssna förfrågningar och tillhandahålla offlinesupport, vilket allt kan förbättra användarupplevelsen.

Det är dock viktigt att notera att servicearbetare också kan vara komplicerade att implementera och hantera. Det är viktigt att noggrant överväga de potentiella fördelarna och nackdelarna med servicearbetare innan du använder dem.