Poprawiono funkcje cache.addAll() i importScripts() w Chrome 71.

Jeff Posnick

Deweloperzy używający procesów roboczych i interfejsu Cache Storage API powinni zwrócić uwagę na 2 niewielkie zmiany wprowadzane w Chrome 71. Obie zmiany sprawiają, że implementacja Chrome jest bardziej zgodna z specyfikacji i innych przeglądarkach.

Nie zezwalanie na asynchroniczne polecenia importScript()

importScripts() informuje główny skrypt skryptu service worker, aby wstrzymać bieżące wykonanie, pobrać dodatkowy kod z danego adresu URL i uruchomieniu go do końca w bieżącym zakresie globalnym. Gdy to zrobisz, główny skrypt skryptu service worker wznawia działanie. importScripts() może być przydatny, gdy: chcesz podzielić główny skrypt skryptu service worker na mniejsze części ze względów organizacyjnych, pobrać kod innej firmy, aby dodać funkcję do skryptu service worker.

Przeglądarki próbują ograniczyć możliwe problemy z wydajnością związane z pobieraniem i uruchamianiem kodu”. automatycznie zapisując w pamięci podręcznej wszystkie elementy pobrane przez importScripts(). Oznacza to, że po zastosowaniu i początkowym pobieraniu, wykonanie zaimportowanego kodu jest bardzo proste.

Aby to zadziałało, przeglądarka musi jednak wiedzieć, że nie pojawi się żadna „niespodzianka”. zaimportowano kod do mechanizmu Service Worker po początkowym instalację. Zgodnie ze specyfikacją skryptu service worker wywołanie importScripts() powinno działać tylko podczas synchronicznego wykonywania funkcji najwyższego poziomu skryptu service worker lub w razie potrzeby – asynchronicznie w module obsługi install.

W starszych wersjach Chrome 71 asynchroniczne wywoływanie funkcji importScripts() poza modułem obsługi install w naszej pracy. Od Chrome 71 te wywołania zgłosić wyjątek środowiska wykonawczego (chyba że ten sam adres URL został wcześniej zaimportowany w module obsługi install), co działa w innych przeglądarkach.

Zamiast takiego kodu:

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

Twój kod skryptu service worker powinien wyglądać tak:

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

Wycofanie powtórzonych adresów URL przekazywanych do pamięci podręcznej.addAll()

Jeśli używasz interfejsu Cache Storage API razem z mechanizmem Service Worker, wprowadzono kolejną małą zmianę Chrome 71, aby zapewnić zgodność z odpowiednią specyfikacją. Jeśli ten sam adres URL to przekazywane wiele razy do jednego wywołania w cache.addAll(), zgodnie z specyfikacją, że obietnica zwrócona w wyniku wywołania powinna zostać odrzucona.

Przed wersją Chrome 71 takie przypadki nie były wykrywane, a zduplikowane adresy URL były ignorowane.

Rejestrowanie to jest wstępem do Chrome 72, gdzie zamiast rejestrowanego ostrzeżenia zduplikowane adresy URL prowadzą do odrzucenia cache.addAll(). Jeśli wywołujesz usługę cache.addAll() w ramach łańcucha obietnic przekazano do InstallEvent.waitUntil(), zgodnie z powszechną praktyką takie odrzucenie może spowodować niepowodzenie instalacji skryptu service worker.

Oto, w jaki sposób możesz napotkać problem:

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

To ograniczenie dotyczy tylko adresów URL przekazywanych do cache.addAll() oraz buforowania zawartości powstanie 2 równoważne odpowiedzi, które mają różne adresy URL (np. '/' i '/index.html'), nie powodują odrzucenia.

Duże testy implementacji mechanizmu Service Worker

Skrypty service worker są powszechnie wdrażane wszystkich głównych „zawsze aktualnych” przeglądarek na stronie w tym punkcie. Jeśli regularnie testujesz progresywną aplikację internetową w różnych przeglądarkach masz dużą liczbę użytkowników, którzy nie używają Chrome, prawdopodobnie i zaktualizowaliśmy kod. Zdarza się, że nie zauważyliście działania Chrome w innych przeglądarkach, chcieliśmy zwrócić uwagę na tę zmianę przed zmianą sposobu działania Chrome.