Zostałem poproszony o napisanie tego posta w związku z drobną aktualizacją interfejsu API pamięci podręcznej skryptu service worker. Wydawało mi się, że ten artykuł nie jest uzasadniony, ale po długiej debacie, która ostatecznie przegrała w papier, nożyce i kamień, przegrałem i pojawiam się.
Chcesz dowiedzieć się więcej o aktualizacjach implementacji interfejsu API pamięci podręcznej w Chrome Service Worker?
Nie słyszę Cię. Czy chcesz dowiadywać się o aktualizacjach w implementacji interfejsu Service Worker API w Chrome?
(można czytać dalej tylko wtedy, gdy wskoczcie na krzesło i krzyczycie „TAKAJ!”. Jednoczesne udawanie wymachu lasso jest opcjonalne, ale zalecane.
Przeglądarka cache.addAll już w Chrome 46
Tak! Zgadza się! Pamięć podręczna Kropka dodaj wszystkie! Chrome 46!
OK, na marginesie to spory żart, cache.addAll to ostatni element kodu polyfill „essentials”, który nie jest już potrzebny.
Jak działa 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 pobiera tablicę adresów URL i żądań, pobiera je i dodaje do pamięci podręcznej. Jest to transakcja – jeśli któraś z metod pobierania lub zapisu się nie powiedzie, cała operacja zakończy się niepowodzeniem, a pamięć podręczna jest przywracana do poprzedniego stanu. Jest to szczególnie przydatne w przypadku operacji instalacji takich jak opisane powyżej, w których jedna awaria powinna być ogólną błędem.
Powyższy przykład dotyczy skryptu service worker, ale interfejs API pamięci podręcznej jest w pełni dostępny także na stronach.
Firefox obsługuje już ten interfejs API w swojej wersji dla programistów, więc zostanie on przekazany wraz z resztą implementacji skryptu service worker.
Ale to nie wszystko. W przepływie pracy pojawiły się kolejne ulepszenia pamięci podręcznej...
Cache.matchAll już w Chrome 47
Dzięki temu możesz uzyskać wiele dopasowań:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
Powyższy wynik pobierze wszystkie elementy w polu mysite-static-v1, które pasują do zapytania /. Pamięć podręczna umożliwia dodanie wielu wpisów na adres URL, jeśli można je niezależnie zapisywać w pamięci podręcznej, np. jeśli mają różne nagłówki Vary.
Firefox obsługuje już ten kod w wersji dla programistów, więc zostanie on przekazany wraz z resztą implementacji skryptu service worker.
Opcje zapytań dotyczących pamięci podręcznej będą wkrótce dostępne w Chrome...
Oto dość standardowy moduł obsługi pobierania:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Jeśli mamy / w pamięci podręcznej i otrzymamy żądanie dotyczące /, będzie ona wyświetlana z pamięci podręcznej. Jeśli jednak otrzymamy żądanie dotyczące /?utm_source=blahblahwhatever, które nie pochodzi z pamięci podręcznej. Możesz obejść ten problem, ignorując ciąg znaków wyszukiwania adresu URL podczas dopasowywania:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
Teraz /?utm_source=blahblahwhatever zostanie dopasowana do wpisu użytkownika /! Dostępne są następujące opcje:
ignoreSearch– zignoruj część wyszukiwania adresu URL w argumencie żądania i żądaniach w pamięci podręcznej.ignoreMethod– ignoruj metodę argumentu żądania, aby żądanie POST mogło pasować do wpisu GET w pamięci podręcznej.ignoreVary– ignoruj nagłówki w odpowiedziach w pamięci podręcznej
Firefox już obsługuje tę funkcję... OK, już wiesz, o co chodzi. Powiedz Benowi Kellymu, że świetnie mu się to udało w Firefoksie.
Jeśli chcesz zastosować się do implementacji opcji zapytań z pamięci podręcznej w Chrome, wejdź na crbug.com/426309.
Do zobaczenia w kolejnym rozdziałie o wdrożeniu interfejsu API pamięci podręcznej.