Создайте прогрессивное веб-приложение с помощью Angular CLI

Вы хотите сделать свое приложение Angular доступным для установки? Не ждите больше!

Минко Гечев

В этом посте вы узнаете, как использовать интерфейс командной строки (CLI) Angular для создания прогрессивного веб-приложения (PWA) .

Пример кода из этого руководства вы можете найти на GitHub .

Создайте устанавливаемый PWA

Чтобы сделать ваше приложение Angular PWA, все, что вам нужно сделать, это запустить одну команду:

ng add @angular/pwa

Эта команда будет:

  • Создайте сервисного работника с конфигурацией кэширования по умолчанию.
  • Создайте файл манифеста , который сообщает браузеру, как ваше приложение должно вести себя при установке на устройство пользователя.
  • Добавьте ссылку на файл манифеста в index.html .
  • Добавьте тег theme-color <meta> в index.html .
  • Создайте значки приложений в каталоге src/assets .

По умолчанию ваш сервис-воркер должен быть зарегистрирован в течение нескольких секунд после загрузки первой страницы. Если это не так, рассмотрите возможность изменения registrationStrategy .

Настройте свой PWA

В статье «Предварительное кэширование с помощью сервис-воркера Angular» объясняется, как настроить сервис-воркера Angular. Там вы можете узнать, как указать, какие ресурсы вы хотите, чтобы сервис-воркер кэшировал, и какую стратегию он должен использовать для этого.

Файл манифеста вашего приложения позволяет указать имя вашего приложения, краткое имя, значки, цвет темы и другие детали. О полном наборе свойств, которые вы можете установить, читайте в статье «Добавление манифеста веб-приложения» .

Взгляните на файл манифеста, созданный Angular CLI:

{
  "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"
    }
  ]
}

Вы можете настроить любое из этих свойств, изменив соответствующее значение в manifest.webmanifest .

PWA ссылается на свой файл манифеста с помощью элемента link в index.html . Как только браузер найдет ссылку, он отобразит приглашение «Добавить на главный экран» :

Запрос на установку прогрессивного веб-приложения

Поскольку схемы ng-add добавляют все необходимое для установки вашего приложения, они генерируют несколько значков ярлыков, которые отображаются, когда пользователь добавляет приложение на свой рабочий стол:

Значок ярлыка прогрессивного веб-приложения

Обязательно настройте свойства и значки манифеста перед развертыванием PWA в рабочей среде!

Заключение

Чтобы создать устанавливаемое приложение Angular:

  1. Добавьте @angular/pwa в свой проект с помощью Angular CLI.
  2. Отредактируйте параметры в файле manifest.webmanifest в соответствии с вашим проектом.
  3. Обновите значки в каталоге src/assets/icons в соответствии с вашим проектом.
  4. При желании отредактируйте theme-color в index.html .