使用Angular构建渐进式Web应用程序（PWA）
Angular是开发PWA的绝佳选择。 自1.7.0版开始，Angular CLI中已包含对Service Worker的支持，
以快速开始开发PWA应用程序 。 可以使用提供许多选项和功能的json配置文件在Angular应用程序中配置Service Worker。 尽管这听起来不错，但是使用Angular Service Worker还是有一个很大的缺点-它的逻辑不能以标准方式扩展。
为什么您需要扩展NGSW的功能？
就我而言，我需要注册一个自定义的单击通知事件侦听器，该侦听器将处理推送通知的单击操作。 我必须承认，Angular Service Worker在接收和显示推送通知方面做得很出色-该部分由ngsw-worker.js文件处理，而开发人员则无需付出任何努力。 首先，似乎提供我所需逻辑的唯一方法是在构建应用程序时更改生成的ngsw-worker.js文件的代码。 但是我意识到这种方法不好-每当您对ngsw配置文件进行任何更改时，都需要对其进行支持和检查。 幸运的是，事实证明，通过输入两个其他文件可以轻松解决该问题。
解决方案
让我们从
/ src文件夹中创建两个其他js文件开始。
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');
资产登记
通过创建新的脚本文件，我们需要确保Angular在构建过程中将它们考虑在内。 从技术角度来看，这些资产类似于在创建项目时由Angular CLI创建的favicon.ico文件。 我们可以在angular.json文件中注册其他资源（旧版本的Angular为.angular-cli.json）：
{ ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... }
重新注册Service Worker脚本
最后一步是在应用程序启动期间更改Angular注册的Service Worker的入口点。 为此，我们需要更改app.module.ts中的ServiceWorkerModule.register条目，如下所示：
ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
总结一下
就这样，在完成应用程序的生产组装之后，我们的新脚本文件将被复制到
/ dist文件夹，并在注册ServiceWorker时由应用程序使用。 如果您想了解更多，还可以查看我的GitHub个人资料，在
该个人资料中，我发布
了一个示例Angular应用程序 ，其中
带有ServiceWorker并辅以自定义逻辑。