Servicemedewerkers integreren in Next.js-applicaties

Serviceworkers zijn scripts die op de achtergrond draaien en krachtige cachingmogelijkheden en andere functies bieden aan moderne webapplicaties.

Deze functies brengen de naadloze en gebruiksvriendelijke ervaring van native apps naar de webbrowser.

Servicemedewerkers vormen een fundamenteel onderdeel bij het creëren van Progressive Web Apps (PWA's).

Servicemedewerkers begrijpen

Een servicemedewerker is een type JavaScript-webwerker die op de achtergrond draait, los van de hoofd-JavaScript-thread, zodat deze niet blokkeert. Dit betekent dat het geen vertragingen of onderbrekingen veroorzaakt in de gebruikersinterface van de applicatie of de interactie van de gebruiker ermee.

Servicemedewerkers fungeren als proxyservers en zitten tussen webapplicaties en het netwerk. Ze kunnen verzoeken en antwoorden onderscheppen, bronnen in de cache opslaan en offline ondersteuning bieden. Dit zorgt ervoor dat webapps naadloos en gebruiksvriendelijker aanvoelen, zelfs als de gebruiker niet online is.

Belangrijke toepassingen voor servicemedewerkers

Er zijn verschillende toepassingen voor servicemedewerkers. Ze bevatten:

• PWA's: Servicemedewerkers bieden Progressive Web Apps veel kracht. Ze voeren aangepaste netwerkverzoeken, pushmeldingen, offline ondersteuning en snel laden uit.
• Caching: Servicemedewerkers kunnen de assets van de applicatie (afbeeldingen, JavaScript-code en CSS-bestanden) opslaan in de cacheopslag van de browser. Hierdoor kan de browser ze uit de cache ophalen in plaats van ze via het netwerk op te halen van de externe server. Als gevolg hiervan laadt de inhoud sneller, wat vooral handig is voor gebruikers met een trage of onbetrouwbare internetverbinding.
• Achtergrondsynchronisatie: Servicemedewerkers kunnen gegevens synchroniseren en andere achtergrondtaken uitvoeren, zelfs als de gebruiker niet actief met de applicatie communiceert of als de applicatie niet in de browser is geopend.

Servicemedewerkers integreren in Next.js-applicaties

Voordat u in de code duikt, helpt het om te begrijpen hoe servicemedewerkers werken. Er zijn twee belangrijke fasen bij het inzetten van servicemedewerkers: registratie En activering.

Tijdens de eerste fase registreert de browser de servicemedewerker. Hier is een eenvoudig voorbeeld:

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

De code controleert eerst of de browser servicemedewerkers ondersteunt, wat alle moderne webbrowsers doen. Als deze ondersteuning bestaat, gaat deze verder met het registreren van een servicemedewerker die zich op het opgegeven bestandspad bevindt.

In de activeringsfase moet u een servicemedewerker installeren en activeren door te luisteren naar de installeren En activeren evenementen gebruiken JavaScript-gebeurtenislisteners. Hier ziet u hoe u dit kunt bereiken:

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

Deze code kunt u direct na het registratieproces invoeren. Het zou direct moeten worden uitgevoerd nadat het registratieproces voor servicemedewerkers is voltooid.

U kunt de code van dit project vinden in zijn GitHub opslagplaats.

Maak een Next.js-project

Voer om te beginnen deze opdracht uit om een ​​Next.js-project lokaal te ondersteunen:

npx create-next-app next-project

Het toevoegen van een servicemedewerker aan een Next.js-applicatie omvat de volgende stappen:

1. Registreer een servicemedewerker in de globale scope-omgeving.
2. Maak een JavaScript-bestand voor servicemedewerkers in de openbare map.

Een servicemedewerker toevoegen

Registreer eerst een servicemedewerker. Update de src/pages/_app.js bestand als volgt. Door de code in dit bestand op te nemen, zorgt u ervoor dat de servicemedewerker zich registreert wanneer de applicatie wordt geladen en toegang heeft tot alle assets van de applicatie.

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 gebruikEffect hook wordt geactiveerd wanneer het onderdeel wordt gemonteerd. Net als in het vorige voorbeeld controleert de code eerst of de browser van de gebruiker servicemedewerkers ondersteunt.

Als de ondersteuning bestaat, registreert deze het servicewerknemerscript dat zich in het opgegeven bestandspad bevindt, en specificeert het bereik ervan als “/”. Dit betekent dat de servicemedewerker controle heeft over alle bronnen in de applicatie. U kunt desgewenst een gedetailleerder bereik opgeven, bijvoorbeeld: '/products”.

Als de registratie succesvol is, wordt er een succesbericht geregistreerd, samen met de omvang ervan. Als er een fout optreedt tijdens het registratieproces, zal de code deze opvangen en een foutmelding registreren.

Installeer en activeer de servicemedewerker

Voeg de volgende code toe aan een nieuw bestand, 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();

Om te testen of de servicemedewerker succesvol is geregistreerd, geïnstalleerd en geactiveerd, start u de ontwikkelingsserver en opent u uw applicatie in de browser.

npm run dev

Open De ontwikkelaarstools van Chrome venster (of het equivalent van uw browser) en navigeer naar het Sollicitatie tabblad. Onder de Dienstverleners sectie, zou u de servicemedewerker moeten zien die u heeft geregistreerd.

Als de servicemedewerker succesvol is geregistreerd, geïnstalleerd en geactiveerd, kunt u verschillende functies implementeren, zoals caching, achtergrondsynchronisatie of het verzenden van pushmeldingen.

Bronnen in cache opslaan met servicemedewerkers

Het cachen van applicatiemiddelen op het apparaat van de gebruiker kan de prestaties verbeteren door snellere toegang mogelijk te maken, vooral in situaties met onbetrouwbare internetverbindingen.

Om de activa van de app in het cachegeheugen op te slaan, neemt u de volgende code op in het service-werker.js bestand.

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

Wanneer een gebruiker voor het eerst de startpagina bezoekt, controleert deze code of er een in de cache opgeslagen antwoord voor het verzoek in de cache aanwezig is. Als er een in de cache opgeslagen antwoord bestaat, stuurt de service dit terug naar de client.

Als er geen in de cache opgeslagen antwoord bestaat, haalt de servicemedewerker de bron via het netwerk op van de server. Het dient het antwoord aan de klant en slaat het op in de cache voor toekomstige verzoeken.

Om de in de cache opgeslagen assets te bekijken, opent u het tabblad Applicatie in de ontwikkelaarstools. Onder de Cache-opslag sectie zou u een lijst met de in de cache opgeslagen assets moeten zien. Je kunt ook de Offline optie onder de Servicemedewerker sectie en herlaad de pagina om een ​​offline ervaring te simuleren.

Zodra u nu de startpagina bezoekt, zal de browser bronnen weergeven die zijn opgeslagen in de cacheopslag in plaats van te proberen netwerkverzoeken te doen om gegevens op te halen.

Servicemedewerkers gebruiken om de prestaties te verbeteren

Servicemedewerkers zijn een krachtig hulpmiddel om de prestaties van Next.js-apps te verbeteren. Ze kunnen bronnen in de cache opslaan, verzoeken onderscheppen en offline ondersteuning bieden, wat allemaal de gebruikerservaring kan verbeteren.

Het is echter belangrijk op te merken dat servicemedewerkers ook complex kunnen zijn om te implementeren en te beheren. Het is belangrijk om de mogelijke voor- en nadelen van servicemedewerkers zorgvuldig af te wegen voordat u ze inschakelt.