Używanie interfejsu API routingu statycznego Service Worker do pomijania skryptu service worker na określonych ścieżkach

W Chrome 123 dostępny jest interfejs API routingu statycznego Service Worker. Ten interfejs API umożliwia deklarowanie 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 wersji Chrome 116. W tym poście znajdziesz szczegółowe informacje o jego wprowadzeniu w wersji 123.

Korzystanie z interfejsu API

Aby użyć wywołania interfejsu API event.addRoutes w zdarzeniu install w usługach działających w tle. Przekaż tej metodzie listę tras z tymi właściwościami:

condition
Określa, kiedy ma obowiązywać 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 konstruktora URLPattern.
  • 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 obecnie uruchomiony. Jeśli występuje kilka warunków, np. urlPatternrunningStatus, 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 pierwotnym źródle próba używała InstallEvent.registerRouter() zamiast InstallEvent.addRoutes(), a 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 również 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 ramach workera) w panelu Aplikacja.

Reguły routera wyróżnione w panelu 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ę identyfikator zarejestrowanego routera. Odpowiednie reguły są wyświetlane na karcie aplikacji.

Identyfikator routera widoczny w panelu Sieć.