Главная » Хабрахабр » [Перевод] Прокачиваем Angular NGSW с помощью кастомной логики в Service Worker

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

Использование 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 () );
}());

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


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

[Из песочницы] Haiku β1 — сделаем /b/ OS великой снова

Совсем недавно (почти 4 месяца назад) вышла новая Haiku (далее — просто BeOS, ибо проект гораздо удачнее ReactOS — настолько, что разница между Haiku и BeOS уже пренебрежимо мала). Да и недавно прочитанный киберпанк-роман Александра Чубарьяна давал понять, что BeOS ...

Минкомсвязи одобрило законопроект об изоляции рунета

Министерство цифрового развития, связи и массовых коммуникаций РФ поддержало законопроект №608767-7 об автономной работе рунета, внесённый в Госдуму 14 декабря 2018 года. Об этом сегодня сообщил замглавы Минкомсвязи Олег Иванов в ходе расширенного заседания комитета Госдумы по информационной политике, информационным технологиям ...