![見出し画像](https://assets.st-note.com/production/uploads/images/41512440/rectangle_large_type_2_b62481e0fc5fe95e2497620a16f7b89b.png?width=1200)
Angular/プッシュ通知(概要)
背景
過去にプッシュ通知が悪用されることがあった。今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っており、 Safari もしばらく前からこれを行っています。
加えて、 Chrome と Firefox では、サイトが安全なコンテキスト (すなわち HTTPS) ではない限り通知を要求することができず、また別オリジンの <iframe> から要求された通知を許可することができなくなりました。
Target
Angular ServiceWorkerを使用してAngularアプリケーションにWebプッシュ通知を実装する方法
プッシュ通知の概要
・Push API:メッセージをサーバーからブラウザーにプッシュできるようにするもの。
・Notifications API:メッセージがブラウザーに到達したときにメッセージを表示できるようにするもの。
・Pushサーバー:ブラウザプッシュサービスプロバイダー。(ChromeやFirefoxなどプッシュメッセージを管理)※FCM:Firebase CloudMessaging
プッシュソースの識別
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
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
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?(ユニーク)