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

         

javascript

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

2019年09月24日 8:00 

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サイトで使用するメリットは充分あるのではないかと思います。

関連記事

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!