スマートフォンアプリではおなじみのプッシュ通知。
実は、Webブラウザからもできることをご存知でしょうか。

JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。
しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。

今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。

プッシュ通知とは？

これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。
しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユーザーに登録してもらわなければいけないので、ややハードルが高かったのも事実です。

一方、プッシュ通知の場合は、Webサイト上で許可するだけで通知許可が有効になるため、ユーザーは気軽に利用することができます。
プッシュ通知を使うことで、自分で情報を取りにいかなくても向こうからお知らせがやってくるのです。

Push.jsとは？

image4.jpg
https://nickersoft.github.io/push.js/

Push.jsは、Web Notification APIをブラウザ経由で簡単に制御することができるjQueryプラグインです。
非常にシンプルなコードを書くだけで簡単にプッシュ通知を実装することができます。

ブラウザ経由でのプッシュ通知は、一度ドメインの許可を出せば、設定を変更するまでプッシュ通知を送ることができます。
例えば、Push.jsの公式サイトで「View Demo」というボタンを押してみましょう。

image5.jpg

すると、ブラウザ上でプッシュ通知を許可するようにポップアップが表示され、許可を押してみると通知が届きます。

pushdemo.png

Push.jsを使えば、アイコンやタイトル、メッセージなどを自由にカスタマイズすることができます。

Push.jsを使って簡単にブラウザ通知を実装する方法

1. ライブラリの読み込み

それでは、具体的にブラウザ通知を実装する方法を確認していきましょう。

まず最初にやるべきことは、Push.jsの読み込みです。
ライブラリはnpm経由でのインストールやローカルに落としてからアップロードする方法もありますが、最も簡単なのはCDN経由で読み込めるように以下のコードをコピー＆ペーストすることです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js"></script>

Push.jsはプッシュ通知を行うために必ずしも必要なファイルというわけではありませんが、Web Notification APIを操作するのに最も簡単な手段です。
Push.jsには通知の許可やクロスブラウザ対応などの処理が含まれているので、特別な処理を施す必要はありません。

2. 通知の許可

先ほどの「View Demo」でも見ていったように、こちらからプッシュ通知を送る前に、ユーザーに通知許可を設定してもらう必要があります。
モダンブラウザでは、以下のように許可を得るためのリクエストダイアログが表示されます。

request.png
▲ CodePenでリクエストダイアログを表示させてみました

Push.js経由でプッシュ通知を送れば、最初の通知を送る際に許可が出ていなければ、自動的にリクエストダイアログが表示されます。
しかし、たいていはこちらから許可を出したい場合のほうが多いでしょう。
その場合は、JavaScript部分に下記のコードを記載しておきます。

Push.Permission.request();

このコードが読み込まれるだけで、リクエストダイアログが表示されるようになります。
ただし、ユーザーにリクエストダイアログが表示されることを事前に伝えておかないと、ほとんどのユーザーは怪しがって「拒否」を押してしまうかもしれません。

3. 通知の作成

プッシュ通知を表示させるには、Push.createメソッドを呼び出すだけです。
このメソッドには、タイトルやメッセージ、画像などを設定することができます。

Push.create('こんにちは！', {
　　body: '更新をお知らせします！',
　　icon: 'icon.png',
　　timeout: 8000, // 通知が消えるタイミング
　　vibrate: [100, 100, 100], // モバイル端末でのバイブレーション秒数
　　onClick: function() {
　　　　// 通知がクリックされた場合の設定
　　　　console.log(this);
　　}
});

うまくいけば、以下のようにプッシュ通知が返ってくるはずです。

pushing.png

その他の設定については、こちらをご覧ください。