WEBサイトにプッシュ通知機能をつけるなら簡単なPush.jsがおすすめ

こんにちは、hgmです。

今回は、WEBサイトへ簡単にプッシュ通知をつけることができる「Push.js」をご紹介させていただきます。

プッシュ通知とは

スマホのアプリの通知と同じように、WEBサイトから通知できます。

正確には、WEBサイトというよりブラウザからの通知となります。

ユーザーはWEBサイト上で通知の許可をすると有効になり、通知を受け取ることができるようになります。

面倒な手間が不要で利用することができますね！

実装デモ

今回ご紹介する「Push.js」は、Web Notification APIを使用し簡単に実装することができるjQueryプラグインです。

ユーザーが一度プッシュ通知の許可を出せば、変更されるまで通知を送ることが可能です。

実際に公式のデモで確認してみましょう。

・Push.js

https://pushjs.org/

トリガーとなる「View Demo」ボタンをクリックします。

ブラウザのアドレスバー下に下記のような表示が出るので、「許可」をクリックします。

許可するとブラウザ右上に通知が届きます。

実装方法

それでは具体的な実装方法をご紹介いたします。

1.ライブラリを読み込む

Githubよりpush.min.jsをダウンロードするか、CDNで簡単に読み込みましょう。

・CDN

https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js

2.通知メッセージの作成

Push.createメソッドを呼び出し、メッセージの作成を行います。

下記コピペで部分的に変更して使用可能です。

Push.create("タイトルが入ります", { //タイトルの入力
    body: "内容が入ります", //内容の入力
    icon: '/icon.png', //アイコンの設定（デフォルトはブラウザのアイコンが表示されます）
    timeout: 4000, //通知が消えるタイミング
    onClick: function () { 
        window.focus(); //「window」にフォーカスする
        this.close(); //通知を消す
    }
});

他のオプションについては、公式サイトをご確認ください。

まとめ

プッシュ通知は実装が難しいと思っていましたが、ライブラリを使用することで簡単に実装できます。

現在対応しているブラウザがiOSを除きChrome 42以上、Firefox 44以上と限られますが、

ブログやECサイトなど、更新頻度の高いWEBサイトで使用するメリットは充分あるのではないかと思います。