W Chrome 123 dostępny jest interfejs API routingu statycznego Service Worker. Ten interfejs API umożliwia deklaratywnie określenie sposobu pobierania określonych ścieżek zasobów, co oznacza, że przeglądarka nie musi uruchamiać skryptu service workera tylko po to, aby pobrać odpowiedzi z pamięci podręcznej lub bezpośrednio z sieci. Ten interfejs API jest testowany w wersji origin od Chrome 116. W tym poście znajdziesz szczegółowe informacje o jego wprowadzeniu w Chrome 123.
Korzystanie z interfejsu API
Aby użyć wywołania interfejsu API event.addRoutes w zdarzeniu install w usługach workera. Przekaż tej metodzie listę tras z tymi właściwościami:
condition- Określa, kiedy ma zastosowanie dana reguła. Akceptuje te właściwości:
urlPattern: instancja URLPattern lub ciąg znaków reprezentujący prawidłowy obiekt URLPattern, który można przekazać do konstruktoraURLPattern.requestMethod: ciąg znaków zawierający metodę żądania.requestMode: ciąg znaków zawierający tryb żądania.requestDestination: ciąg znaków zawierający adres docelowy żądania.runningStatus: ciąg znaków:"running"lub"not-running". Wskazuje stan skryptu service worker.
source- Określa sposób wczytywania zasobów pasujących do
condition. Jeden z tych ciągów znaków:"network""cache""fetch-event""race-network-and-fetch-handler"
W tym przykładzie adresy URL zaczynające się od „/articles” są kierowane do workera usługi, jeśli jest on uruchomiony. Jeśli występuje kilka warunków, np. urlPattern i runningStatus, do użycia danej trasy muszą być spełnione wszystkie warunki.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
W tym przykładzie wpisy do formularza są wysyłane bezpośrednio do sieci, omijając pracownika usługi.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
W tym przykładzie pamięć podręczna o nazwie "pictures" służy do pobierania plików z rozszerzeniem .png lub .jpg.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
Zmiany w wersji testowej origin
W pierwotnej wersji próbnej metody InstallEvent.registerRouter() zamiast InstallEvent.addRoutes(), metoda registerRouter() mogła być wywoływana tylko raz. Ta zmiana została wprowadzona na podstawie opinii społeczności na temat wersji próbnej.
Nowy interfejs API korzysta też z modyfikacji interfejsu URLPattern wprowadzonych w wersji Chrome 121. Umożliwia on też określenie metody, trybu i miejsca docelowego prośby oraz zawiera dodatkowe opcje źródła.
Pomoc w Narzędziach deweloperskich w Chrome
Zarejestrowane reguły routera są wyświetlane na karcie Service Worker (Usługa w tle) w panelu Application (Aplikacja).
W panelu Sieć, jeśli żądanie pasuje do zarejestrowanej reguły, jest to wskazane w kolumnie Rozmiar. Gdy najedziesz kursorem na kolumnę „Rozmiar”, wyświetli się zarejestrowany identyfikator routera. Odpowiednie reguły są wyświetlane na karcie aplikacji.
