Использование 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, дополненным кастомной логикой.
