Превратите приложение Angular в PWA за 4 простых шага

Вы написали приложение на Angular и теперь хотите превратить его в прогрессивное веб-приложение? Без проблем! PWA - отличный способ заставить обычные веб-приложения работать как нативные приложения на Android, Windows, Chrome OS и т. Д.

Шаг 1. Используйте Angular CLI

Самый простой способ сделать ваше приложение PWA - это начать с Angular CLI. Я не буду подробно описывать этот шаг в этой статье, но вы всегда можете обратиться к одной из моих предыдущих статей: Ускорьте разработку и разработку Angular с помощью Angular CLI и опережающей компиляции, а также официальную документацию CLI .

Если вы уже используете официальный интерфейс командной строки, то все готово. Если нет, я настоятельно рекомендую вам его использовать. Серьезно, для этого есть много веских причин!

Шаг 2: Добавьте необходимые пакеты

Выполните следующую команду, чтобы установить все необходимое:

ng add @angular/pwa --project yourProject

Примечание: часть проекта необходима, если вы настроили несколько проектов

Но что он делает?

Он добавляет serviceWorker: true в производственную конфигурацию.
Он создает два файла в корне проекта: manifest.json и ngsw-config.json.
Он добавляет manifest.json, который только что был создан, в зарегистрированных активах проекта.
Он добавляет две строки в index.html: тег <meta name=”theme-color”> (вы захотите изменить его значение) и тег <link>, указывающий на файл manifest.json.
Примечание: если у вас уже есть эти теги в вашем индексе, он не заменит их. Вам придется сделать это самому.
Он импортирует ServiceWorkerModule в ваше приложение (только в рабочей среде). Это служба, отвечающая за автоматическое создание и использование работника службы. Найдите эту строку в своем модуле приложения:
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }) Примечание: если вы используете base-href в рабочей среде, вам нужно изменить '/ngsw-worker.js' путь к './ngsw-worker.js' для предотвращения ошибки 404.
Он добавляет значки в папку с вашими активами. Вам, конечно, придется изменить их, если вы не хотите, чтобы ваше приложение отображало логотипы Angular в виде значков.

Шаг 3. Отредактируйте файл манифеста

У каждого PWA должен быть файл манифеста. Теперь, когда Angular CLI создал его для нас, нам нужно отредактировать его, чтобы он соответствовал нашим потребностям. Обратитесь к этому руководству MDN, чтобы узнать о различных возможностях.

Обратите внимание, как он уже заполнен. Не стесняйтесь изменять или добавлять участников, чтобы настроить PWA. Если вы измените значение theme-color, не забудьте также изменить его в своем index.html файле!

Члены, которые вам нужны

Если вы хотите, чтобы ваше приложение Angular можно было установить на домашних экранах, эти участники должны присутствовать в вашем файле манифеста:

short_name or name
display
start_url
icons

Вам также необходимо обслуживать приложение более https. Для получения более подробной информации ознакомьтесь с этим руководством от Google.

Шаг 4. Отредактируйте файл конфигурации сервис-воркера

Как упоминалось выше, ngsw-config.json был создан в корне вашего проекта. В нем вы можете указать, какие файлы нужно предварительно загрузить или отложить при загрузке версии вашего PWA. Вы можете создать assetGroups с различными конфигурациями, решить, должен ли сервисный работник отдавать приоритет свежести или производительности… и многое другое!

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

Бонусный шаг 1. Уведомление пользователей об обновлениях

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

import { Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
@Injectable()
export class PwaService {
  constructor(private swUpdate: SwUpdate) {
    swUpdate.available.subscribe(event => {
      if (askUserToUpdate()) {
        window.location.reload();
      }
    });
  }
}

По сути, это самый простой способ сделать это. Сервис Service Worker поддерживает 2 события: available и activated. Здесь нам нужно посмотреть, доступно ли обновление. Когда это произойдет, сервисный работник загрузит обновленное приложение (или, по крайней мере, файлы, которые вы установили на prefetch ранее.

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

Что происходит за кулисами

Сервисный работник не проверяет все обслуживаемые файлы, чтобы узнать, существует ли новая версия файла. Вместо этого он только время от времени проверяет ngsw-worker.js (при загрузке страницы, во время навигации и после того, как приложение возвращается из состояния длительного простоя). Если этот файл отличается от того, который у него уже есть, это означает, что доступна новая версия.

Бонусный шаг 2: добавление кнопки установки

Возможно, вы захотите помочь своим пользователям установить ваше приложение на свой телефон. Можно, добавив кнопку установки!

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

Начиная с Chrome 68, Chrome будет запускать событие beforeinstallprompt каждый раз, когда пользователь посещает ваше приложение (но не обязательно предлагать установку). Вы можете поймать это событие, чтобы создать настраиваемую кнопку установки.

Для начала вам нужно знать, что событие срабатывает только один раз и довольно быстро! Вы захотите послушать его, как только сможете. Давайте добавим это в конструктор нашего PwaService, который мы создали ранее:

window.addEventListener('beforeinstallprompt', event => {
  this.promptEvent = event;
});

Если событие сработает, мы храним его в сервисе. Затем мы можем проверить, возможна ли установка, следующим образом:

<button *ngIf="Pwa.promptEvent" (click)="installPwa()">
  Install
</button>

И в компоненте:

constructor(public Pwa: PwaService) {}
installPwa(): void {
  this.Pwa.promptEvent.prompt();
}

При нажатии на кнопку пользователю откроется диалоговое окно браузера для добавления приложения на главный экран.

Готово!

Вот и все! Разве это не было просто? Теперь ваше приложение Angular может быть установлено и обновлено на вашем телефоне!

Если вы уже проходили этот процесс раньше или самостоятельно создавали PWA и хотите поделиться советом, не стесняйтесь оставлять комментарии ниже.

Продолжайте кодировать!

Превратите приложение Angular в PWA за 4 простых шага