PWAの根幹技術、Notifications APIの使い方

アプリでは当たり前になっているプッシュ通知ですが、Webブラウザ向けにはNotifications APIが用意されています。スマートフォンではまだ実装されていませんが、デスクトップ向けであれば十分使える状態になっています（Notifications APIはPush APIとは別です）。

今回はNotifications APIの実装方法を紹介します。

Notifications APIとPush APIの違い

Push APIはサーバからブラウザに対してプッシュ通知を送る仕組みで、Service Workerを利用します。Notifications APIはサーバサイドが不要で使えますが、Webブラウザがそのサイトを表示している時にしか使えません。

許可状態を知る

まず大事なのがユーザが通知を受け取ると許可しているかどうかです。それを調べるには Notification.permission を使います。値は3つあります。

• default
  まだ許可を求めていません（初期値）
• granted
  通知を許可しています
• denied
  明確に拒否しています

そのため、deniedの時には処理を行わないというのが基本になるでしょう。

許可を得る

許可を得るのは Notification.requestPermission(); で行います。

grantedが得られれば許可を得た状態です。

通知を作成する

通知はこんな形で簡単に作成できます。

通知を閉じる

表示した通知を閉じる場合は、通知オブジェクトのcloseを使います。

通知のイベント

通知には幾つかのイベントが設定されています。

• onclick

  通知をクリックした時に呼ばれます

• onerror

  エラーが出た時に呼ばれます

• onclose

  閉じた際に呼ばれます

• onshow

  表示した時に呼ばれます

使いどころ

Notifications APIはWebページを表示している時にしか使えません。そのため、アプリのプッシュ通知のように使っていないユーザを呼び起こすのには向きません。むしろ時間がかかる処理でユーザを待たせてしまう時に完了をお知らせしたり、チャットなどで別ページを開いている時にお知らせすると言った使い方になるでしょう。

まとめ

WebSocketなどと組み合わせればサーバから通知を出したい時に命令を出すと言った使い方はできそうです。とは言え、基本的にはWebページ上で起きた変化をユーザに気付かせると言った目的で使うのが良さそうです。