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.
![Zrzut ekranu pokazujący ostrzeżenie w konsoli Chrome](https://developer.chrome.com/static/blog/tweeks-to-addAll-importScripts/image/a-screenshot-the-warning-46bead1fd2604.png?authuser=1&hl=pl)
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.