More than 3 years have passed since last update.

Progressive Web Apps (PWA) 学習者のメモその2 (プッシュ通知とFCM)

Last updated at 2020-09-17Posted at 2019-02-24

この文章について

PWAを構成する主要技術のひとつ、プッシュ通知(Push API)について調べたメモです。
合わせて、Firebase を利用したプッシュ通知の実装を行ってみました。

誤記などありましたらご指摘ください。

(2019年2月時点のメモとなります)

PWAの Service Worker についてはこちらの記事をご覧ください。

プッシュ通知について

Web技術を利用した通知用APIは

の2つがある。PWAの世界で「プッシュ通知」について説明する場合、後者の「Push API」を利用したプッシュ通知を指す場合が多い

Push APIを利用したプッシュ通知の仕組み

Google のドキュメントを元にまとめると

初期設定：

サーバー側でプッシュ通知を行うためのアプリケーション・サーバーキー(VAPID)を準備する

プッシュ通知のサブスクリプション：

エンドユーザー(Web訪問者、PWAユーザー)が通知の受信許可を行う
PushSubscription　がエンドユーザーから送信
- PushSubscription には、ユーザーを個別に認識する情報が含まれる
PushSubscriptionをサーバー側で保存する
プッシュ通知を受け取るためのスクリプトをService Worker に登録し、通知の受信体制を作る

プッシュ通知の送信

サーバーからプッシュ通知を送信
PushSubscription に基づき、通知登録をしたユーザーへ個別に通知が送られる
ユーザーがオンラインになったとき、Service Worker を通じてデリバーされた通知をデバイス上に表示する

Firebase Cloud Messaging (FCM)

Firebase には Firebase Cloud Messaging (FCM)というプッシュ通知機能がある。FCMを利用することで、PWAに対してプッシュ通知を送ることができる。

プッシュ通知を送信するサーバーと、プッシュ通知を届けるアプリケーションは別個となる。

(Firebase のプッシュ通知サービス、Firebase Cloud Messaging は両者が一体となっているため把握しづらいが、プッシュ通知のデリバー用サーバーとアプリは別物となる)

ネット上には、PWAのプッシュ通知に Firebase を利用しているケースが多いが、Firebase を使わなくともプッシュ通知の実装は行える。

Googleのコードラボでは、プッシュ通知用のテストサーバーを利用したチュートリアルが公開されている。

Firebase を利用したプッシュ通知の実装

FCMと Firebase JavaScript SDK を利用したプッシュ通知を実装してみる。

大まかな仕様

プッシュ通知を受け取るだけのアプリ
ユーザーが「購読」ボタンを押すことで、プッシュ通知のサブスクリプションを行う。
エンドポイントへPOSTを行うアプリを別途phpで開発、通知を行いときに実行を行う

Firebase の設定

Firebase で新しいプロジェクトを作成し、「プロジェクトの設定」をクリック

Firebase の「クラウドメッセージング」タブから、サーバーキーとウェブプッシュ証明書の鍵ペア(VAPIDKey) を取得

コード

index.html

<!DOCTYPE HTML>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>プッシュ通知の購読</title>
  <link rel="manifest" href="./manifest.json">
  <link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
  <script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-messaging.js"></script>
</head>

<body>

  <div class="col-sm-3"></div>

  <div class="col-sm-6">
    <h1 class="text-center">プッシュ通知の購読</h1>
    <h2 id="newitem" class="text-center"></h2>
    <button id="button" onclick="getSubscription()" class="btn center-block"></button>
  </div>

  <div class="col-sm-3"></div>

  <script>

    // Firebase のSDKを利用し、SenderIDを設定して初期化

    const config = {
      messagingSenderId: "SenderIDを記述"
    };
    firebase.initializeApp(config);
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey("ウェブプッシュ証明書キーを記述");

// Service Worker ファイルを登録し、ボタン表示を行う
    registSW();
    initialButton();

    function initialButton() {
      messaging.getToken().then(token => {
        if (token) {
          document.getElementById("button").innerText = "プッシュ通知を購読中";
        } else {
          document.getElementById("button").innerText = "プッシュ通知を受け取る";
        }
      }).catch(function (err) {
        console.log('An error occurred while retrieving token. ', err);
      });
    }

// トークンが未取得の場合 = プッシュ通知を未購読の場合、プッシュ通知の登録許可を行う
// すでに購読済みの場合、取得済みのFirebase用トークンを表示

    function getSubscription() {
      messaging.getToken().then(token => {
        if (!token) {
          getNotification();
        } else {
          displayToken();
        }
      }).catch(function (err) {
        console.log('An error occurred while retrieving token. ', err);
      });
    }

//  Firebase のSDKを使い、プッシュ通知の購読処理を行う

    function getNotification() {
      messaging.requestPermission().then(function () {
        console.log('Notification permission granted.');
        displayToken();
        initialButton();
      }).catch(function (err) {
        console.log('Unable to get permission to notify.', err);
      });
    }

