Chrome デスクトップ通知の例 [closed] 質問する

Question

最新のブラウザには、次の 2 種類の通知があります。

デスクトップ通知- トリガーは簡単で、ページが開いている間は機能し、数秒後に自動的に消える場合があります。
サービスワーカー通知- 少し複雑ですが、バックグラウンドで動作し（ページが閉じられた後でも）、永続的で、アクションボタンをサポートします。

API呼び出しは同じパラメータ（アクションを除く - デスクトップ通知では利用できません）を受け取ります。これは、翻訳サービス業従事者については、Google のウェブの基礎サイト。

以下はChrome、Firefox、Opera、Safariのデスクトップ通知の実例です。セキュリティ上の理由から、Chrome 62以降では、クロスオリジンの iframe から Notification API の許可を要求できなくなりました。なので、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');
  };
 }
}

 <button onclick="notifyMe()">Notify me!</button>

私たちはW3C 通知API。これをChrome拡張機能通知APIは異なります。Chrome 拡張機能の通知は当然 Chrome 拡張機能内でのみ機能し、ユーザーからの特別な許可は必要ありません。

W3C通知は多くのブラウザで動作します（サポートについては使ってもいいですか) であり、ユーザーの許可が必要です。ベストプラクティスとしては、この許可をすぐに求めないでください。まずユーザーに通知が必要な理由を説明する他のプッシュ通知パターン。

LinuxではChromeは通知アイコンを尊重しません。このバグ。

最後に

通知のサポートは継続的に変化しており、過去数年にわたってさまざまな API が廃止されてきました。興味がある場合は、この回答の以前の編集をチェックして、Chrome で以前は何が機能していたかを確認し、リッチ HTML 通知の経緯を学んでください。

現在、最新の基準は通知。

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

参照通知ヘルパーライブラリ用。

Answer 1