ブラウザでプッシュ通知が簡単に実装できるJSライブラリ「Push.js」



プッシュ通知が簡単に実装できるJavascriptライブラリ「Push.js」の紹介です。

スマホで お馴染みのプッシュ通知ですが、
Webブラウザ上でも ' Notification API ' という形で デスクトップへのプッシュ通知が利用ができます。

* Push Notification

'Notification API' はブラウザによって使える機能にバラつきがあったりしますが、
デスクトップにダイレクトに通知できるので、使い方次第で面白いことができます。

" アラートの代わりに "
" WebSocketと合わせてリアルタイムで流す新着情報の通知に "
" ログインした時のウェルカムメッセージに "
... etc 

生のままでプッシュ通知を書いていくと Permissionの確認や 通知許可の処理。
その他、条件式の連続でコードが長くなる傾向があります。

そんな 'Notification API' を書きやすくしたラッパーが「Push.js」です。
 

Push.jsのインストール

Push.jsの導入はGitHubのレポジトリページから直接ライブラリを入手する他に、
コマンドライン上からのインストールにも対応しています。
( 対応しているパッケージマネージャー: npm, bower, yarn )

# npm
npm install push.js --save
# bower
bower install push.js --save
# yarn
yarn add push.js
# CDN * scriptタグから直接読み込む場合
https://unpkg.com/push.js/push.min.js

* Push.jsがサポートしているブラウザ
- IE9+, Firefox 22+, Chrome 5+, Safari 6+, Opera 25+
- Android Browser 4.4+, Blackberry Browser 10+
- Opera Mobile 37+, Firefox Android 47

* push通知はブラウザ側で表示を許可する必要があります ( *ドメイン単位で管理 )
[ * モバイルで表示するには有効なSSLドメイン( https )のみ ] 


Push.jsの使い方

Push.jsはプッシュ通知に特化しているライブラリなので、使い方もシンプルです。

'create'メソッドの第一引数に文字列を入れれば、プッシュ通知のタイトルになります。

// minimal example
Push.create('Hello World!');
// 通知バーを閉じる場合
Push.clear();

/* Promiseを使っても書けます */
var promise = Push.create('Hello World!');

promise.then(function(notification) {
    // callback
    notification.close();
});

* 上のスニペットを実行した結果
( ブラウザによって多少外観が変わります )
 

第二引数では'option'を指定することが可能で、プッシュ通知をクリックした時の処理や表示期間などの、
イベント処理を書くことが可能です。

* option内でアイコンを適応してみました

// optionを指定する場合
Push.create("Push.jsのデモ!", {
    body: "何かの通知処理", // 表示テキスト
    icon: 'myIcon.png', // アイコン画像
    timeout: 4000, // 自動的に閉じる時間 * 4秒
    onClick: function () {
     // 通知バーをクックした時のイベント
     window.focus(); // フォーカス
     this.close(); // 通知を閉じる
    }
});

利用出来るオプション
- icon [ String ] : 通知バーのアイコン画像パス * URLも可
- body [ String] : 通知バーの本文
- onClick [ Function ] : バーをクリックした時のイベント
- onClose [ Function ] : バーを閉じた時のイベント
- onError [ Function ] : エラーが発生した時のイベント
- onShow [ Function ] : バーが表示された時のイベント
- tag [ String] : タグ ( 名前 )
- timeout [ Integer ] : バーが消える時間 ( * ミリ秒 )

Google Chromeでは、一度に連続して表示できるプッシュ通知は3つまでですが、
通知があるだけプッシュされます。

* 一度に表示できるプッシュ通知 

' count ' 関数を使うと、現在表示されている通知数が取得できます。

// 現在表示されている通知バー数を取得
Push.count(); 


' Notification API ' は通知許可に "default" "granted" "denied" の3つのステータスを持っています。

- default : 通知を許可するか保留
- granted : 通知を許可
- denied : 通知を拒否

パーミッションのステータスが拒否されている時に処理を実行しても意味が無いので、
そのような時は' Permission.get() '関数を使うとユーザーの許可情報が取得出来ます。

// 許可情報を取得
Push.Permission.get() // denied || granted || denied
// hasを使うとboolで許可情報を取得できます
Push.Permission.has() // true || false

// 実際に使う場合はこのような感じになると思われます
function welcomePush() {
  // 通知許可された時のみ実行
  if (Push.Permission.has()) {
    Push.create("Welcomeメッセージ!", {
      body: "ログインしました",
      icon: "icon.png",
      timeout: 3000,
      onClick: function() {
        window.focus();
        this.close();
      } // ! onClick()
    }); // ! create()
  } // ! if
  
} // welcome

 

Summary

以上がPush.jsの紹介でした。

プッシュ通知はユーザーが表示を許可している必要があるので 制約が多少ありますが、
使い方次第では面白いことができそうです。

社内で使うWebシステムなどでプッシュ通知を導入すると、色々と使い勝手が広がりそうですね!

GitHub : Nickersoft/push.js

 

この記事のカテゴリ
プログラミング

この記事のタグ