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

 

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

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

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

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

 

まとめ

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

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

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

関連記事

この記事を書いた人

アバター

hgm

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