//　トークン表示

    function displayToken() {
      messaging.getToken().then(token => {
        if (token) {
          console.log(token);
        } else {
          console.log('No Instance ID token available. Request permission to generate one.');
        }
      }).catch(function (err) {
        console.log('An error occurred while retrieving token. ', err);
      });
    }

//　Service Worker ファイルを登録

    function registSW() {

      // Service Worker ファイル「firebaes-messaging-sw.js」を登録する

      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/firebase-messaging-sw.js')
            .then(function (registration) {
              console.log('firebase-messaging-sw.js registration successful with scope: ', registration.scope);
            }, function (err) {
              console.log('firebase-messaging-sw.js registration failed: ', err);
            });
        });
      }
    }
  </script>
</body>

</html>

manifest.json

Firebase のFCMを利用する場合、gcm_sender_idを記述する必要がある。
JSON内の「gcm_sender_id」は、103953800507で固定で、変更できない。

{
  "short_name": "Firebase のプッシュ通知購読アプリ",
  "name": "Firebaseのプッシュ通知購読アプリ",
  "start_url": "index.html",
  "gcm_sender_id": "103953800507"
}

FCMを利用して Service Worker を登録する場合、プッシュ通知を受信するためのサービスワーカーは、ファイル名を必ず「firebase-messaging-sw.js」としなければいけない。また、必ずドメイン直下のルートディレクトリに配置しなければいけない。

firebase-messaging-sw.js内でSDKを利用するため、SDKをインポートし、初期化処理を行う必要がある。

firebase-messaging-sw.js

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

firebase.initializeApp({
  'messagingSenderId': 'SenderIDを記述'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  let notificationTitle = 'Background Message Title';
  let notificationOptions = {
    body: 'Background Message body.',
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

通知用のアプリ

プッシュ通知を送るための、phpコード例。

send.php

<?php

$json = '{
"notification":
{
    "title": "テスト送信",
    "body": "This Is 送信テストです"
},
"to": "index.htmlで取得したトークンを記述"}';

$ch = curl_init();

$headers = array(
    'Content-Type: application/json',
    'Authorization: key=Firebaseの秘密キーを記述'
);

curl_setopt_array($ch, array(
    CURLOPT_URL => 'https://fcm.googleapis.com/fcm/send',
    CURLOPT_HTTPHEADER => $headers,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => $json
));

$response = curl_exec($ch);

curl_close($ch);

?>

phpを実行すると、Firebase の Service Worker がメッセージを取得し、通知表示のを行う

参考情報

MDN

MDNのプッシュ通知に関するリファレンス
https://developer.mozilla.org/ja/docs/Web/API/Push_API

Firebase Cloud messaging のリファレンス

https://firebase.google.com/docs/reference/js/firebase.messaging?hl=ja
https://firebase.google.com/docs/reference/js/firebase.messaging.Messaging?hl=ja

Qiitaの記事

https://qiita.com/rubytomato@github/items/1c07a109f580c138bce7
https://qiita.com/ryo_hisano/items/1171beca22d5a04ed802
https://qiita.com/tomoyukilabs/items/2ae4a0f708a1af75f13e

購読解除はまだ手探り状態？

購読したプッシュ通知を解除する方法はないかと調べたところ、「unsubscribe」というメソッドが見つかった。
https://developer.mozilla.org/ja/docs/Web/API/PushSubscription/unsubscribe

しかし、対応ブラウザがまだ少なく、Chromeでも挙動が安定しなかった。
まだ使える環境が整っていない感じ。
数年後には標準的なメソッドになっているかもしれない。

実装あれこれ

今回の実装では、トークンを取得後、一回ずつphpを実行しているが、実際には

・プッシュ通知を購読したユーザーのトークンをサーバー側へ送信
・サーバー側のDBにトークンを登録
・DBの登録に対して、プッシュ通知を行うループ処理を実行

という流れになりそうです。

FCM用の Service Worker ファイルと、アプリ側のService Worker ファイルを分けて、2つの Service Worker を別個に登録することもできる。

以下のような感じ

function registSW() {

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('./sw.js', { scope: './' })
        .then(function (registration) {
          console.log('SW.js registration successful with scope: ', registration.scope);
        }, function (err) {
          console.log('Sw.js registration failed: ', err);
        });
    });
  }


  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then(function (registration) {
          console.log('firebase-messaging-sw.js registration successful with scope: ', registration.scope);
        }, function (err) {
          console.log('firebase-messaging-sw.js registration failed: ', err);
        });
    });
  }
}

必要以上に Service Worker ファイルを分割すると、管理が大変そうなので、気をつける必要がありそう。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Progressive Web Apps (PWA) 学習者のメモ その2 (プッシュ通知とFCM)