So integrieren Sie Servicemitarbeiter in Next.js-Anwendungen

Service Worker sind Skripte, die im Hintergrund ausgeführt werden, um modernen Webanwendungen leistungsstarke Caching-Funktionen und andere Funktionen bereitzustellen.

Diese Funktionen bringen das nahtlose und benutzerfreundliche Erlebnis nativer Apps in den Webbrowser.

Servicemitarbeiter sind eine grundlegende Komponente bei der Erstellung von Progressive Web Apps (PWAs).

Servicemitarbeiter verstehen

Ein Servicemitarbeiter ist eine Art von JavaScript-Webworker Das läuft im Hintergrund, getrennt vom Haupt-JavaScript-Thread, sodass es nicht blockiert. Dies bedeutet, dass es keine Verzögerungen oder Unterbrechungen der Benutzeroberfläche der Anwendung oder der Interaktion des Benutzers damit verursacht.

Servicemitarbeiter fungieren als Proxyserver – sie sitzen zwischen Webanwendungen und dem Netzwerk. Sie können Anfragen und Antworten abfangen, Ressourcen zwischenspeichern und Offline-Support bereitstellen. Dies trägt dazu bei, dass sich Web-Apps nahtloser und benutzerfreundlicher anfühlen, auch wenn der Benutzer nicht online ist.

Wichtige Anwendungen für Servicemitarbeiter

Es gibt verschiedene Bewerbungen für Servicekräfte. Sie beinhalten:

• PWAs: Servicemitarbeiter verleihen Progressive Web Apps große Vorteile. Sie führen benutzerdefinierte Netzwerkanfragen, Push-Benachrichtigungen, Offline-Support und schnelles Laden aus.
• Caching: Servicemitarbeiter können die Assets der Anwendung – Bilder, JavaScript-Code und CSS-Dateien – im Cache-Speicher des Browsers speichern. Dadurch kann der Browser sie aus seinem Cache abrufen, anstatt sie über das Netzwerk vom Remote-Server abzurufen. Dadurch werden Inhalte schneller geladen, was besonders für Benutzer mit langsamen oder unzuverlässigen Internetverbindungen nützlich ist.
• Hintergrundsynchronisierung: Servicemitarbeiter können Daten synchronisieren und andere Hintergrundaufgaben ausführen, selbst wenn der Benutzer nicht aktiv mit der Anwendung interagiert oder die Anwendung nicht im Browser geöffnet ist.

Integration von Servicemitarbeitern in Next.js-Anwendungen

Bevor Sie sich mit dem Code befassen, ist es hilfreich zu verstehen, wie Servicemitarbeiter arbeiten. Es gibt zwei Schlüsselphasen beim Einsatz von Servicemitarbeitern: Anmeldung Und Aktivierung.

In der ersten Phase registriert der Browser den Servicemitarbeiter. Hier ist ein einfaches Beispiel:

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

Der Code prüft zunächst, ob der Browser Service Worker unterstützt, was alle modernen Webbrowser tun. Wenn diese Unterstützung vorhanden ist, wird mit der Registrierung eines Service-Workers fortgefahren, der sich im angegebenen Dateipfad befindet.

In der Aktivierungsphase müssen Sie einen Servicemitarbeiter installieren und aktivieren, indem Sie ihm zuhören Installieren Und aktivieren Sie Veranstaltungen mit JavaScript-Ereignis-Listener. So können Sie dies erreichen:

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

Sie können diesen Code direkt nach dem Registrierungsprozess eingeben. Es sollte direkt nach erfolgreicher Registrierung des Servicemitarbeiters ausgeführt werden.

Den Code dieses Projekts finden Sie in seiner GitHub Repository.

Erstellen Sie ein Next.js-Projekt

Führen Sie zunächst diesen Befehl aus, um ein lokales Gerüst für ein Next.js-Projekt zu erstellen:

npx create-next-app next-project

Das Hinzufügen eines Service Workers zu einer Next.js-Anwendung umfasst die folgenden Schritte:

1. Registrieren Sie einen Servicemitarbeiter in der globalen Bereichsumgebung.
2. Erstellen Sie eine Service-Worker-JavaScript-Datei im öffentlichen Verzeichnis.

Hinzufügen eines Servicemitarbeiters

