本記事では、ブラウザへのプッシュ通知を最短距離で実装する。

本記事で使う言語・サービス・ライブラリ

Google Chrome
（Firefoxでは、うまくいったりうまくいかなかったりしたのでChromeをおすすめします。）
HTML / Javascript（フロントエンド）
npm
webserver (http-server)
(Push通知設定は、file://からできない)
Web-Push (プッシュ通知送信用)

プッシュ通知の仕組み

基本的な仕組み

留意点：

プッシュサービスは、ブラウザ作成者が提供する。独自サービスを使うことができない。
本記事では、アプリケーションサーバを使わない。人力とweb-pushツールを使う。

今回の仕組み

以下の図は、本記事で使う仕組みを表す。

詳しい流れ

以下の図は、処理の詳しい流れを表す。

ウェブアプリ：ブラウザで開いているサイト。
サービスワーカ：ブラウザで実行するワーカスレッド。
プッシュサービス：ブラウザメーカが固定で指定するサービスのことです。
登録情報：登録（ブラウザ）を識別するための情報そのうち、終点URLも含まれている。
アプリケーションサーバ：プッシュ通知の発送を起動するサーバ

実装

ウェブサーバ

通常、Push通知の利用には、SSLが必須ですが、サバーは、LocalhostであればSSLがなくても使えます。

インストール

http-serverが使いたいのでnpmプロジェクトを作成する。ただし、ウェブサーバは、ほとんど関係ないのでお好みのもので良い。

npm init 
npm install http-server

実行

npx http-server ./ --port 4040

= サーバルートディレクトリー：現在のディレクトリー

ファイル作成

以下の三つのファイルを作成し、サーバのルートディレクトリーに置く。

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8" />
    <style>
      div{ margin: 8px;}
      button {padding: 8px;}
    </style>
    <script src="./push.notification.helper.js"  type="text/javascript" ></script>
  </head>

  <body>
    <div style="padding-top: 20px;padding-left: 30%;">
      <div>
        <button onClick="javascript: notification_isSupported()">
          （１）Push通知は、使えるかを確認
        </button>
      </div>
      <div>
        <button onClick="javascript: notification_askForPermission()">
          （２）Push通知権限を求める
        </button>
      </div>

      <div>
        <button onClick="javascript: notification_startServiceWorker()">
          （３）サービスワーカを起動
        </button>
      </div>

      <div>
        <button onClick="javascript: notification_test_showNotification()">
          （４）試しにプッシュ通知を表示<br>
        </button>
        （何も表示されな場合、ブラウザはOS上「通知権限」を持つかを確認する）
      </div>

      <div>
        <button onClick="javascript: notification_subscribe()">
          （５）プッシュサービスに登録
        </button>
      </div>

      <div>
        （６）web-pushを使ってプッシュ通知を送信する。
      </div>

    </div>
  </body>
</html>

push.notification.helper.js



/**
 * プッシュ通知が使えるかを確認
 */
function notification_isSupported() {
  const isSupported = "serviceWorker" in navigator && "PushManager" in window;
  if(isSupported){
    console.log("✅（１）プッシュ通知機能が使える");
  } else {
    console.log("❌（１）プッシュ通知機能が使えない");
  }
}

/**
 * ブラウザ上のプッシュ通知の許可を得る
 */
function notification_askForPermission() {
  // request user grant to show notification
  Notification.requestPermission(function(result) {
    return result;
  }).then(
    (success) => {
      console.log("✅ （２）プッシュ通知の権限がある");
    },
    (fail) => {
      console.log("❌ （２）プッシュ通知の権限がない");
    });
}



/**
 * プッシュ通知を処理する「サービスワーカ」を立ち上げる。
 */
function notification_startServiceWorker() {
  return navigator.serviceWorker.register("push.notification.worker.js").then(
  (registration) => {
    console.log("✅ （３）サービスワーカを立ち上げた");
  },
  (error) => {
    console.log("❌ （３）サービスワーカを立ち上げることができなかった。プッシュ通知を授受できない");
    console.log(error);
  });
}


/**
 * 通知表示機能を試す（通知を送信しない）
 * 条件：notification_startServiceWorkerが成功した
 */
 function notification_test_showNotification() {

  const title = "通知のタイトル";
  const options = {
    body: "通知の中身",
  };

  navigator.serviceWorker.ready.then((serviceWorker) => {
    serviceWorker.showNotification(title, options).then(
      (success) => {
        console.log("✅ （４）通知を表示できた（つもり）");
      },
      (error) => {
        console.log("❌ （４）通知を表示できません");
        console.log(error);
      });
  });
}

/**
 * ブラウザのプッシュサービスに登録する
 * 条件：notification_startServiceWorkerが成功した
 */
function notification_subscribe() {
  const pushServerPublicKey = 'BIN2Jc5Vmkmy-S3AUrcMlpKxJpLeVRAfu9WBqUbJ70SJOCWGCGXKY-Xzyh7HDr6KbRDGYHjqZ06OcS3BjD7uAm8';
  return navigator.serviceWorker.ready.then(
    (serviceWorker) => {
      // subscribe and return the subscription
      return serviceWorker.pushManager
      .subscribe({
        userVisibleOnly: true,
        applicationServerKey: pushServerPublicKey
      }).then(
      (subscription) => {
        // TODO: send subscription.endpoint to server
        console.log ("✅ （５）登録が成功した。次の情報を使ってプッシュ通知を送れる")
        console.log (subscription.toJSON())
        _showWebPushCommand (subscription.toJSON());
        return subscription;
      },
      (error) => {
        console.log("❌ （５）プッシュサービスに登録できなかった");
        console.log(error);
      });
    }
  );
}

/**
 * プッシュ通信をを送信する多面おweb-pushコマンドコマンドを表示
 **/
function _showWebPushCommand(subscriptionInfo)
{
  const command = ["npx", "web-push",
  "send-notification",
  "--endpoint=" + subscriptionInfo.endpoint,
  "--auth=" + subscriptionInfo.keys.auth,
  "--key=" + subscriptionInfo.keys.p256dh,
  "--payload=hello",
  "--vapid-pubkey=BIN2Jc5Vmkmy-S3AUrcMlpKxJpLeVRAfu9WBqUbJ70SJOCWGCGXKY-Xzyh7HDr6KbRDGYHjqZ06OcS3BjD7uAm8",
  "--vapid-pvtkey=bdSiNzUhUP6piAxLH-tW88zfBlWWveIx0dAsDO66aVU",
  "--vapid-subject=mailto:asdf@gmail.com",
  ];

  console.log("これでプッシュ通信を送ってみてください。");
  console.log(command.join(" "));
}

push.notification.worker.js

function receivePushNotification(event) {
  const options = {
    data: "some data",
    body: "some body",
  };
  event.waitUntil(this.registration.showNotification("some title", options));
}
this.addEventListener("push", receivePushNotification);

function openPushNotification(event) {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data));
}
this.addEventListener("notificationclick", openPushNotification);

