Fügen Sie Ihrer Website einen Service Worker hinzu

Eines der besten Dinge, das Sie 2022 für Ihre Website tun können, ist das Hinzufügen eines Service Workers, falls Sie noch keinen eingerichtet haben. Service Worker verleihen Ihrer Website Superkräfte. Heute möchte ich Ihnen einige der erstaunlichen Dinge zeigen, die sie tun können, und Ihnen eine einfache Vorlage geben, die Sie sofort auf Ihrer Website verwenden können.

Was sind Service Worker?

Kurz gesagt, Service Worker ermöglichen es Ihnen, schnellere und widerstandsfähigere Weberlebnisse zu erstellen.

Im Gegensatz zu regulären JavaScript-Dateien haben Service Worker keinen Zugriff auf das DOM. Sie laufen auch auf einem eigenen Thread und blockieren daher nicht die Ausführung anderer JavaScript-Dateien. Service Worker sind darauf ausgelegt, vollständig asynchron zu sein.

Sicherheit

Hinzufügen eines Service Workers zu Ihrer Website oder Webanwendung

Um einen Service Worker zu verwenden, müssen wir ihn zuerst beim Browser registrieren. Sie können einen Service Worker mit der Methode navigator.serviceWorker.register() registrieren. Übergeben Sie den Pfad zur Service Worker-Datei als Argument.

navigator.serviceWorker.register('sw.js');

Sie können dies in einer externen JavaScript-Datei ausführen, aber ich ziehe es vor, es direkt in einem script-Element inline in meinem HTML auszuführen, damit es so schnell wie möglich läuft.

Im Gegensatz zu anderen Arten von JavaScript-Dateien funktionieren Service Worker nur für das Verzeichnis, in dem sie sich befinden (und alle seine Unterverzeichnisse). Eine Service Worker-Datei unter /js/sw.js würde nur für Dateien im /js-Verzeichnis funktionieren. Daher sollten Sie Ihre Service Worker-Datei im Stammverzeichnis Ihrer Website platzieren.

Obwohl Service Worker eine hervorragende Browserunterstützung haben, ist es eine gute Idee sicherzustellen, dass der Browser sie unterstützt, bevor Sie Ihr Registrierungsskript ausführen.

if (navigator && navigator.serviceWorker) {
  navigator.serviceWorker.register('sw.js');
}

Nachdem der Service Worker installiert wurde, kann der Browser ihn aktivieren. Dies geschieht normalerweise nur, wenn...

• kein Service Worker derzeit aktiv ist, oder
• der Benutzer die Seite neu lädt.

Der Service Worker wird nicht ausgeführt und fängt keine Anfragen ab, bis er aktiviert ist.

Auf Anfragen in einem Service Worker hören

Sobald der Service Worker aktiv ist, kann er beginnen, Anfragen abzufangen und andere Aufgaben auszuführen. Wir können mit self.addEventListener() und dem fetch-Ereignis auf Anfragen hören.

// Listen for request events
self.addEventListener('fetch', function (event) {
  // Do stuff...
});

Innerhalb des Ereignis-Listeners ist die Eigenschaft event.request das Anfrageobjekt selbst. Der Einfachheit halber können wir es in der Variable request speichern.

Bestimmte Versionen des Chromium-Browsers haben einen Fehler, der einen Fehler auslöst, wenn die Seite in einem neuen Tab geöffnet wird. Glücklicherweise gibt es einen einfachen Fix von Paul Irish, den ich in alle meine Service Worker aufnehme, nur für den Fall.

// Listen for request events
self.addEventListener('fetch', function (event) {

  // Get the request
  let request = event.request;

  // Bug fix
  // https://stackoverflow.com/a/49719964
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;

});

Sobald Ihr Service Worker aktiv ist, wird jede einzelne Anfrage an ihn gesendet und mit dem fetch-Ereignis abgefangen.

Service Worker-Strategien

Strategien zum Caching von Assets

Wie bekommen Sie Assets in den Cache Ihres Browsers? Sie werden normalerweise zwei verschiedene Ansätze verwenden, abhängig von den Asset-Typen.

