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

Хотите, чтобы ваше Angular-приложение можно было установить? Больше не нужно ждать!

Minko Gechev

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

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

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

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

ng add @angular/pwa

Эта команда выполнит следующее:

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

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

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

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

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

Взгляните на файл манифеста, сгенерированный 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 .