【HTML5】Web Notifications API ～ 入門編 ～

HTML

■ Web Notifications API

Notification : 通知 
 * 簡単にデスクトップ通知が実装可能
デモとサンプル
https://davidwalsh.name/notifications-api

Web Push APIとの違い

Web Notifications API 
 * 画面上に通知を表示する機能
Web Push API 
 * サーバから通知を受信する機能
以下のサイトも参照
http://garapon.hatenablog.com/entry/2016/04/20/%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96Push%E3%81%A8WebPush%E3%81%A8Web_Notification%E3%81%AE3%E3%81%A4%E3%81%AE%E9%80%9A%E7%9F%A5%E6%96%B9%E6%B3%95%E3%82%92%E6%95%B4%E7%90%86%E3%81%97%E3%81%A6

■ サンプル

例：HelloWorld的なサンプル 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Notification Demo</title>
</head>
<body>
  <button onclick="sayHello()">Hi</button><br />
</body>
<script type="text/javascript">
  function sayHello() {
    if(window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function(status) {
        var notify = new Notification(
          'Title ... Say Hello!', {
            body: 'Body ... Say World!!',
            icon: 'https://ident-001.west.edge.storage-yahoo.jp/res/ident-5mypszyrqsxdfvywx6dmdr5oam/profile/icon_sr?1274278682'
        });
      });
    }
  }
</script>
</html>

補足：Chrome での確認

 * Chrome ではWebサーバ経由でないと確認できない (Firefoxなら気軽に試せる)
 * 詳細は、以下の関連記事を参照のこと。
https://blogs.yahoo.co.jp/dk521123/37243216.html

続きは、以下の関連記事
https://blogs.yahoo.co.jp/dk521123/37244878.html

関連記事

【HTML5】Web Notifications API ～ 基本編 ～

https://blogs.yahoo.co.jp/dk521123/37244878.html

【HTML5】WebRTC ～ 入門編 ～

https://blogs.yahoo.co.jp/dk521123/37243216.html