Vad är Service Workers och hur de fungerar?
Service workers är bakgrundsskript som möjliggör kraftfulla cachefunktioner och andra förbättringar för moderna webbapplikationer. Deras funktioner är att skapa en smidig och användarvänlig upplevelse som liknar den hos native-appar direkt i webbläsaren.
Dessa bakgrundsprocesser utgör en grundläggande del av progressiva webbapplikationer (PWA), vilket förbättrar både prestanda och användarupplevelsen.
En Djupare Förståelse av Service Workers
En service worker är i grunden en typ av JavaScript-webbarbetare som körs separat från huvudtråden för JavaScript, vilket gör den icke-blockerande. Detta är viktigt då det inte orsakar några fördröjningar eller avbrott i applikationens gränssnitt eller användarinteraktioner.
Service workers fungerar som mellanhänder, eller proxyservrar, mellan webbapplikationen och nätverket. De kan avlyssna begäran och svar, lagra resurser i cacheminnet och ge stöd för offline-användning. Detta ger webbapplikationer en mer sömlös och användarvänlig upplevelse, även när användaren inte är uppkopplad.
Viktiga Tillämpningsområden för Service Workers
Service workers har flera användningsområden. Här är några av de viktigaste:
- PWA:er: Service workers är avgörande för progressiva webbappar. De hanterar nätverksförfrågningar, möjliggör pushnotiser, erbjuder offline-stöd och snabbare laddning.
- Cachelagring: Service workers kan lagra viktiga tillgångar, som bilder, JavaScript- och CSS-filer, i webbläsarens cache. Detta innebär att webbläsaren kan hämta dessa direkt från cachen istället för att ladda ner dem från servern över nätverket. Detta resulterar i snabbare laddningstider, vilket är särskilt värdefullt för användare med långsamma eller osäkra internetanslutningar.
- Bakgrundssynkronisering: Service workers kan synkronisera data och utföra andra bakgrundsuppgifter, även när applikationen inte används aktivt eller när den inte är öppen i webbläsaren.
Integrering av Service Workers i Next.js Applikationer
För att förstå hur service workers implementeras, är det viktigt att känna till de två faserna: registrering och aktivering.
Första fasen är registrering. I detta steg registrerar webbläsaren service workern. Ett enkelt exempel ser ut så här:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};
registerServiceWorker();
Koden kollar först om webbläsaren stöder service workers (vilket de flesta moderna webbläsare gör). Om det stödet finns, fortsätter det att registrera en service worker som finns i den angivna sökvägen.
Den andra fasen är aktivering. Här installeras och aktiveras service workern genom att lyssna på händelserna för installation och aktivering via JavaScript. Ett exempel på hur detta görs ser ut så här:
registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Koden kan läggas till direkt efter registreringsprocessen och bör köras direkt när registreringen lyckas.
Du hittar projektets kod på GitHub.
Skapa Ett Nytt Next.js Projekt
För att börja, använd följande kommando för att skapa ett nytt Next.js-projekt:
npx create-next-app next-project
Att implementera service workers i en Next.js-applikation innebär:
- Registrera en service worker i det globala scope.
- Skapa en JavaScript-fil för service worker i den offentliga katalogen.
Lägg Till En Service Worker
Först ska du registrera en service worker. Uppdatera filen src/pages/_app.js som följer. Koden här garanterar att service workern registreras när applikationen laddas och har tillgång till alla tillgångar.
import { useEffect } from 'react';
export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
UseEffect-hooken triggas när komponenten monteras. Koden kontrollerar först om webbläsaren stöder service workers.
Om stödet finns registrerar den service worker-skriptet i den angivna sökvägen, och sätter dess scope till ”/”, vilket betyder att service workern har kontroll över alla resurser i applikationen. Du kan ange ett mer begränsat scope, exempelvis ”/products”.
Om registreringen lyckas, loggas ett meddelande med scope. Om ett fel inträffar loggas ett felmeddelande.
Installera och Aktivera Service Worker
Skapa en ny fil, public/service-worker.js, och lägg till följande kod:
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 service workern har registrerats, installerats och aktiverats starta utvecklingsservern och öppna din applikation i webbläsaren.
npm run dev
Öppna webbläsarens utvecklarverktyg (vanligtvis genom att högerklicka på sidan och välja ”Inspect” eller ”Granska”) och navigera till fliken ”Application” eller ”Program”. Under avsnittet ”Service Workers” ska du se den service worker som du har registrerat.
Med service workern registrerad, installerad och aktiverad, kan du implementera olika funktioner, som cachelagring, bakgrundssynkronisering, eller push-notiser.
Cachelagra Resurser Med Service Workers
Att cachelagra applikationens resurser lokalt kan leda till betydande prestandaförbättringar genom att göra åtkomst snabbare, speciellt när internetanslutningen är instabil.
För att cachelagra applikationens resurser, lägg till följande kod i filen service-worker.js:
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 besöker hemsidan kollar koden först om det finns ett cachat svar för requesten i cachen. Om det finns returneras det cacheade svaret.
Om det inte finns något cachelagrat svar, hämtar service workern resursen från servern. Den returnerar svaret till klienten och lagrar det i cachen för framtida behov.
För att se de cachelagrade resurserna öppnar du utvecklarverktygens flik ”Application” eller ”Program”. Under ”Storage” eller ”Lagring” hittar du en lista över de cachelagrade tillgångarna. Du kan också simulera en offline-upplevelse genom att markera ”Offline” under ”Service Workers” och sedan ladda om sidan.
Nu när du besöker webbsidan hämtar webbläsaren resurserna från cachen istället för att göra nätverksanrop för att ladda ner data.
Använda Service Workers för att Förbättra Prestanda
Service workers är ett kraftfullt verktyg för att förbättra prestandan för Next.js-applikationer. De kan cachelagra resurser, avlyssna begäran och erbjuda stöd för offline-användning, vilket bidrar till en bättre användarupplevelse.
Det är dock viktigt att notera att implementering och hantering av service workers kan vara komplext. Därför är det viktigt att noggrant överväga de potentiella fördelarna och nackdelarna innan du börjar använda dem.