Używaj skryptu service worker w Angular, aby zwiększyć szybkość i stabilność aplikacji w sieciach o słabej jakości połączenia.
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. Korzystanie z usługa robocza do wcześniejszego buforowania pozwala przechwytywać żądania sieciowe i przekazywać odpowiedzi bezpośrednio z lokalnej pamięci podręcznej zamiast pobierać je z sieci. Gdy zasoby aplikacji zostaną zapisane w pamięci podręcznej, może to znacznie przyspieszyć działanie aplikacji i umożliwić jej działanie w trybie offline.
Z tego artykułu dowiesz się, jak skonfigurować wstępny bufor w aplikacji Angular. Zakładamy, że wiesz już, czym jest wstępny bufor i co to jest usługa robocza. Jeśli chcesz przypomnieć sobie podstawy, przeczytaj artykuł Service workers i interfejs Cache Storage API.
Przedstawiamy skrypt service worker Angular
Zespół Angular oferuje moduł service worker z funkcją wstępnego zapisywania w pamięci podręcznej, który jest dobrze zintegrowany z platformą i interfejsem wiersza poleceń Angular (CLI).
Aby dodać usługę w tle, 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
. ng-add
Schematic dodaje do projektu plik o nazwie ngsw-config.json
, którego możesz użyć do skonfigurowania instancji roboczej usługi. (plik zawiera domyślną konfigurację, którą nieco dostosujesz później).
Teraz możesz skompilować projekt na potrzeby środowiska produkcyjnego:
ng build --prod
W katalogu dist/service-worker-web-dev
znajdziesz plik o nazwie ngsw.json
. Ten plik informuje pracownika usługi Angular, jak przechowywać w pamięci podręcznej zasoby w aplikacji. Jest generowany podczas procesu kompilacji na podstawie konfiguracji (ngsw-config.json
) i zasobów wygenerowanych w momencie 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:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
Zwróć uwagę, że karta Network zawiera zasoby statyczne pobierane bezpośrednio w tle przez skrypt ngsw-worker.js
:
Jest to usługa robocza Angulara, która wstępnie zapisuje 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 komponentów zasobów app
. Ponieważ wartość installMode
dla tej grupy komponentów jest ustawiona na prefetch
, usługa wstępnie schowa wszystkie określone komponenty, które obejmują teraz obrazy PNG.
Określanie innych zasobów do wstępnego buforowania jest równie proste: zaktualizuj wzorce w grupie komponentów 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 korzystać z wstępnego buforowania w ramach Angular i interfejsu wiersza poleceń Angular:
- Dodaj do projektu pakiet
@angular/pwa
. - Aby kontrolować, co skrypt service worker ma przechowywać w pamięci podręcznej, edytuj plik
ngsw-config.json
.