HTML5を使用して簡単にデスクトップ通知が実現出来る「Notification」の使用方法をご紹介。
今までアラート等で通知するしかなかった通知情報がデスクトップに出せるようになるので、色々なことが出来そうです。

サポートバージョン

ブラウザ	バージョン
Chome	22～
FireFox	22～
InternetExplorer	サポート外
Opera	25～
Safari	6～

サンプル

通知ボタンをクリックすると以下のように通知許可を求められるので許可してください。


許可された後、デスクトップに通知が表示されます。


通知

ソース

サンプルで使用したソースの紹介。

<script>
function show() {
	// Notificationを取得
	var Notification = window.Notification || window.mozNotification || window.webkitNotification;

	// Notificationの権限チェック
	Notification.requestPermission(function (permission) {
		// console.log(permission);
	});

	// 通知インスタンス生成
	var instance = new Notification(
		"お知らせタイトル", // 通知タイトル
		{
			body: "1\r\n2\r\n3", // 通知内容
			icon: "http://scrap.php.xdomain.jp/wp-content/uploads/favicon.ico", // アイコン
		}
	);
	instance .config({autoClose: 1000}); // 1000[ミリ秒後]に通知を閉じる
	instance.onclick = function () {
		console.log("onclick");
	};
	instance.onerror = function () {
		console.log("onerror");
	};
	instance.onshow = function () {
		console.log("onshow");
	};
	instance.onclose = function () {
		console.log("onclose");
	};
}
</script>
<button type="button" onclick="show()">通知</button>

更にonclose部分に以下を追加すると通知が消された時点で画面を開くことが可能になります。

	instance.onclose = function () {
		console.log("onclose");
		window.open().close()
		window.focus()
	};

これを使用すれば、長時間処理の終了時に通知したり、node.js等と合わせて通知をしたりなど様々な事が出来そうです。
ただ、IEではサポートされていないので、気をつけなければいけません。



«前の記事：【祝1周年】いつの間にかブログを初めて1年が経ちました。