Registrieren Sie zunächst einen Servicemitarbeiter. Aktualisieren Sie die src/pages/_app.js Datei wie folgt. Durch das Einfügen des Codes in diese Datei wird sichergestellt, dass sich der Servicemitarbeiter beim Laden der Anwendung registriert und Zugriff auf alle Assets der Anwendung hat.

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

Der useEffect Hook wird ausgelöst, wenn die Komponente gemountet wird. Wie im vorherigen Beispiel prüft der Code zunächst, ob der Browser des Benutzers Servicemitarbeiter unterstützt.

Wenn die Unterstützung vorhanden ist, registriert es das Service-Worker-Skript, das sich im angegebenen Dateipfad befindet, und gibt seinen Geltungsbereich als „/”. Dies bedeutet, dass der Servicemitarbeiter die Kontrolle über alle Ressourcen in der Anwendung hat. Wenn Sie möchten, können Sie einen detaillierteren Bereich angeben, z. B. „/products”.

Wenn die Registrierung erfolgreich ist, wird eine Erfolgsmeldung mit Angabe des Umfangs protokolliert. Wenn während des Registrierungsvorgangs ein Fehler auftritt, erkennt der Code diesen und protokolliert eine Fehlermeldung.

Installieren und aktivieren Sie den Service Worker

Fügen Sie den folgenden Code zu einer neuen Datei hinzu: 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();

Um zu testen, ob der Service Worker erfolgreich registriert, installiert und aktiviert wurde, starten Sie den Entwicklungsserver und öffnen Sie Ihre Anwendung im Browser.

npm run dev

Offen Die Entwicklertools von Chrome Fenster (oder das Äquivalent Ihres Browsers) und navigieren Sie zu Anwendung Tab. Unter dem Servicemitarbeiter Im Abschnitt sollten Sie den Servicemitarbeiter sehen, den Sie registriert haben.

Nachdem der Service Worker erfolgreich registriert, installiert und aktiviert wurde, können Sie verschiedene Funktionen wie Caching, Hintergrundsynchronisierung usw. implementieren Senden von Push-Benachrichtigungen.

Zwischenspeichern von Ressourcen mit Servicemitarbeitern

Das Zwischenspeichern von Anwendungsressourcen auf dem Gerät des Benutzers kann die Leistung verbessern, indem es einen schnelleren Zugriff ermöglicht, insbesondere in Situationen mit unzuverlässigen Internetverbindungen.

Um die Assets der App zwischenzuspeichern, fügen Sie den folgenden Code ein service-worker.js Datei.

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

Wenn ein Benutzer zum ersten Mal auf die Homepage zugreift, prüft dieser Code, ob im Cache eine zwischengespeicherte Antwort für die Anfrage vorhanden ist. Wenn eine zwischengespeicherte Antwort vorhanden ist, gibt der Dienst sie an den Client zurück.

Wenn keine zwischengespeicherte Antwort vorhanden ist, ruft der Servicemitarbeiter die Ressource vom Server über das Netzwerk ab. Es übermittelt die Antwort an den Client und speichert sie für zukünftige Anfragen zwischen.

Um die zwischengespeicherten Assets anzuzeigen, öffnen Sie die Registerkarte „Anwendung“ in den Entwicklertools. Unter dem Cache-Speicher Im Abschnitt sollte eine Liste der zwischengespeicherten Assets angezeigt werden. Sie können auch die überprüfen Offline Option unter der Servicemitarbeiter Abschnitt und laden Sie die Seite neu, um ein Offline-Erlebnis zu simulieren.

Sobald Sie nun die Homepage besuchen, stellt der Browser die im Cache-Speicher gespeicherten Ressourcen bereit, anstatt zu versuchen, Netzwerkanfragen zum Abrufen von Daten zu stellen.

Einsatz von Servicemitarbeitern zur Leistungssteigerung

Servicemitarbeiter sind ein leistungsstarkes Tool zur Verbesserung der Leistung von Next.js-Apps. Sie können Ressourcen zwischenspeichern, Anfragen abfangen und Offline-Support bereitstellen, was alles die Benutzererfahrung verbessern kann.

Es ist jedoch wichtig zu beachten, dass die Implementierung und Verwaltung von Servicemitarbeitern auch komplex sein kann. Es ist wichtig, die potenziellen Vor- und Nachteile von Servicemitarbeitern sorgfältig abzuwägen, bevor Sie sie einsetzen.