プッシュ通知を送信

npm install web-pushでweb-pushをインストールする。
- web-pushは、「Web Push API」に沿ってプッシュサービスと連絡が取れる。他のツールやライブラリも使用可能。
ブラウザでhttp://localhost:4040を開く。
ブラウザのコンソールを開く。
ボタン（１）〜（５）をクリックする。
ボタン（５）をクリックしたらコンソールにweb-pushの命令が出力されます。
web-pushコマンドをターミナルで実行する。
メッセージが届く。

ここからは？

push.notification.helper.jsのnotification_subscribeでは、サーバの公開鍵を使う。ここは、自分のサーバの公開鍵を使うべき。
_showWebPushCommandでは、vapid-pubkeyとvapid-pvtkeyを使う。ここは、自分が生成した公開鍵と秘密鍵を使う。
ステップ（５）で受け取ったデータを使ってプッシュ通知を送信した。本番では、受け取ったデータをプッシュサーバに送る。
今回は、プッシュ通知を手動で送信した。本番では、自動的にメッセージを通信したい。
今回は、固定の通知内容をブラウザに表示した(push.notification.worker.js)。本番では、プッシュサービスから受け取ったデータを表示したい。

参考文献

概要：W3C: pushmanager subscribe
概要：Mozilla: Push notifications in Firefox
概要：Mozilla: PushAPI
プログラミング： Google CodeLabs: Push notifications