Poproszono mnie o napisanie tego posta na temat niewielkiej aktualizacji interfejsu API pamięci podręcznej dla serwisów działających w tle. Nie sądziłem, że zasługuje na osobny artykuł, ale po długiej debacie, która w końcu skończyła się na grze w kamień-papier-nożyce, przegrałem, więc oto on.
Czy chcesz dowiedzieć się więcej o aktualizacjach interfejsu API pamięci podręcznej service workera w Chrome?
Nie słyszę Cię. Czy chcesz dowiedzieć się więcej o aktualizacjach interfejsu API pamięci podręcznej service workera w Chrome?
(możesz czytać dalej tylko wtedy, gdy wskoczyłeś/wskoczyłaś na krzesło i krzyknęłaś/krzyknęli „YEAHHH!”. Ruchy lasso są opcjonalne, ale zachęcamy do ich wykonywania).
cache.addAll pojawiła się w Chrome 46
Tak. Zgadza się! Pamięć podręczna! Dot add all! Chrome 46.
OK, OK, bez sarkazmu. To naprawdę ważna sprawa, ponieważ cache.addAll to ostatnia pozostała część cache „essentials” polyfill, co oznacza, że nie jest już potrzebna.
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 operacja transakcyjna – jeśli jakiekolwiek pobieranie lub zapisanie się nie powiedzie, cała operacja się nie powiedzie, a pamięć podręczna wróci do poprzedniego stanu. Jest to szczególnie przydatne w przypadku operacji instalacji, takich jak powyżej, gdzie pojedynczy błąd powinien być traktowany jako błąd ogólny.
Powyższy przykład dotyczy skryptu service worker, ale interfejs API pamięci podręcznej jest w pełni dostępny również z stron.
Firefox obsługuje już ten interfejs API w wersji dla deweloperów, więc pojawi się on wraz z resztą implementacji usług workera.
To jednak nie wszystko. W planach mamy jeszcze więcej ulepszeń pamięci podręcznej.
cache.matchAll 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ższe zapytanie zwróci wszystko w folderze mysite-static-v1, co pasuje do /. Pamięć podręczna umożliwia umieszczanie wielu wpisów na adres URL, jeśli można je niezależnie przechowywać w pamięci podręcznej, np. jeśli mają różne nagłówki Vary.
Firefox obsługuje to już w wersji dla deweloperów, więc zostanie to uwzględnione w ramach reszty implementacji usług workerów.
Opcje zapytań do pamięci podręcznej wkrótce w Chrome
Oto dość standardowy kod 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 stronę / w pamięci podręcznej i otrzymamy żądanie dotyczące strony /, zostanie ona wyświetlona z pamięci podręcznej. Jeśli jednak otrzymamy żądanie dotyczące /?utm_source=blahblahwhatever, nie zostanie ono zrealizowane z poziomu pamięci podręcznej. Aby tego uniknąć, podczas dopasowywania ignoruj ciąg znaków w polu wyszukiwania adresu URL:
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 dopasowany do wpisu /. Dostępne opcje:
ignoreSearch– zignoruj część wyszukiwania adresu URL zarówno w argumencie żądania, jak i w żądaniach z pamięci podręcznej.ignoreMethod– zignoruj metodę argumentu żądania, aby żądanie POST mogło pasować do wpisu GET w pamięci podręcznej.ignoreVary– ignoruj nagłówek vary w odpowiedziach z pamięci podręcznej
Firefox obsługuje to już w swoich… wiesz, co i jak. Powiedz Benowi Kelly’emu, jak bardzo doceniasz jego pracę nad wdrożeniem tych funkcji w Firefoksie.
Jeśli chcesz śledzić implementację opcji zapytań do pamięci podręcznej w Chrome, odwiedź stronę crbug.com/426309.
Do zobaczenia w kolejnych odcinkach cyklu „Co nowego w interfejsie API pamięci podręcznej”.