Aktualisierungen der Service Worker Cache API

Archibald
Jake Archibald

Ich wurde gebeten, diesen Beitrag zu einem relativ kleinen Update der Service Worker Cache API zu schreiben. Ich dachte nicht, dass es einen eigenen Artikel rechtfertigt, aber nach einer langen Debatte, die schließlich auf ein Spiel mit Steinpapier-Schere endet, verlor ich, also hier ist es.

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

Ich kann dich nicht hören! Ich sagte: Sind Sie bereit, mehr über die Updates bei der Implementierung der Service Worker Cache API in Chrome zu erfahren?

(Du kannst nur weiterlesen, wenn du auf deinen Stuhl gesprungen bist und „YEAHHH!“ gerufen hast. Es ist optional, so zu tun, als würde man ein Lasso schwingen.)

„cache.addAll“ in Chrome 46 verfügbar

Ja. Genau! Cache! Alle hinzufügen! Chrome 46!

Abgesehen von Sarkasmus ist das eine ziemlich große Sache, da cache.addAll der letzte verbleibende Teil des „essentials“-Polyfills im Cache ist und 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 ruft ein Array von URLs und Anfragen ab, ruft sie ab und fügt sie dem Cache hinzu. Dies ist transaktional: Wenn einer der Abruf- oder Schreibvorgänge 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 ein Gesamtfehler sein sollte.

Das obige Beispiel 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, sodass sie auch in der anderen Service Worker-Implementierung verwendet werden kann.

Aber das ist noch nicht alles, es gibt noch weitere Cache-Verbesserungen in der Pipeline...

„cache.matchAll“ bald in Chrome 47 verfügbar

So erhalten Sie mehrere Übereinstimmungen:

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

Mit dem Befehl oben werden alle Werte in mysite-static-v1 abgerufen, die mit / übereinstimmen. Im Cache können Sie mehrere Einträge pro URL haben, wenn diese unabhängig im Cache gespeichert werden können, z. B. wenn sie unterschiedliche Vary-Header haben.

Firefox unterstützt dies bereits in der Entwicklerversion, sodass die Anwendung zusammen mit der anderen Service Worker-Implementierung verwendet werden kann.

Cache-Abfrageoptionen in Chrome verfügbar... bald

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 / im Cache gespeichert ist und wir eine Anfrage für / erhalten, wird diese aus dem Cache bereitgestellt. Wenn wir jedoch eine Anfrage für /?utm_source=blahblahwhatever erhalten, stammt diese nicht aus dem Cache. Sie können das Problem umgehen, indem Sie den URL-Suchstring beim Abgleich ignorieren:

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

/?utm_source=blahblahwhatever wird jetzt dem Eintrag für / zugeordnet! Die vollständigen Optionen sind:

  • ignoreSearch: Der Suchteil der URL wird sowohl im Anfrageargument als auch in im Cache gespeicherten Anfragen ignoriert.
  • ignoreMethod: ignoriert die Methode des Anfragearguments, sodass eine POST-Anfrage mit einem GET-Eintrag im Cache übereinstimmen kann.
  • ignoreVary: Der „variation“-Header in im Cache gespeicherten Antworten wird ignoriert.

Firefox unterstützt dies bereits. Erzählen Sie Ben Kelly, wie toll er ist, all das in Firefox zu nutzen.

Wenn Sie die Implementierung der Cache-Abfrageoptionen in Chrome verfolgen möchten, rufen Sie crbug.com/426309 auf.

Bis zum nächsten Mal! Seien Sie gespannt auf ein weiteres spannendes Kapitel dessen, was wir in die Cache API implementiert haben.