Buforowanie z użyciem skryptu service worker Angular

Skrypt service worker Angular zwiększa szybkość i niezawodność aplikacji w sieciach o niskiej jakości połączenia.

Minko Gechev

Rozwiązywanie problemów z ograniczoną łącznością

Gdy użytkownicy mają ograniczony dostęp do sieci – lub nie mają go wcale – funkcje aplikacji internetowych mogą się znacznie pogorszyć i często ulegać awarii. Użycie 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. Takie podejście może znacznie przyspieszyć działanie aplikacji, gdy zasoby aplikacji zostaną zapisane w pamięci podręcznej, również wtedy, gdy użytkownik jest offline.

W tym poście omawiamy sposób konfigurowania wstępnego buforowania w aplikacji Angular. Zakładamy w nim, że znasz już mechanizm tego typu oraz mechanizmy Service Worker. Jeśli potrzebujesz odświeżenia, przeczytaj post o skrypcjach Service Worker i interfejsie Cache Storage API.

Przedstawiamy mechanizm Service Worker Angular

Zespół Angular udostępnia moduł skryptu 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 to polecenie w interfejsie wiersza poleceń:

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ą możesz później dostosować).

Teraz utwórz projekt na potrzeby ś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 zapisywać zasoby w pamięci podręcznej aplikacji. Plik jest generowany podczas procesu kompilacji na podstawie konfiguracji (ngsw-config.json) i zasobów utworzonych podczas kompilacji.

Teraz uruchom serwer HTTP w katalogu zawierającym zasoby produkcyjne aplikacji, otwórz publiczny adres URL i sprawdź jego żą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ć.

Zwróć uwagę, że na karcie Sieć znajduje się wiele zasobów statycznych pobranych bezpośrednio w tle przez skrypt ngsw-worker.js:

Przykładowa aplikacja

To jest skrypt service worker Angular z zapisaniem w pamięci podręcznej zasobów statycznych określonych w wygenerowanym pliku manifestu ngsw.json.

Brakuje jednak jednego ważnego zasobu: nyan.png. Aby zapisać ten obraz w pamięci podręcznej, musisz dodać do usługi ngsw-config.json wzorzec, który zawiera go w katalogu głównym 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ż pole installMode tej grupy plików ma wartość prefetch, skrypt service worker wstępnie zapisuje w pamięci podręcznej wszystkie określone zasoby, które teraz zawierają obrazy PNG.

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

Podsumowanie

Skrypt service worker do zapisywania w pamięci podręcznej może poprawić wydajność aplikacji – dzięki zapisywaniu zasobów w lokalnej pamięci podręcznej są one bardziej niezawodne w słabszych sieciach. Aby używać wstępnego buforowania w Angular i Angular CLI:

  1. Dodaj do projektu pakiet @angular/pwa.
  2. Kontroluj zawartość pamięci podręcznej skryptu service worker, edytując ngsw-config.json.