1. Pre-caching bei der Installation. Jede Website und Webanwendung hat eine Reihe von Kern-Assets, die auf fast jeder Seite verwendet werden: CSS, JavaScript, ein Logo, Favicon und Schriftarten. Sie können diese während des install-Ereignisses vorab cachen und sie mit einem Offline-zuerst-Ansatz bereitstellen, wann immer sie angefordert werden.
2. Cache beim Surfen. Ihre Website oder App hat wahrscheinlich Assets, die nicht bei jedem Besuch oder von jedem Besucher abgerufen werden; Dinge wie Blogbeiträge und Bilder, die zu Artikeln gehören. Für diese Assets möchten Sie sie möglicherweise in Echtzeit cachen, während der Besucher darauf zugreift.

Sie können diese gecachten Assets dann entweder standardmäßig oder als Fallback bereitstellen, je nach Ihrem Ansatz.

Implementierung von Netzwerk-zuerst und Offline-zuerst Strategien in Ihrem Service Worker

Innerhalb eines fetch-Ereignisses in Ihrem Service Worker gibt die Methode request.headers.get('Accept') den MIME-Typ für den Inhalt zurück. Wir können dies verwenden, um zu bestimmen, für welchen Dateityp die Anfrage bestimmt ist. MDN hat eine Liste gängiger Dateien und ihrer MIME-Typen. HTML-Dateien haben beispielsweise den MIME-Typ text/html.

Wir können den gesuchten Dateityp als Argument in die Methode String.includes() übergeben und if-Anweisungen verwenden, um basierend auf dem Dateityp unterschiedlich zu antworten.

// Listen for request events
self.addEventListener('fetch', function (event) {

  // Get the request
  let request = event.request;

  // Bug fix
  // https://stackoverflow.com/a/49719964
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;

  // HTML files
  // Network-first
  if (request.headers.get('Accept').includes('text/html')) {
    // Handle HTML files...
    return;
  }

  // CSS & JavaScript
  // Offline-first
  if (request.headers.get('Accept').includes('text/css') || request.headers.get('Accept').includes('text/javascript')) {
    // Handle CSS and JavaScript files...
    return;
  }

  // Images
  // Offline-first
  if (request.headers.get('Accept').includes('image')) {
    // Handle images...
  }

});

Netzwerk-zuerst

Innerhalb jeder if-Anweisung verwenden wir die Methode event.respondWith(), um die an den Browser zurückgesendete Antwort zu ändern.

Für Assets, die einen Netzwerk-zuerst-Ansatz verwenden, nutzen wir die fetch()-Methode, übergeben die request, um die Anfrage für die HTML-Datei durchzureichen. Wenn sie erfolgreich zurückgegeben wird, return wir die response in unserer Callback-Funktion. Dies ist dasselbe Verhalten wie beim Nichtvorhandensein eines Service Workers.

Wenn ein Fehler auftritt, können wir Promise.catch() verwenden, um die Antwort zu ändern, anstatt die Standard-Browser-Fehlermeldung anzuzeigen. Wir können die Methode caches.match() verwenden, um nach dieser Seite zu suchen, und sie anstelle der Netzwerk-response returnen.

// Send the request to the network first
// If it's not found, look in the cache
event.respondWith(
  fetch(request).then(function (response) {
    return response;
  }).catch(function (error) {
    return caches.match(request).then(function (response) {
      return response;
    });
  })
);

Offline-zuerst

Für Assets, die einen Offline-zuerst-Ansatz verwenden, prüfen wir zuerst im Browser-Cache mit der Methode caches.match(). Wenn eine Übereinstimmung gefunden wird, return wir sie. Andernfalls verwenden wir die Methode fetch(), um die request an das Netzwerk weiterzuleiten.

// Check the cache first
// If it's not found, send the request to the network
event.respondWith(
  caches.match(request).then(function (response) {
    return response || fetch(request).then(function (response) {
      return response;
    });
  })
);

Pre-caching von Kern-Assets

Innerhalb eines install-Ereignis-Listeners im Service Worker können wir die Methode caches.open() verwenden, um einen Service Worker-Cache zu öffnen. Wir übergeben den gewünschten Namen für den Cache, app, als Argument.

