webアプリケーションに通知を盛り込んでみた備忘録

はじめに

先日参加したハッカソンにてweb通知を作ることになりました。その備忘録を残せたらなと思います。

書くこと

学んだ範囲で以下のことを書きます。

• web通知の動き
• web通知の実装コード紹介

通知の動き

FCMを用いた通知の動きは一般的にはこのようなイメージになっております。

(引用元：Generic Event Delivery Using HTTP Push)

かなり簡略化された図ですが単語を解説していきます。(僕が分かるレベルまで噛み砕いていきます)

登場人物

名前	説明
ユーザーエージェント( UA )	ユーザーのWebブラウザ メッセージが受信されたら、UA 内に存在する Service Worker の push イベントが発火され、パラメータ(データ)を通じて取得される
プッシュサービス( PS )	UA と AS の中継となるサーバ 通常はウェブブラウザのベンダがこのサービス（サーバ）を提供しており、24時間稼働している 今回自分は FCM を採用
アプリケーションサーバ( AS )	ウェブサイトを運営しているウェブサーバ 通知を送る元であり、通知は PS に向けて送信する(だから UA が起動していなくても問題ない) UA に通知を送る場合は、PushSubscription(情報) 内に格納されている Push Service の endpoint に対してメッセージを送信する バックエンド

プッシュ通知(Push Message)とは

• ここでは AS から PS , UA　へと通知を送ることを指す

購読とは

• サイトを訪れたユーザーに対してプッシュ通知を配信するための購読要求ダイアログを表示すること

notification.js

function notifyMe() {
  if (!("Notification" in window)) {
    // ブラウザーが通知に対応しているか調べる
    alert("このブラウザーはデスクトップ通知には対応していません。");
  } else if (Notification.permission === "granted") {
    // 通知権限が既に付与されているかどうかを調べる。
    // その場合は、通知を作成する。
    const notification = new Notification("こんにちは！");
    // …
  } else if (Notification.permission !== "denied") {
    // ユーザーにその権限を要求する必要がある
    Notification.requestPermission().then((permission) => {
      // ユーザーが受け入れたら、通知を作成する。
      if (permission === "granted") {
        const notification = new Notification("こんにちは！");
        // …
      }
    });
  }

  // 最後に、ユーザーが通知を拒否している場合は、これ以上
  // ユーザーに迷惑をかける必要はありません。
}

(引用元：Notification.requestPermission())

• ユーザー側ではこのようなダイアログが表示されます

PushSubscriptionとは

• サブスクリプション情報を含むオブジェクト
• MDNはこちら

{
  "endpoint": "https://example.com/test-text...",
  "keys": {
    "p256dh": "BNcRdreALo3w...",
    "auth": "tBHItJI5svb..."
  }
}

FCM

今回はプッシュサービスとして Firebase Cloud Messaging を使用しました。
詳しくは紹介しませんが、色々な機能を提供しているようです。

• デバイス間やプラットフォーム間を統一された方法で通知を送信
• トークンの管理
• デバイスへの通知配信

最後に

実際に実装した際にはサービスワーカーの挙動だったり、choromeの設定だったりで動かない期間が多くハッカソンに使うべきではなかったなと感じました。苦労した実装を今後また記事にします。

また、通知に関して間違っている点があればコメントいただけますと幸いです。

参考文献

サーバーからブラウザを通じてデスクトップ通知する方法（Push API を利用）
Generic Event Delivery Using HTTP Push
Firebase Cloud Messaging
MDN