首先

由于在Angular PWA相关话题上仍然收到了一些点赞，所以我会写一篇更新文章。

• @angular/pwaについて

push通知について

关于@angular/pwa

关于Angular6中引入的ng add功能的讨论。

AngularCLI使用schematics这个代码生成工具来生成组件和服务。例如，ng generate component hoge。在v6中添加的ng add使用schematics来完成从npm包的安装到NgModule等的代码添加。

@angular/pwa是用于ng add的代码生成辅助工具包。

你会做什么呢？

npm i @angular/service-worker是一个替代选项，它可以帮助我们添加config文件和ngModule代码。需要注意的是，@angular/pwa是没有意义的，即使我们通过npm i @angular/pwa安装它。这是因为我们必须通过schematics来操作。因此，我们是否可以使用它取决于以下情况。

• AngularCLIを採用している既存PJ

ng add @angular/pwaしましょう

これから新規で起こす場合

ng new appしてからng add @angular/pwaしましょう

AngularCLIを採用していない既存PJ

大人しくnpm i @angular/service-workerしてセットアップしましょう。その時も@angular/pwaがやっていることを参考にすると良いと思います。

这里是引用自以下公式文档关于@angular/pwa的解释。

将@angular/service-worker包添加到项目中。
通过CLI启用Service Worker的构建支持。
将Service Worker导入并注册到应用程序模块中。
更新index.html文件。
包含添加manifest.json文件的链接。
添加theme=color的meta标签。
安装支持可安装的渐进式Web应用（PWA）的图标文件。
创建名为ngsw-config.json的Service Worker配置文件。此文件指定缓存行为和其他设置。

安装步骤

请参考这篇文章，因为两次写没有意义。几乎所有工作都已经被自动化，我们没有什么要做的了。请适时调整manifest.json和ngsw-config.json。控制ngsw-config的缓存是一项非常复杂和需要有技术水平的工作。（参考文章）

让我们使用Angular CLI v7来创建PWA吧！
https://qiita.com/puku0x/items/a6db78cc67d1eb960384

关于推送通知

有关swPush有消息传出来了。

旧代码文件虽然一直未在公式文档中被提及，所以存在感较弱，但其实早就存在了。如果你有怀疑的话，可以查看这个源代码。看，就在这里！

根据源代码的评论，似乎并不是实验性的翻译。不能在文档中找到的可能是因为iPhone处于某种状况，所以没有引起热议，或者在其他事项上准备了服务器以便进行演示，但是推送通知会将其变得更繁琐，这只是我的猜测。

这个公式之外的参考信息非常有用，非常完善，我没有任何需要补充的。

【Angular推送通知：一个完整的逐步指南】
https://blog.angular-university.io/angular-push-notifications/

Angular推送通知：一份完备的逐步指南

在Angular中实现推送通知

为了不让它就这样结束，我简单做个总结。基本上，推送通知就是服务器推送，所以服务器和浏览器会负责处理。@angular/service-worker可以很好地处理推送API的订阅，所以前端需要专注于创建订阅权限的用户界面。

swPush提供以下功能。

class SwPush {
  messages: Observable<object>
  notificationClicks: Observable<{...}
  subscription: Observable<PushSubscription | null>
  isEnabled: boolean
  requestSubscription(options: { serverPublicKey: string; }): Promise<PushSubscription>
  unsubscribe(): Promise<void>
}

• pushイベントの購読登録/解除 requestSubscription/unsubscribe

ユーザーに購読許可を出しYESを頂く際に使うやつです。横着してロードイベントに任せずにアプリケーションのUXを熟考して購読許可のタイミングを練りましょう。

メッセージのObservableプロパティ messages

ただブラウザのネイティブ通知UIに出すだけならsubscribeして放っておけばいいが、このObservableがpushサービスで取得した通知群を流してくれるのでオリジナルUIを作れます。
例えばアプリケーション内部の専用通知タブに出すとかの用途です。
この場合、サーバからpushされた通知内容にクライアントでデータ加工したり付与できます。

通知をクリックした時の該当メッセージとアクションの取得 notificationClicks

どんなリアクションするか、腕の振るいどころです。

没有使用浏览器的原生通知UI，而是自定义UI来创建

说到推送通知，我只能想到浏览器提供的本地用户界面（Native UI）。但是根据这篇文章，我对 messages 属性的用法有了很好的参考。它使用推送通知来创建类似 Twitter 通知标签页的设计。

一个新的Angular Service Worker – 创建自动渐进式Web应用。第二部分：实践。

如果你考虑到iPhone，那就可以使用webSocket来实现。如果你对技术感兴趣，或者从未来实现了iOS的push API而来阅读本文的话，你可以通过这个gif大致了解情况。

您可以通过文章中的链接获取实现代码。信息：订阅Observable，然后将其设置为正常输出的UI即可。

希望尽快在iOS平台上实现push API。

就是这样。