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ą do niej wcale dostępu, działanie aplikacji internetowej może się znacznie pogorszyć, a często w ogóle nie działać. 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 odświeżyć sobie tę wiedzę, 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
@angular/service-worker
i @angular/pwa
powinny być zainstalowane w aplikacji i powinny się wyświetlać w 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.
Uruchom teraz serwer HTTP w katalogu zawierającym zasoby produkcyjne aplikacji, otwórz publiczny adres URL i sprawdź żądania sieciowe w Narzędziach deweloperskich w Chrome:
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Sieć.
Pamiętaj, że karta sieci zawiera wiele zasobów statycznych, które są bezpośrednio pobierane 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 zasobu: nyan.png
. Aby zcacheować ten obraz, musisz dodać wzór, który go zawiera, do pliku ngsw-config.json
, który znajduje się 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 powoduje 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: wystarczy zaktualizować wzorce w grupie komponentów zasobów app
.
Podsumowanie
Korzystanie ze skryptu service worker do wstępnego buforowania może poprawić wydajność aplikacji dzięki zapisywaniu zasobów w lokalnej pamięci podręcznej, co zwiększa ich niezawodność w słabym zasięgu sieci. Aby korzystać z wstępnego buforowania w ramach Angular i interfejsu wiersza poleceń Angular:
- Dodaj pakiet
@angular/pwa
do projektu. - Aby kontrolować, co skrypt service worker ma przechowywać w pamięci podręcznej, edytuj plik
ngsw-config.json
.