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

Chcesz, aby Twoją aplikację Angular można było zainstalować? Nie musisz już czekać!

Minko Gechev

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

Przykładowy kod z tego przewodnika znajdziesz na GitHubie.

Tworzenie PWA z możliwością zainstalowania

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

ng add @angular/pwa

To polecenie:

• Utwórz skrypt service worker z domyślną konfiguracją buforowania.
• Utwórz plik manifestu, który informuje przeglądarkę, jak aplikacja powinna się zachowywać po zainstalowaniu na urządzeniu użytkownika.
• Dodaj link do pliku manifestu w 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 wczytania strony. Jeśli nie, rozważ zmodyfikowanie registrationStrategy.

Dostosowywanie PWA

W artykule Wstępne zapisywanie w pamięci podręcznej za pomocą skryptu service worker Angular znajdziesz informacje o konfigurowaniu skryptu service worker Angular. Dowiesz się tam, jak określić, które zasoby mają być przechowywane w pamięci podręcznej przez skrypt service worker, i jaką strategię ma on stosować.

Plik manifestu aplikacji umożliwia określenie nazwy aplikacji, nazwy skróconej, ikon, koloru motywu i innych szczegółów. Pełną listę właściwości, które możesz ustawić, znajdziesz w artykule Dodawanie pliku manifestu aplikacji internetowej.

Przyjrzyj się plikowi manifestu wygenerowanemu 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 manifest.webmanifest.

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

Ponieważ schematy ng-add dodają wszystko, co jest potrzebne, aby aplikacja była z możliwością zainstalowania, generują one ikony skrótów, które są wyświetlane po dodaniu aplikacji do pulpitu przez użytkownika:

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

Podsumowanie

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

1. Dodaj @angular/pwa do projektu za pomocą Angular CLI.
2. Edytuj opcje w pliku manifest.webmanifest, aby dostosować je do swojego projektu.
3. Zaktualizuj ikony w katalogu src/assets/icons, aby pasowały do Twojego projektu.
4. Opcjonalnie edytuj theme-color w index.html.