Tworzenie progresywnej aplikacji internetowej za pomocą interfejsu wiersza poleceń Angular

Chcesz, aby aplikacja Angular była instalowalna? Nie musisz już czekać!

Z tego artykułu dowiesz się, jak użyć interfejsu wiersza poleceń Angular (CLI) do utworzenia progresywnej aplikacji internetowej (PWA).

Przykład kodu z tego przewodnika znajdziesz na GitHubie.

Tworzenie instalowanej aplikacji PWA

Aby przekształcić aplikację Angular w PWA, wystarczy wykonać to jedno polecenie:

ng add @angular/pwa

To polecenie:

  • Utwórz instancję roboczą usługi z domyślną konfiguracją buforowania.
  • Utwórz plik pliku manifestu, który informuje przeglądarkę, jak aplikacja powinna się zachowywać po zainstalowaniu na urządzeniu użytkownika.
  • Dodaj link do pliku manifestu w pliku index.html.
  • Dodaj tag theme-color <meta> do index.html.
  • Utwórz ikony aplikacji w katalogu src/assets.

Domyślnie skrypt service worker powinien zostać zarejestrowany w ciągu kilku sekund od pierwszego załadowania strony. Jeśli tak nie jest, rozważ wprowadzenie zmian w registrationStrategy.

Dostosowywanie PWA

W artykule Wstępny zapisywanie zasobów za pomocą skryptu service worker Angular znajdziesz informacje o konfigurowaniu skryptu service worker Angular. Dowiesz się tam, jak określić zasoby, które mają być przechowywane w pamięci podręcznej przez usługę workera, oraz strategię, której ma on używać.

Plik manifestu aplikacji umożliwia określenie nazwy, nazwy skróconej, ikon, koloru motywu i innych szczegółów. Więcej informacji o wszystkich właściwościach, które możesz ustawić, znajdziesz w artykule Dodawanie pliku manifestu aplikacji internetowej.

Sprawdź plik manifestu wygenerowany przez interfejs wiersza poleceń Angular:

{
 
"name": "manifest-web-dev",
 
"short_name": "manifest-web-dev",
 
"theme_color": "#1976d2",
 
"background_color": "#fafafa",
 
"display": "standalone",
 
"scope": "/",
 
"start_url": "/",
 
"icons": [
   
{
     
"src": "assets/icons/icon-72x72.png",
     
"sizes": "72x72",
     
"type": "image/png"
   
},
   

   
{
     
"src": "assets/icons/icon-512x512.png",
     
"sizes": "512x512",
     
"type": "image/png"
   
}
 
]
}

Możesz dostosować dowolną z tych właściwości, zmieniając odpowiednią wartość w sekcji manifest.webmanifest.

PWA odwołuje się do pliku manifestu za pomocą elementu link w elementzie index.html. Gdy przeglądarka znajdzie odwołanie, wyświetli się prompt Dodaj do ekranu głównego:

prośba o instalację progresywnej aplikacji internetowej,

Schematy ng-add zawierają wszystko, co jest potrzebne do zainstalowania aplikacji, dlatego generują ikony skrótów, które są wyświetlane, gdy użytkownik dodaje aplikację do pulpitu:

Ikona skrótu do progresywnej aplikacji internetowej

Zanim wdrożysz PWA w wersji produkcyjnej, dostosuj właściwości i ikony w pliku manifestu.

Podsumowanie

Aby utworzyć instalowaną aplikację Angular:

  1. Dodaj @angular/pwa do projektu za pomocą interfejsu wiersza poleceń Angular.
  2. Zmodyfikuj opcje w pliku manifest.webmanifest, aby dostosować je do swojego projektu.
  3. Zaktualizuj ikony w katalogu src/assets/icons, aby pasowały do projektu.
  4. Opcjonalnie możesz zmienić wartość theme-color w sekcji index.html.