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

Chcesz umożliwić instalację aplikacji Angular? Nie musisz już czekać.

Minko Gechev

Z tego posta dowiesz się, jak utworzyć progresywną aplikację internetową (PWA) za pomocą interfejsu wiersza poleceń Angular.

Przykładowy kod z tego przewodnika znajdziesz na GitHubie.

Tworzenie aplikacji PWA z możliwością zainstalowania

Aby zmienić aplikację Angular w PWA, wystarczy uruchomić jedno polecenie:

ng add @angular/pwa

To polecenie spowoduje:

• Utwórz skrypt service worker z domyślną konfiguracją buforowania.
• Utwórz plik manifestu informujący przeglądarkę o tym, jak powinna działać aplikacja zainstalowana na urządzeniu użytkownika.
• Dodaj link do pliku manifestu w usłudze index.html.
• Dodaj tag theme-color <meta> do witryny 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 wczytania strony. Jeśli tak nie jest, spróbuj zmodyfikować registrationStrategy.

Dostosowywanie PWA

Post Precaching with the Angular service worker (Wywoływanie pamięci podręcznej w skrypcie service worker Angular) zawiera objaśnienie, jak skonfigurować skrypt service worker Angular. Znajdziesz tam informacje o tym, które zasoby mają być zapisywane w pamięci podręcznej przez skrypt service worker, oraz jaka strategia ma to robić.

Plik manifestu aplikacji pozwala określić nazwę aplikacji, krótką nazwę, ikony, kolor motywu i inne szczegóły. Więcej informacji o pełnym zestawie właściwości, które możesz ustawić, znajdziesz w poście Dodawanie pliku manifestu aplikacji internetowej.

Spójrz na 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 elemencie manifest.webmanifest.

PWA odwołuje się do pliku manifestu z elementem link w elemencie index.html. Gdy przeglądarka znajdzie plik referencyjny, wyświetli się prośba Dodaj do ekranu głównego:

Schematy ng-add dodają wszystkie elementy niezbędne do zainstalowania aplikacji, dlatego generują ikony skrótów, które wyświetlają się, gdy użytkownik doda aplikację na pulpicie:

Zanim wdrożysz PWA w środowisku produkcyjnym, pamiętaj o dostosowaniu właściwości i ikon pliku manifestu.

Podsumowanie

Aby utworzyć aplikację z możliwością zainstalowania w Angular:

1. Dodaj @angular/pwa do projektu za pomocą interfejsu wiersza poleceń Angular.
2. Zmień opcje w pliku manifest.webmanifest, aby dostosować je do swojego projektu.
3. Zaktualizuj ikony w katalogu src/assets/icons, aby dostosować je do swojego projektu.
4. Opcjonalnie edytuj theme-color w index.html.