Der Cache ist auf Ihre Domäne beschränkt und auf diese beschränkt. Andere Websites können nicht darauf zugreifen, und wenn sie einen Cache mit demselben Namen haben, sind die Inhalte vollständig getrennt.

Die Methode caches.open() gibt ein Promise zurück. Wenn bereits ein Cache mit diesem Namen existiert, wird das Promise damit aufgelöst. Wenn nicht, wird der Cache zuerst erstellt und dann aufgelöst.

// Listen for the install event
self.addEventListener('install', function (event) {
  event.waitUntil(caches.open('app'));
});

Als Nächstes können wir eine then()-Methode an unsere caches.open()-Methode mit einer Callback-Funktion anhängen.

Um Dateien zum Cache hinzuzufügen, müssen wir sie anfordern, was wir mit dem Konstruktor new Request() tun können. Wir können die Methode cache.add() verwenden, um die Datei zum Service Worker-Cache hinzuzufügen. Dann returnen wir das cache-Objekt.

Wir möchten, dass das install-Ereignis wartet, bis wir unsere Datei gecacht haben, bevor es abgeschlossen wird. Wickeln wir also unseren Code in die Methode event.waitUntil().

// Listen for the install event
self.addEventListener('install', function (event) {

  // Cache the offline.html page
  event.waitUntil(caches.open('app').then(function (cache) {
    cache.add(new Request('offline.html'));
    return cache;
  }));

});

Ich finde es hilfreich, ein Array mit den Pfaden zu all meinen Kern-Dateien zu erstellen. Dann, innerhalb des install-Ereignis-Listeners, nachdem ich meinen Cache geöffnet habe, kann ich jedes Element durchlaufen und es hinzufügen.

let coreAssets = [
  '/css/main.css',
  '/js/main.js',
  '/img/logo.svg',
  '/img/favicon.ico'
];

// On install, cache some stuff
self.addEventListener('install', function (event) {

  // Cache core assets
  event.waitUntil(caches.open('app').then(function (cache) {
    for (let asset of coreAssets) {
      cache.add(new Request(asset));
    }
    return cache;
  }));

});

Cache beim Surfen

Ihre Website oder App hat wahrscheinlich Assets, die nicht bei jedem Besuch oder von jedem Besucher abgerufen werden; Dinge wie Blogbeiträge und Bilder, die zu Artikeln gehören. Für diese Assets möchten Sie sie möglicherweise in Echtzeit cachen, während der Besucher darauf zugreift. Bei nachfolgenden Besuchen können Sie sie direkt aus dem Cache laden (mit einem Offline-zuerst-Ansatz) oder als Fallback bereitstellen, wenn das Netzwerk ausfällt (mit einem Netzwerk-zuerst-Ansatz).

Wenn eine fetch()-Methode eine erfolgreiche response zurückgibt, können wir die Methode Response.clone() verwenden, um eine Kopie davon zu erstellen.

Als Nächstes können wir die Methode caches.open() verwenden, um unseren Cache zu öffnen. Dann verwenden wir die Methode cache.put(), um die kopierte Antwort im Cache zu speichern, und übergeben die request und eine copy der response als Argumente. Da dies eine asynchrone Funktion ist, wickeln wir unseren Code in die Methode event.waitUntil(). Dies verhindert, dass das Ereignis endet, bevor wir unsere copy im Cache gespeichert haben. Sobald die copy gespeichert ist, können wir die response wie gewohnt returnen.

/explanation Wir verwenden cache.put() anstelle von cache.add(), da wir bereits eine response haben. Die Verwendung von cache.add() würde einen weiteren Netzwerkaufruf tätigen.

// HTML files
// Network-first
if (request.headers.get('Accept').includes('text/html')) {
  event.respondWith(
    fetch(request).then(function (response) {

      // Create a copy of the response and save it to the cache
      let copy = response.clone();
      event.waitUntil(caches.open('app').then(function (cache) {
        return cache.put(request, copy);
      }));

      // Return the response
      return response;

  }).catch(function (error) {
      return caches.match(request).then(function (response) {
        return response;
      });
    })
  );
}

Alles zusammenfügen