Sun, Feb 02 2020

PWA の WebPush 機能を試した

firebaseでweb push飛ばすハンズオン

仕事でプッシュ通知について調査する機会があったのでメモ。

# Firebase 導入

参考:
https://firebase.google.com/docs/cli?hl=ja

# Google アカウントを用意

Firebase を利用するために Google アカウントが必要。

# nodejs をインストール

npm を使うため。

# firebase-tools 導入

npm install -g firebase-tools

# firebase-cli 認証設定

npm install -g firebase-tools
firebase login // ログイン

# プロジェクトに Firebase を導入する

プロジェクトディレクトリで以下のコマンドを実行。

firebase init //プロジェクトディレクトリにfirebaseを設定

# 手動で通知を飛ばしてみる

# 通知の許可を求める＆デバイストークンを取得する。

public ディレクトリにindex.html を作成。

<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-messaging.js"></script>
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
    appId: "***",
    measurementId: "***"
  };
  const VAPID =
    "公開鍵";

  // firebaseの初期化
  firebase.initializeApp(firebaseConfig);
  // 通知を許可をユーザに求める
  Notification.requestPermission(function(result) {
    console.log("User choice", result);
    if (result !== "granted") {
      console.log("No notification permission granted!");
    } else {
      console.log("ok!");
      const messaging = firebase.messaging();
      // 公開鍵を設定
      messaging.usePublicVapidKey(VAPID);

    // トークン取得
      messaging.getToken().then(currentToken => {
          // デバイストークンがコンソールに出力される。
        console.log(currentToken);
      });
    }
  });

public ディレクトリに以下の firebase-messaging-sw.js を作成

importScripts("https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/6.2.4/firebase-messaging.js");

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

const messaging = firebase.messaging();