Blog

jQueryで簡単にデスクトップ通知を実装する方法

2014.11.25Cat:Blog javascript jQuery 役員

前々からデスクトップ通知(desktop notifications)をしてくるWebサービスが気になっており、

どうやってやっているのかを調べたところ、すごく簡単に実装できたのでメモ

 

調べると色々とやり方があるようだったのだが、ブラウザによって方法が異なり、ちゃんとやるのは難しそうだったので以下のプラグインを使用。

 

<a href=”https://github.com/ttsvetko/HTML5-Desktop-Notifications” target=”_blank”>desktop-notify-min.js</a>

 

サンプルなどがangularjsで書かれており、社内では少し敷居が高そうだったのでjQueryで書きなおした。

 

デモ

 

重要な関数たち

1. permissionLevel()

デスクトップ通知に対するユーザーの設定が帰ってくる。

基本的には以下の3つぷらすその他。

notify.PERMISSION_GRANTED → 許可

notify.PERMISSION_DEFAULT → デフォルト(=全部許可、サイトごとに設定、全部拒否など)

notify.PERMISSION_DENIED → 全部拒否

 

戻り値は上記3つと比較する。

デモの例

 

 

2. notify.isSupported

ユーザーの環境がそもそもデスクトップ通知に対応しているかどうか

動作環境は以下とのこと

Chrome(version 23+), Safari(version6+), Firefox(with ff-html5notifications plugin installed) and IE9+

たぶんそれ以外だとfalseとなる模様

 

3. requestPermission

許可するためのポップアップを出力する。

これがブラウザごとに異なったため苦労したが、1行で完了。

 

4. createNotification

デモだと上記のように設定している。

 

簡単だし便利そうなのでぜひ実際のサービスでも試してみたい

Author Profile

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