Skrypt service worker Angular zwiększa szybkość i niezawodność aplikacji w sieciach o niskiej jakości połączenia.
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:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- 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
:
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:
- Dodaj do projektu pakiet
@angular/pwa
. - Kontroluj zawartość pamięci podręcznej skryptu service worker, edytując
ngsw-config.json
.