見出し画像

Angular/プッシュ通知(firebase)

2021年2月15日までに、Node.js 8ランタイムを使用するすべての開発者は、Node.js 10ランタイムに更新し、「Blaze」従量課金制のプランに更新する必要があります。
2021年3月15日までに、Cloud Functions for FirebaseのNode.js 8ランタイムがシャットダウンされます。 Node.js 8を使用する機能は、この日付以降無効になります。

フォアグラウンド操作の概要

Pushサービス・プロバイダーの資格情報を入手する
Firebase Cloud Messaging (FCM)  資格情報 (送信側 ID および API キー) を取得する必要があります。
Google Chrome ブラウザー、Chrome のアプリケーションおよび拡張機能、Android デバイスにプッシュ通知を配信するために使用されます。
API キー:IBM Cloud Push Notifications サービスによって安全に保管され、FCM サーバーに接続するために使用されます。
送信側 ID (プロジェクト番号) :クライアント側の Android SDK (Google Chrome ) および JS SDK (Mozilla Firefox) によって使用されます。

Google ユーザー・アカウントでFirebase コンソールにアクセスします。 
・「プロジェクトを作成」をクリックします。 
・「プロジェクトを作成」ウィンドウで、プロジェクト名を指定し、ご利用条件を受け入れて、トグル・スイッチを選択して Google アナリティクス (オプション) を有効または無効にしてから、「続行」をクリックします。
・Google アナリティクスを有効にした場合は「Google アナリティクスの構成 (Configure Google Analytics)」ウィンドウで、「アナリティクスの場所 (Analytics location)」を選択し、ご利用条件を受け入れます。
・「プロジェクトを作成」をクリックします。
新規プロジェクトの準備ができたら 「続行」 をクリックします。
・ナビゲーション・ペインで、「Project Overview」の隣にある設定アイコンを選択し、「設定」 > 「プロジェクトの設定」を選択します。
・「クラウド メッセージング」タブをクリックして、プロジェクトの資格情報 (「サーバー キー」と「送信者 ID」) を表示します。


FCM / GCMとChromeは標準のウェブプッシュプロトコルをサポートするようになりましたが、送信者認証はVAPIDを実装することで実現できます 。つまり、ウェブアプリに「gcm_sender_id」は必要ありません。

この記事では、最初に、既存のサーバーコードをFCMでWebプッシュプロトコルを使用するように変換する方法について説明します。次に、クライアントコードとサーバーコードの両方にVAPIDを実装する方法を示します。

フォアグランドの操作

1.FireBase
Firebase サービスをアプリに追加します。
Firebase Hosting でアプリをホストする。
Authentication でユーザー認証フローを設定する。
Cloud Firestore  にユーザー情報などのデータを保存する。
Cloud Storage に写真や動画などのファイルを保存する。
Performance Monitoring で、アプリのパフォーマンスの問題を見抜く。
Cloud Functions で、バックエンド コードをトリガーする。
Cloud Messaging で、通知を送信する。
https://codelabs.developers.google.com/codelabs/firebase-web/?hl=ja#0

2.AngularFire
プロジェクトを作成する
アプリケーションを実行してデプロイする
Ionic / AngularプロジェクトにFirebaseを追加します
Ionic 4 / AngularアプリをPWAにする
FCMサービスワーカーを追加する
プッシュ構成をWebマニフェストに追加する
許可を求める

?

バックエンドの操作

1.Cloud Functions for Firebase(5.Webアプリデプロイ~)
Firebase SDK for CloudFunctionsを使用してCloudFunctionsをオーサリング。
Auth、Cloud Storage、CloudFirestoreイベントで機能をトリガー。
Firebase CloudMessagingのサポートをウェブアプリに追加。
FirebaseCLIを使用してクラウド関数をデプロイ。https://codelabs.developers.google.com/codelabs/firebase-cloud-functions?hl=ja#0

Cloud Functions for Firebase はサーバーレス 。
HTTPS リクエストによってトリガーされたイベントに応じて、バックエンド コードを自動的に実行できます。JavaScript または TypeScript コードは Google のクラウドに保存され、マネージド環境で実行されます。独自のサーバーを管理およびスケーリングする必要はありません。
https://firebase.google.com/docs/functions?authuser=0

Node
サーバーに Firebase Admin SDK を追加する。
メッセージを送信する。
https://32877.info/view/how-to-PWA-with-Push-Notification-04