[JS] Webアプリケーションでデスクトップへの通知機能を作る

メールクライアントソフトなどを入れている場合、メールを受信するとデスクトップ上に通知してくれる機能があったりします。
こういうのをWebアプリケーションでも実装したいと思ったりしてたのですが、gmailでもデスクトップ通知機能があったりしてメールクライアントソフトのようにメール受信するたびにデスクトップ上に通知をしてくれたりするので、Web系のアプリケーションでも実装が可能だったりします。

調べてみるとHTML5のNotificationを使えば簡単にデスクトップ通知を実装することが可能です。
ただ、HTML5なので対応していないブラウザでは利用できません（もちろんIEは論外です）。

デスクトップ通知を実装する

まずはソース。

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>notification</title>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
<script type='text/javascript'>
/**
 * デスクトップ通知機能が有効化をチェック
 */
function checkNotification() {
    if ('Notification' in window) {
        return true;
    } else {
        return false;
    }
}
/**
 * デスクトップ通知を有効にするためにブラウザの通知リクエストを表示
 */
function requestNotification() {
    Notification.requestPermission();
    if (Notification.permission === 'granted') {
        return true;
    } else {
        return false;
    }
}
/**
 * デスクトップ通知へメッセージを表示
 *
 * @param string title : 通知のタイトル
 * @param string message : 通知するメッセージ
 */
function pushNotification(title, message) {
    var options = {
        body: message,
        icon: '/image/itboy.jpg'
    }
    // デスクトップ通知へメッセージ表示
    var notification = new Notification(title, options);
}
if (checkNotification() === false) {
    alert('デスクトップ通知は利用できません');
} else {
    if (sendRequestNotification() === false) {
        alert('ブラウザの通知機能を有効にしてください');
    }
}
</script>
</head>
<body>
<input type='button' id='push' value='デスクトップ通知' onClick='pushNotification(\"通知のテストです\", \"デスクトップ通知\")'/>
</body>
</html>

デスクトップ通知に関して3つの関数を作ってます。
checkNotification()では、使っているブラウザでデスクトップ通知が利用可能かをチェックします。
先にも書きましたが、IEは未サポートなのですがChromeやFireFoxなどでも実装状況はまちまちのようです。

requestNotification()では、ブラウザの通知機能を有効にするようにユーザーにリクエストを送信します。
このメソッドが呼び出された場合、下記のような通知のポップアップがブラウザ上に表示されます。

ここで通知を許可しないとデスクトップ通知は有効に出来ません。
誤ってブロックしてしまった場合は、ブラウザの通知に関する項目（下記のFireFoxの場合は、設定内のコンテンツ→通知）から対象ドメインの通知の情報を一度削除する必要があります。

pushNotification()では、デスクトップ通知にメッセージを表示します。
メッセージの内容と通知の上部に表示するタイトルを指定します。
iconは通知上の画像です（指定しなくても動作はします）。
これでボタンをクリックすると下記のようなデスクトップ通知が表示されます。

余談ですが、普通はこういったボタンをクリックして通知をするようなことはせず、何らかの情報を定期的にチェックして存在すれば通知するといったことをするかと思います（新着メールがあった場合に通知するように）。
この場合に、複数の情報を一度に通知しようとすると処理が連続するためかうまくデスクトップ通知が行われません。

そこで、下記のようにタイマー処理を使って通知を少しずらして実行するようにしたらうまくいきました。

setInterval(function() {
pushNotification(msg, title)
}, 2000);

細かな関数の仕様などは、下記のサイトによくまとめられていますので合わせて確認してください。

Notification - Web API インターフェイス | MDN

[PR]低価格・携帯対応のSSLをお探しなら　ジオトラストクイックSSLプレミアム

[PR]大人気ドコモ回線LTE使い放題SIMはこちら！

[PR]未経験からプロのエンジニアを育てるオンラインブートキャンプ

[jQuery] 組織図が簡単に書けるOrgChart

Datepickerで日付を連続して選択できるようにする

[jQuery] 外部JavaScriptファイル読込みに関する考察

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

[JS] Webアプリケーションでデスクトップへの通知機能を作る

デスクトップ通知を実装する