- author@酒井 涼2017年2月6日 - come from [ferret-plus.com](https://ferret-plus.com/6035) # 世界一簡単にブラウザのプッシュ通知を実装できる「Push.js」の使い方を徹底解説 スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの「Web Notification API」というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 ## プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユーザーに登録してもらわなければいけないので、ややハードルが高かったのも事実です。 一方、プッシュ通知の場合は、Webサイト上で許可するだけで通知許可が有効になるため、ユーザーは気軽に利用することができます。 プッシュ通知を使うことで、自分で情報を取りにいかなくても向こうからお知らせがやってくるのです。 ## Push.jsとは？  [nickersoft.github.io/push.js](https://nickersoft.github.io/push.js/) Push.jsは、Web Notification APIをブラウザ経由で簡単に制御することができるjQueryプラグインです。 非常にシンプルなコードを書くだけで簡単にプッシュ通知を実装することができます。 ブラウザ経由でのプッシュ通知は、一度ドメインの許可を出せば、設定を変更するまでプッシュ通知を送ることができます。 例えば、Push.jsの公式サイトで「DEMO」というボタンを押してみましょう。 ブラウザ上でプッシュ通知を許可するようにポップアップが表示されました。 許可をして、もう一度「DEMO」というボタンを押してみましょう。  すると、このような形でプッシュ通知が出てきました。 Push.jsを使えば、アイコンやタイトル、メッセージなどを自由にカスタマイズすることができます。 ## Push.jsを使って簡単にブラウザ通知を実装する方法 ### 1. ライブラリの読み込み それでは、具体的にブラウザ通知を実装する方法を確認していきましょう。 まず最初にやるべきことは、Push.jsの読み込みです。 ライブラリはnpn経由でのインストールやローカルに落としてからアップロードする方法もありますが、最も簡単なのはCDN経由で読み込めるように以下のコードをコピー＆ペーストすることです。 ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script> ``` Push.jsはプッシュ通知を行うために必ずしも必要なファイルというわけではありませんが、Web Notification APIを操作するのに最も簡単な手段です。 Push.jsには通知の許可やクロスブラウザ対応などの処理が含まれているので、特別な処理を施す必要はありません。 ### 2. 通知の許可 先ほどの「DEMO」でも見ていったように、こちらからプッシュ通知を送る前に、ユーザーに通知許可を設定してもらう必要があります。 モダンブラウザでは、以下のように許可を得るためのリクエストダイアログが表示されます。  ▲ CodePenでリクエストダイアログを表示させてみました Push.js経由でプッシュ通知を送れば、最初の通知を送る際に許可が出ていなければ、自動的にリクエストダイアログが表示されます。 しかし、たいていはこちらから許可を出したい場合のほうが多いでしょう。 その場合は、JavaScript部分に下記のコードを記載しておきます。 -----太长了先搬到这儿吧。。。