ファイアウォール(雲メッセージ)でPWAプッシュ通知-パート1

あなたのPWAの通知をプッシュ

今までどのようにあなたのアプリに有名な/迷惑プッシュ通知を追加する疑問がありますか?さて、このチュートリアルではFirebase Cloud Messaging .
注:このチュートリアルでは、pwasとサービスの労働者にいくつかの基本的な知識が必要です.
あなたは、PWAとサービス労働者に私のイントロを見てみることができます
PWAと通知について.
始める前に、通知APIとプッシュAPIが同じではないことを明確にする必要があります.人々はそれらをすべての時間を混乱させる.
プッシュAPI:プッシュAPIは、Webアプリケーションは、Webアプリケーションがフォアグラウンドにあるかどうかをユーザーからエージェントにロードされているかどうかをサーバーからプッシュメッセージを受信する機能を提供します.これは、開発者は、タイムリーな新しいコンテンツとの良好な約束に結果を選ぶユーザーに非同期の通知と更新を提供することができます.

しましょう！

最終的なコードは、レポの内部の最終的な枝にあります.

クローンこのレポhttps://github.com/devpato/pwa-FCM-notifications-tutorial

あなたが見ることができるように、私はすでにあなたのために作成されたアプリケーションの基本的な構造を持っているので、我々は唯一のFireBSAE雲メッセージングサービスを使用してプッシュ通知を介してメッセージを送信する方法について心配するつもりです.

インデックスに移動します.HTMLファイル.あなたのためにFirebaseをインポートしました.

<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-messaging.js"></script>

ジャバスクリプト

FireBaseへ移動します.あなたが1を持っていないならば、comと口座を作成してください.

FireBaseコンソールに入ったら、プロジェクトの設定に移動します(プロジェクトがまだない場合は-を作成します).

プロジェクトの設定の内部では、一般的なタブの下にあなたのFirebaseのSDKスニペットを見つけるためにすべての方法をスクロールダウンの下に-これは、新しいプロジェクトを作成し、そこにアプリケーションを追加する必要があることを意味します.コピー/貼り付け、安全な場所に.スニペットは次のようになります.

あなたのインデックスに行きなさい.私があなたのために宣言したグローバル変数の後、以下のファイルをコピーして、ペーストしてください.プロジェクトのカスタマイズされたコードに置き換えてください-ステップ4からのスニペット.

const config = {
  apiKey: "XXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXX",
  measurementId: "XXXXXXXXXXXXXXX"
};

ジャバスクリプト

直後にFireBaseインスタンスを初期化します.

firebase.initializeApp(config);

そして、定数と呼ばれる定数を生成しますmessaging FireBaseメッセージングサービスに設定します.

const messaging = firebase.messaging();

ファイアウォールのクラウドメッセージングから許可を要求する時間.一旦我々が親指を得るならば、彼らは約束として我々にトークンを与えます.

messaging
  .requestPermission()
  .then(() => {
    message.innerHTML = "Notifications allowed";
    return messaging.getToken();
  })
  .then(token => {
    tokenString.innerHTML = "Token Is : " + token;
  })
  .catch(err => {
    errorMessage.innerHTML = errorMessage.innerHTML + "; " + err;
    console.log("No permission to send push", err);
  });

それから、我々は使用するつもりですmessaging.onMessage() メソッド.これは、現在ページを表示しているすべてのユーザーによってデータと通知ペイロードを受け取るために使用されます(ページはフォアグラウンドにあります).

そのために次のコードを追加します.

messaging.onMessage(payload => {
  console.log("Message received. ", payload);
  const { title, ...options } = payload.notification;
});

ファイアウォールメッセージングSWに注目してください.jsファイル.このファイル名はFirebase SDKによって検索されます.ファイルはプロジェクトのルートにある必要があります.Firebase SDKはバックグラウンドで魔法を行い、ファイルをサービスワーカーとして登録します.

あなたのfirebaseメッセージングSWの内部.JSは、MessageingSenderIDで渡すことによってfirebaseアプリケーションを初期化します.送信者IDは、プロジェクトの設定の中に次のように表示できます.

firebase.initializeApp({
  messagingSenderId: "XXXXXXX"
});

バックグラウンドメッセージを処理できるようにFireBaseメッセージのインスタンスを取得します.

const messaging = firebase.messaging();

ジャバスクリプト

バックグラウンドメッセージハンドラ

messaging.setBackgroundMessageHandler(payload => {
  const notification = JSON.parse(payload.data.notification);
  const notificationTitle = notification.title;
  const notificationOptions = {
    body: notification.body
  };
  //Show the notification :)
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

通知をテストする

実行アプリを使用してhttp server

あなたのクラウドメッセージングの設定Firebase Console > Project Settings ) サーバーキーをコピーします.

あなたがいるならばPostman HTTPクライアントの場合、次の手順を実行します.

POST URL :*https://fcm.googleapis.com/fcm/send *
ヘッダ
アプリケーションの種類
認証-キー= serverRangeキー
ボディ

{
    "notification": {
        "title": "Testing Notification!",
        "body": "Firebase is awesome",
        "click_action": "http://127.0.0.1:5501/index.html",
        "icon": "http://the-link-to-image/icon.png"
    },
    "to": "YOUR TOKEN GOES HERE"
}

次に、送信ボタンをクリックします.この時点で、アプリケーションがフォアグラウンドにある場合(現在のブラウザでタブを開いている場合)、コンソールで送信したメッセージが表示されますmessaging.onMessage .
しかし、それがバックグラウンドにあるならば、それは扱われますmessaging.setBackgroundMessageHandler サービスワーカーでは、次のように表示されます.

FireBaseまたは他のホスティングプロバイダに展開することにより、実際のデバイス上でアプリケーションをテストします.あなたがFirebaseの上であなたのアプリをホストしたいならば、見てください.
次のチュートリアルでは、どのように正常に通知を購読し、FireBaseコンソールを使用してそれらをプッシュする方法を示します.
このドット社は、2つの支店を含むコンサルティング会社です.このドットメディアは、Webプラットフォームでの進歩と最新の開発者を維持するための責任部分です.このDOT研究室は、メンタリングやトレーニングなどのメソッドを使用してWebプラットフォームの専門知識チームを提供します.