Использование Angular для создания прогрессивных веб-приложений (PWA)

Angular — отличный выбор для разработки PWA. Поддержка Service Worker'ов включена в Angular CLI начиная с версии 1.7.0, для быстрого старта разработки PWA приложения. Service Worker может быть настроен в приложении Angular с помощью файла конфигурации json, предоставляющего множество опций и функций. Несмотря на то, что это звучит замечательно, есть один большой недостаток использования Angular Service Worker — его логику нельзя расширить стандартным способом.

Зачем вам может понадобиться расширять возможности NGSW?

В моем случае мне нужно было зарегистрировать кастомный прослушиватель событий уведомления о клике, который обрабатывал бы действие клика по push-уведомлению. Я должен признать, что Angular Service Worker отлично справляется с получением и отображением push-уведомлений — эта часть обрабатывается файлом ngsw-worker.js без каких-либо усилий со стороны разработчика. И сначала, казалось, что единственный способ предоставить нужную мне логику работы — это вносить изменения в код генерируемого файла ngsw-worker.js при сборке приложения. Но я понимал, что такой способ плох — его нужно поддерживать и проверять каждый раз, когда вы вносите какие-то изменения в файл конфигурации ngsw. К счастью, оказалось, что проблему легко решить, введя два дополнительных файла.

Решение

Начнем с создания двух дополнительных js-файлов в папке /src.

sw-custom.js — файл, содержащий прослушиватель событий:

(function () {
  'use strict';
  
  self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    console.log('notification details: ', event.notification);
  });
}());

sw-master.js — файл, объединяющий NGSW с нашей собственной логикой:

importScripts('./ngsw-worker.js');
importScripts('./sw-custom.js');

Регистрация assets

Создав новые файлы скриптов, мы должны убедиться, что Angular учитывает их во время сборки. С технической точки зрения — это asset'ы, похожие на файл favicon.ico, создаваемый Angular CLI при создании проекта. Мы можем зарегистрировать наши дополнительные ресурсы в файле angular.json (.angular-cli.json для более старых версий Angular):

{
 ...,
 "assets": [
 "src/favicon.ico",
 "src/assets",
 "src/manifest.json",
 "src/sw-master.js",
 "src/sw-reminders.js"
 ],
 ...
}

Перерегистрируем Service Worker скрипт

Последний шаг — это изменение точки входа в Service Worker, регистрируемого Angular во время запуска приложения. Для этого нам нужно изменить запись ServiceWorkerModule.register в app.module.ts следующим образом:

ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })

Резюмируем

Вот и все, после production-сборки приложения наши новые файлы сценариев будут скопированы в папку /dist и использованы приложением при регистрации ServiceWorker'а. Если вы хотите увидеть больше, вы также можете заглянуть в мой профиль GitHub, где я опубликовал пример приложения Angular с ServiceWorker, дополненным кастомной логикой.

Прокачиваем Angular NGSW с помощью кастомной логики в Service Worker