Angular/プッシュ通知（概要）

背景

過去にプッシュ通知が悪用されることがあった。今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っており、 Safari もしばらく前からこれを行っています。

加えて、 Chrome と Firefox では、サイトが安全なコンテキスト (すなわち HTTPS) ではない限り通知を要求することができず、また別オリジンの <iframe> から要求された通知を許可することができなくなりました。

Target

Angular ServiceWorkerを使用してAngularアプリケーションにWebプッシュ通知を実装する方法

プッシュ通知の概要

・Push API：メッセージをサーバーからブラウザーにプッシュできるようにするもの。
・Notifications API：メッセージがブラウザーに到達したときにメッセージを表示できるようにするもの。
・Pushサーバー：ブラウザプッシュサービスプロバイダー。（ChromeやFirefoxなどプッシュメッセージを管理）※FCM：Firebase CloudMessaging

ibm-push-notifications

プッシュソースの識別

VAPIDキーペアを使用してアプリケーションサーバーを一意に識別する。

・VAPID：Webプッシュプロトコルの任意のアプリケーションサーバー識別
・VAPIDキーペア：公開鍵と秘密鍵（プライベートキー）

公開鍵：通知をサブスクライブするためのサーバー識別子として使用
秘密鍵：プッシュサービスにメッセージを配信する前に、アプリケーションサーバーがメッセージに署名するために使用

VAPIDキーペアの生成（node web-pushを使用）

インストール
npm install web-push -g

次のコマンドを使用してVAPIDキーペアを生成できます。
web-push generate-vapid-keys --json

ServiceWorkerと公開鍵で、通知をサブスクライブ

注※VAPIDキー生成しないと、通知をサブスクライブできません。DOMException：登録に失敗しました-別のapplicationServerKey（またはgcm_sender_id）のサブスクリプションが既に存在します。 applicationServerKeyを変更するには、サブスクライブを解除してから再サブスクライブします。

・Angular Service Workerをインストール
ng new angular-pwa-app --service-worker

・既存のアプリケーションに追加することもできます。
ng add @angular/pwa --project <name of project as in angular.json>

ブラウザの通知設定
chrome：// settings / content / notifications

実行script

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config ./proxy.json --live-reload false",
"server": "ts-node -P ./server/server.tsconfig.json ./server/server.ts",
"start:prod": "ng build --prod && cd dist && http-server -c-1 -P http://localhost:9000 .",
},
＃開発バックエンドサーバーの実行（Node RESTAPIサーバー）
 npm run server

＃開発UIサーバーの実行（本番ビルド＋http-server起動）
npm run start:prod
注※Service Workerをアクティブにするには、本番用ビルド必要です。
注※HTTPサーバーが必要なので、http-serverをインストールしましょう。

npm start
フロントエンドコードデバッグは、AngularCLI（ng serve）を使用します。

Firebase CloudMessaging

たとえば、Chromeブラウザの場合、すべてのプッシュメッセージは、アプリケーションサーバーから直接ではなく、Firebase CloudMessagingサービスを介してブラウザに送信されます。

この場合、Firebase CloudMessagingはChromeブラウザプッシュサービスとして機能します。各ブラウザが使用するプッシュサービスは変更できず、ブラウザプロバイダーによって決定されます。

サブスクリプションオブジェクトのエンドポイント：これには、Firebase CloudMessagingエンドポイントへの一意のURLが含まれます。このURLは、このサブスクリプションにプッシュ通知を送信するためにアプリケーションサーバーによって使用されるブラウザプッシュサービスへのパブリックな推測できないエンドポイントです。

メッセージは、サブスクリプションオブジェクトのエンドポイントプロパティで指定されたFirebase CloudMessagingエンポイントに送信されます。

プッシュサービスがメッセージ（この場合はFirebase Cloud Messaging）を受信すると、エンドポイントの一意のURLに基​​づいて、メッセージの転送先のブラウザインスタンスを認識します。

ウェブプッシュ証明書 by Introducing VAPID for server identification
Firebase Cloud Messaging では、外部プッシュ サービスとの接続に Application Identity の鍵ペアを使用できます。VAPIDを使用すると、プッシュメッセージを送信するためのFCM固有の手順を回避できます。Firebaseプロジェクト、、、gcm_sender_idまたは Authorizationヘッダーは不要になりました。
 https://developers.google.com/web/updates/2016/07/web-push-interop-wins#introducing_vapid_for_server_identification

web-push
https://github.com/web-push-libs/web-push/
サーバーからのメッセージの送信
https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

実行結果（購読ボタン：swPush.requestSubscription）

Received Subscription on the server:  
{ endpoint:
  'https://fcm.googleapis.com/fcm/send/--',
 expirationTime: null,
 keys:
  { p256dh:
     '--',
    auth: '--' } 
}

Notification Subscription: 
 PushSubscription {endpoint: "https://fcm.googleapis.com/fcm/send/--", expirationTime: null, options: PushSubscriptionOptions}
main-es2015.550c4708b7b716fd6f93.js:1 
Sent push subscription object to server.

実行結果（送信ボタン：newsletterService.send().subscribe()）

(server)Total subscriptions 1

(browser)Sending Newsletter to all Subscribers ...

新しい通知に表示...

Thanks

ブラウザー状況
https://developer.mozilla.org/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API

https://mdn.github.io/to-do-notifications/

Progressive Web App のデバッグ
[Cache Storage] ペインには、Service Worker のキャッシュが表示されます。
[Clear Storage] ペインでは、ボタンを 1 回クリックするだけで、Service Worker の登録を解除し、すべてのストレージとキャッシュを消去することができます。https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps?hl=ja

Angular Push Notifications: a Complete Step-by-Step Guide

angular-university/angular-pwa-course

https://qiita.com/gtk2k/items/6deec05f7508332d8338

IBM Cloud
https://github.com/ibm-bluemix-push-notifications/HelloPush-PWA
https://github.com/ibm-bluemix-push-notifications/Web_HelloPush

IBM Cloud Docs

Angular9+Firebase
http://omnidecoder.com/angular-9-firebase-push-notification/
https://github.com/iamgajanan/Angular-9-Firebase-Push-Notification
https://firebase.google.com/docs/cloud-messaging/js/client

Capacitor
javaScript、HTML、およびCSSを使用して、クロスプラットフォームのiOS、Android、およびPWA（プログレッシブWebアプリ）を作成します。IonicをベースとしたWebアプリをiOSアプリやAndroidアプリとしても利用できるようにするためにフレームワークです 。Webアプリからネイティブの機能（API）を利用する（ブリッジさせる）ことができるため、Webアプリ、iOSアプリ、Androidアプリをワンソースにまとめることができます。
https://dev.classmethod.jp/articles/capacitor-getting-started/#toc-9

ServerSideはPhyson？（ユニーク）

PythonとAngularの組み合わせが最強な理由 | NP-Systems