Aktualisierungen der Service Worker Cache API

Jake Archibald
Jake Archibald
X Startseite

Ich wurde gebeten, diesen Beitrag über eine relativ kleine Aktualisierung der Service Worker Cache API zu schreiben. Ich fand, dass es keinen eigenen Artikel wert war, aber nach einer langen Debatte, die schließlich zu einem Spiel von Stein, Schere, Papier führte, habe ich verloren. Hier ist er also.

Möchten Sie mehr über die Updates bei der Implementierung der Service Worker Cache API in Chrome erfahren?

Ich kann Sie nicht hören. Ich habe gefragt, ob Sie mehr über die Updates bei der Implementierung der Service Worker Cache API in Chrome erfahren möchten.

(Sie dürfen nur weiterlesen, wenn Sie auf Ihren Stuhl gesprungen und „YEAHHH!“ geschrien haben. Es ist optional, aber erwünscht, gleichzeitig so zu tun, als würden Sie ein Lasso schwingen.)

cache.addAll wurde in Chrome 46 eingeführt

Ja! Genau! Cache! Punkt addieren alle! Chrome 46!

Spaß beiseite: Das ist tatsächlich ein ziemlich großer Deal, da cache.addAll der letzte verbleibende Teil der Polyfill für „Cache-Essenzen“ ist. Das bedeutet, dass er nicht mehr benötigt wird.

So funktioniert cache.addAll:

// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
    // wait until the following promise resolves
    event.waitUntil(
    // open/create a cache named 'mysite-static-v1'
    caches.open('mysite-static-v1').then(function(cache) {
        // fetch and add this stuff to it
        return cache.addAll([
        '/',
        '/css/styles.css',
        '/js/script.js',
        '/imgs/cat-falls-over.gif'
        ]);
    })
    );
});

addAll nimmt ein Array von URLs und Anfragen, ruft sie ab und fügt sie dem Cache hinzu. Dies ist transaktional: Wenn das Abrufen oder Schreiben fehlschlägt, schlägt der gesamte Vorgang fehl und der Cache wird in seinen vorherigen Zustand zurückversetzt. Dies ist besonders nützlich für Installationsvorgänge wie oben, bei denen ein einzelner Fehler zu einem Gesamtfehler führen sollte.

Das Beispiel oben befindet sich in einem Service Worker, aber die Caches API ist auch über Seiten vollständig zugänglich.

Firefox unterstützt diese API bereits in der Entwicklerversion. Sie wird also mit der restlichen Service Worker-Implementierung eingeführt.

Aber das ist noch nicht alles. Es sind weitere Cache-Verbesserungen in Planung.

cache.matchAll in Chrome 47

So können Sie mehrere Übereinstimmungen erhalten:

caches.open('mysite-static-v1').then(function(cache) {
    return cache.matchAll('/');
}).then(function(responses) {
    // …
});

Mit der obigen Formel wird alles in mysite-static-v1 zurückgegeben, was mit / übereinstimmt. Im Cache können Sie mehrere Einträge pro URL haben, wenn sie unabhängig voneinander im Cache gespeichert werden können, z. B. wenn sie unterschiedliche Vary-Header haben.

Firefox unterstützt dies bereits in der Entwicklerversion. Die Funktion wird also mit der restlichen Service Worker-Implementierung eingeführt.

Cacheabfrageoptionen für Chrome – bald verfügbar

Hier ist ein ziemlich standardmäßiger Abruf-Handler:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Wenn wir / im Cache haben und eine Anfrage für / erhalten, wird sie aus dem Cache bereitgestellt. Wenn wir jedoch eine Anfrage für /?utm_source=blahblahwhatever erhalten, die nicht aus dem Cache stammt, Sie können dieses Problem umgehen, indem Sie den URL-Suchstring bei der Übereinstimmung ignorieren:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request, {
        ignoreSearch: true
    }).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Jetzt wird /?utm_source=blahblahwhatever mit dem Eintrag für / abgeglichen. Folgende Optionen sind verfügbar:

  • ignoreSearch – der Suchteil der URL wird sowohl im Anfrageargument als auch in den im Cache gespeicherten Anfragen ignoriert
  • ignoreMethod – die Methode des Anfragearguments wird ignoriert, sodass eine POST-Anfrage mit einem GET-Eintrag im Cache übereinstimmen kann
  • ignoreVary – Ignorieren des vary-Headers in gecachten Antworten

Firefox unterstützt das bereits in… ach, Sie wissen schon. Sagt Ben Kelly, wie toll er ist, weil er all das in Firefox implementiert hat.

Informationen zur Chrome-Implementierung der Cacheabfrageoptionen finden Sie unter crbug.com/426309.

Bis zum nächsten Mal!