Änderungen an „cache.addAll()“ und „importScripts()“ in Chrome 71

Jeff Posnick

Entwickler, die Service Worker und die Cache Storage API verwenden, sollten auf zwei kleine Änderungen, die in Chrome 71 eingeführt werden. Mit beiden Änderungen wird die Chrome-Implementierung an die Spezifikationen und andere Browser verwenden.

Asynchrones importScripts() nicht zulassen

importScripts() weist Ihr Haupt-Service Worker-Skript an, die aktuelle Ausführung anzuhalten. Laden Sie zusätzlichen Code von eine bestimmte URL und führen Sie sie bis zum Ende im aktuellen globalen Geltungsbereich aus. Sobald das erledigt ist, setzt das Service Worker-Hauptskript die Ausführung fort. importScripts() ist praktisch, wenn Sie möchten Ihr wichtigstes Service Worker-Skript aus organisatorischen Gründen in kleinere Teile aufteilen. Drittanbietercode einbinden, um dem Service Worker Funktionalität hinzuzufügen.

Browser versuchen, die möglichen Leistungsverluste beim Herunterladen und Ausführen einiger synchroner Code“ werden alle über importScripts() abgerufenen Inhalte automatisch im Cache im Cache gespeichert. Nach der ist beim Ausführen des importierten Codes der Aufwand gering.

Damit dies funktioniert, muss der Browser jedoch wissen, dass es keine „Überraschung“ gibt Code importiert in den Service Worker ein, nachdem Installation. Gemäß der Service Worker-Spezifikation Das Aufrufen von importScripts() funktioniert nur bei der synchronen Ausführung der obersten Ebene Service Worker-Skript oder bei Bedarf asynchron innerhalb des install-Handlers.

Vor Chrome 71 wurde importScripts() asynchron außerhalb des install-Handlers aufgerufen. arbeiten. Ab Chrome 71 werden diese Anrufe eine Laufzeitausnahme auslösen (es sei denn, die gleiche URL wurde zuvor in einen install-Handler importiert), dem Verhalten anderer Browser entsprechen.

Anstelle von Code wie diesem:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

Ihr Service Worker-Code sollte in etwa so aussehen:

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

Wiederholte URLs, die an cache.addAll() übergeben werden, werden eingestellt

Wenn Sie die Cache Storage API zusammen mit einem Service Worker verwenden, gibt es eine weitere kleine Änderung in Chrome 71 so, dass sie den entsprechenden Spezifikationen entsprechen. Wenn dieselbe URL mehrfach an einen einzigen Aufruf von cache.addAll(), der besagt, dass das vom Aufruf zurückgegebene Promise abgelehnt werden soll.

Vor Chrome 71 wurde dies nicht erkannt und die doppelten URLs wurden praktisch ignoriert.

</ph> <ph type="x-smartling-placeholder">

Diese Protokollierung ist ein Auftakt zu Chrome 72. Dort werden doppelte URLs nicht nur protokolliert, sondern Ablehnung durch cache.addAll(). Wenn Sie cache.addAll() als Teil einer Promise-Kette aufrufen übergeben an InstallEvent.waitUntil(), wie üblich, kann diese Ablehnung dazu führen, dass die Installation des Service Workers fehlschlägt.

So können Probleme auftreten:

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

Diese Einschränkung gilt nur für die tatsächlichen URLs, die an cache.addAll() übergeben werden, sowie für das Caching der zwei äquivalente Antworten mit unterschiedlichen URLs, wie '/' und '/index.html', lösen keine Ablehnung aus.

Service Worker-Implementierung umfassend testen

Service Worker sind weit verbreitet. in allen wichtigen „Evergreen“- Browser unter Punkt zu kommen. Wenn Sie Ihre progressive Web-App regelmäßig mit verschiedenen Browsern testen oder viele Nutzer Chrome noch nicht verwenden, haben Sie wahrscheinlich schon einmal und den Code aktualisiert. Aber falls Ihnen das gar nicht aufgefallen ist die sich in anderen Browsern geändert hat, möchten wir auf diese Änderung hinweisen, bevor wir das Verhalten von Chrome ändern.