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.