---
title: HTML5でデスクトップ通知を行うサンプル
tags: ["HTML5", "JavaScript", "Notification"]
categories: ["Programming", "JavaScript", "HTML5", "Notification"]
date: 2014-04-13T19:36:52Z
updated: 2014-04-13T19:36:52Z
---

<script>
	var Notification = window.Notification || window.mozNotification || window.webkitNotification;

	Notification.requestPermission(function (permission) {
		// console.log(permission);
	});

	function show() {
		var instance = new Notification(
			"デスクトップ通知のテスト", {
				body: "こんにちは！"
			}
		);

		instance.onclick = function () {
			// Something to do
		};
		instance.onerror = function () {
			// Something to do
		};
		instance.onshow = function () {
			// Something to do
		};
		instance.onclose = function () {
			// Something to do
		};
	}
</script>

<button type="button" onclick="show()">通知のテスト</button>

<h3>JavaScript</h3>
<pre><code class="lang-javascript">var Notification = window.Notification || window.mozNotification || window.webkitNotification;

Notification.requestPermission(function (permission) {
    // console.log(permission);
});

function show() {
    var instance = new Notification(
        "デスクトップ通知のテスト", {
            body: "こんにちは！"
        }
    );

    instance.onclick = function () {
        // Something to do
    };
    instance.onerror = function () {
        // Something to do
    };
    instance.onshow = function () {
        // Something to do
    };
    instance.onclose = function () {
        // Something to do
    };
}</code></pre>


参考: https://developer.mozilla.org/ja/demos/detail/html5-notifications/launch