Chromeのデスクトップ通知の例

最近のブラウザでは、2種類の通知があります。

• Desktop notifications - トリガーが簡単で、ページが開いている限り動作し、数秒後に自動的に消えることがあります。
• Service Worker notifications - 少し複雑ですが、バックグラウンドで動作し（ページが閉じられた後も）、持続的で、アクションボタンをサポートします。

APIコールは同じパラメータを取ります（アクションを除く-デスクトップ通知では利用できません）。これらのパラメータについてはMDNに、サービスワーカーについてはGoogle's Web Fundamentalsのサイトによく記載されています。

以下は、Chrome、Firefox、Opera、Safariでのデスクトップ通知の動作例です。なお、セキュリティ上の理由から、Chrome 62からはNotification APIの許可をクロスオリジンのiframeから要求できなくなったため、StackOverflowのコードスニペットを使ったデモはできません。この例を自分のサイトやアプリケーションのHTMLファイルに保存し、localhost://またはHTTPSを使用するようにしてください。

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});

function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 Notify me!

W3C Notifications](https://www.w3.org/TR/notifications/)というAPIを使用しています。これを[Chrome extensions notifications API](https://developer.chrome.com/extensions/desktop_notifications)と混同してはいけません。これは別物です。Chrome拡張機能の通知は、明らかにChrome拡張機能でのみ動作し、ユーザーからの特別な許可を必要としません。

W3Cの通知は、多くのブラウザで動作し（caniuseのサポートを参照）、ユーザーの許可が必要です。ベストプラクティスとしては、最初からこの許可を求めないようにしましょう。なぜ通知が必要なのかを最初にユーザーに説明するや、他のプッシュ通知のパターンを参照してください。

なお、Chromeは[このバグ]により、Linuxでは通知アイコンが表示されません(https://bugs.chromium.org/p/chromium/issues/detail?id=962193)。

最後の言葉

通知機能のサポートは継続的に変化しており、ここ数年で様々なAPIが廃止されています。興味のある方は、この回答の過去の編集をチェックして、かつてChromeで機能していたものや、リッチHTML通知の話をご覧ください。

現在、最新の規格は https://notifications.spec.whatwg.org/ です。

サービスワーカーの中にいるかどうかによって、同じ効果をもたらす2つの異なる呼び出しがある理由については、私がGoogleで働いていたときに提出したこのチケットを参照してください。

ヘルパーライブラリについてはnotify.jsも参照してください。

デザイン]1やAPI仕様（まだドラフトです）、またはソース（ページは利用できません）から簡単な例をチェックしてください。これは主にwindow.webkitNotifications.createNotificationの呼び出しです。

もっとしっかりした例（Google Chromeの拡張機能を自分で作ろうとしていて、パーミッションやローカルストレージなどの扱い方を知りたい）を知りたい場合は、Gmail Notifier Extensionをチェックしてみてください：インストールする代わりにcrxファイルをダウンロードし、解凍してソースコードを読んでみてください。

I like: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples でも、古い変数を使っているので、デモはもう動きません'。webkitNotificationsはNotification` になりました。