Buforowanie z użyciem skryptu service worker Angular

Skrypt service worker Angular pozwala zwiększyć szybkość i niezawodność aplikacji w sieciach o słabym zasięgu.

Minko Gechev

Radzenie sobie z ograniczoną łącznością

Gdy użytkownicy mają ograniczony dostęp do sieci lub nie mają go wcale, funkcje aplikacji internetowej mogą go znacznie pogorszyć i często kończą się niepowodzeniem. Zastosowanie skryptu service worker do wstępnego buforowania pozwala przechwytywać żądania sieciowe i dostarczać odpowiedzi bezpośrednio z lokalnej pamięci podręcznej, zamiast pobierać je z sieci. Po zapisaniu zasobów aplikacji w pamięci podręcznej ta metoda może znacznie przyspieszyć działanie aplikacji i umożliwić jej działanie również wtedy, gdy użytkownik jest offline.

Z tego posta dowiesz się, jak skonfigurować wstępne buforowanie w aplikacji Angular. Zakładamy, że wiesz już ogólnie o wstępnym buforowaniu i skryptach service worker. Jeśli jest potrzebne przypomnienie, zapoznaj się z postem na temat procesów Service Worker i interfejsu Cache Storage API.

Przedstawiamy skrypt service worker Angular

Zespół Angular oferuje moduł service worker z funkcją wstępnego buforowania, który jest dobrze zintegrowany z platformą i interfejsem wiersza poleceń Angular.

Aby dodać skrypt service worker, uruchom w interfejsie wiersza poleceń to polecenie:

ng add @angular/pwa

Aplikacje @angular/service-worker i @angular/pwa powinny być teraz zainstalowane w aplikacji. Powinny pojawić się w aplikacji package.json. Schemat ng-add dodaje też do projektu plik o nazwie ngsw-config.json, którego możesz użyć do skonfigurowania skryptu service worker. (Plik zawiera konfigurację domyślną, którą później zmienisz).

Teraz utwórz projekt dla środowiska produkcyjnego:

ng build --prod

W katalogu dist/service-worker-web-dev znajdziesz plik o nazwie ngsw.json. Ten plik informuje skrypt service worker Angular, jak zapisać zasoby w aplikacji w pamięci podręcznej. Plik jest generowany podczas procesu kompilacji na podstawie konfiguracji (ngsw-config.json) i zasobów utworzonych w czasie kompilacji.

Teraz uruchom serwer HTTP w katalogu zawierającym zasoby produkcyjne Twojej aplikacji, otwórz publiczny adres URL i sprawdź żądania sieciowe w Narzędziach deweloperskich w Chrome:

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
2. Kliknij kartę Sieć.

Uwaga: karta sieci zawiera zasoby statyczne pobierane bezpośrednio w tle przez skrypt ngsw-worker.js:

To skrypt service worker Angular wstępnie buforując zasoby statyczne określone w wygenerowanym pliku manifestu ngsw.json.

Brakuje jednak jednego ważnego komponentu: nyan.png. Aby wstawić ten obraz w pamięci podręcznej, musisz dodać wzorzec, który zawiera ten obraz w elemencie ngsw-config.json, który znajduje się w głównej części obszaru roboczego:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

Ta zmiana spowoduje dodanie wszystkich obrazów PNG z folderu /assets do grupy zasobów app. Ponieważ installMode dla tej grupy plików ma wartość prefetch, mechanizm Service Worker zapisze w pamięci podręcznej wszystkie określone zasoby, które teraz zawierają obrazy PNG.

Określenie innych zasobów do wstępnego buforowania jest równie proste – zaktualizuj wzorce w grupie zasobów app.

Podsumowanie

Użycie skryptu service worker do wstępnego buforowania może zwiększyć wydajność aplikacji przez zapisanie zasobów w lokalnej pamięci podręcznej, co zwiększa niezawodność aplikacji w słabych sieciach. Aby użyć wstępnego buforowania w Angular i interfejsie wiersza poleceń Angular:

1. Dodaj do projektu pakiet @angular/pwa.
2. Kontroluj, co skrypt service worker przechowuje w pamięci podręcznej, edytując plik ngsw-config.json.