この記事はウェブクルー Advent Calendar 2017の8日目の記事です。
昨日は@wchikarusatoさんの「知ってる様で知らないless」でした。

WEBプッシュ通知とは

スマホアプリで馴染み深いプッシュ通知のWEB版。
アプリを使わずにブラウザの機能で通知を行えるため、アプリのインストールは不要ですが、
通知を受け取って貰うためには、利用者に通知を受け取る「許可」をして貰う必要があります。
スマホだけではなくPCでも使用できます。

実装を始める前に

Service Workerは、HTTPS環境とlocalhostでのみ動作します。

Service Workerとは

ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト。
プッシュ通知だけではなく、リソースのキャッシュ、バックグラウンド同期などもできます。

参考：Service Workerの紹介

実装方法

サーバーキーの確認

Firebase consoleにアクセス
https://console.firebase.google.com/

プロジェクトを追加をクリック

プロジェクト名を入力、国／地域を選択してプロジェクト作成
今回は「sample-webpush」を作成

Overviewの右側にある歯車みたいなマークをクリック

プロジェクトの設定をクリックすると下記のような画面が表示される。

「クラウドメッセージングタブ」を選択すると、
「サーバーキー」「以前のサーバーキー」「送信者ID」が表示される。
ここに表示されている「サーバーキー」を後記する＊＊＊に記述、
「送信者ID」をmanifest.jsonに記述する。

manifest.jsonの作成

manifest.json

{
  "name": "プッシュ通知（サンプル）",
  "short_name": "sample Push",
  "gcm_sender_id": "送信者IDを記述する"
}

#通知の許可を求めるページの作成

permission.html

<html>
<head>
<!-- 上に記載したmanifest.jsonを読み込む -->
<link rel="manifest" href="manifest.json">
<!-- ココから下は、Firebaseの設定「全般」タブの「ウェブアプリにFirebaseを追加」をクリックした時に表示される内容を張り付ける-->
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***"
  };
  firebase.initializeApp(config);
</script>
<!-- ココまで-->
</head>
<body>
</body>
</html>

#Service Workerの登録処理を作成

if ('serviceWorker' in navigator) {
  //serviceworker.jsをSerice Workerとして登録
  navigator.serviceWorker.register('serviceworker.js');
  //navigator.serviceWorker.readyはresolveなPromiseと、
  //serviceWorkerRegistrationオブジェクトを渡す。
  navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
    initialize(serviceWorkerRegistration);
  }).catch(function(err) {
    console.log(err);
  });
}

エンドポイントとトークンを表示させる処理を作成

以下のメソッドをpush_notify.jsというファイルに記述。
##initializeメソッドの作成
register.jsから呼び出されています。

push_notify.js

function initialize(serviceWorkerRegistration) {
  switch (Notification.permission) {
    case 'granted':
      console.log("permission = granted");
      break;
    case 'denied':
      console.log("permission = denied");
      break;
    case 'default':
      Notification.requestPermission(function (permission) {
        // ユーザが許可した場合は、通知を作成する
        if (permission === "granted") {
          serviceWorkerRegistration.pushManager.subscribe({userVisibleOnly: true})
          .then(subscription => {
            showEndpoint(subscription);
          })
          .catch(e => console.log(e));
        }
      });
      break;
    default:
      break;
  }
}

showEndpointメソッド追加

push_notify.js

function showEndpoint(subscription) {
  console.log("endpoint:" + subscription.endpoint);
  console.log("token   :" + getToken(subscription.endpoint))
}

getTokenメソッド追加

push_notify.js

function getToken(subscription) {
  let token = subscription.split("/");
  return token[token.length - 1];
}

serviceworker.jsの作成

serviceworker.js

self.addEventListener('push', function (event) {
    let title = "プッシュ通知（サンプル）";
    let body = "ココに本文を設定します。\rプッシュ通知のサンプルです。";

    event.waitUntil(
        self.registration.showNotification(title, {
            body: body,
        })
    );
});

構造

今回は、下記のように全て同一階層に配置します。

root/
　┣━　manifest.json
　┃
　┣━　permission.html
　┃
　┣━　register.js
　┃
　┣━　push_notify.js
　┃
　┗━　serviceworker.js

動作確認

(1) ブラウザを起動しデベロッパーツールを起動します。
(2) permission.htmlにアクセスします。
(3) ブラウザの右上あたりに下記のようなポップアップ画面が現れるので「許可」を押下します。

(4) デベロッパーツールのコンソール下記2つのログが出力されている事を確認します。

endpoint:https://android.googleapis.com/gcm/send/*****
token   :*****

(5) (4)のtokenとウェブ API キーを下記CURLコマンドに埋め込みます。
※###ウェブ API キー###は、Firebase consoleで作成したプロジェクトに表示されているウェブ API キーを設定

curl --header "Authorization: key=###ウェブ API キー###" --header Content-Type:"application/json" https://fcm.googleapis.com/fcm/send -d "{\"registration_ids\":[\"###(4)で取得したtokenを埋め込む###\"]}"

(6) CURLコマンドを実行すると、(3)を実施したブラウザに下記のような通知が表示されます。

通知が表示されない場合の確認ポイント

Service WorkerはHTTPS通信でのみ動作するため、動作環境がHTTPSかどうか確認する
CURLに正しいウェブ API キーを設定しているかどうか。サーバーキーを設定していませんか？
CURLに正しいtokenが設定されているかどうか。途切れていませんか？
CURLにtokenとウェブ API キーを埋め込んだときに、必要な文字を消していないかどうか。

まとめ

今回は、固定のメッセージが記述されたポップアップを表示させる方法について記述しましたが、
利用者の属性に合わせた通知（利用者ごとに異なるメッセージなど）を行うことも出来ます。
メッセージ付きプッシュ通知を送る場合は、メッセージの暗号化などを行う必要があり、
少しだけ手間が増えてしまいますが、用途は格段に広がると思います。

明日は、@keigo_magami さんです。よろしくお願いします。

最後に

ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。

開発エンジニアの募集
 フロントエンドエンジニアの募集
 データベースエンジニアの募集