[解決済み] Chromeデスクトップ通知例【終了しました

質問

をどのように使用するのですか？ Chromeデスクトップ通知 ? 私はそれを自分のコードで使いたいのです。

更新情報 : 以下は ブログ記事 Webkit の通知について、例を挙げて説明します。

解決するには？

モダンブラウザでは、2種類の通知があります。

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

API 呼び出しは、同じパラメータ (アクションを除く - デスクトップ通知では利用不可) を取り、これらは以下のように十分に文書化されています。 MDN で、サービスワーカーについては GoogleのWebファンダメンタルズ のサイトをご覧ください。

以下は デスクトップ の通知を、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');
  };
 }
}

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

を使用しています。 W3C通知 APIです。と混同しないでください。 クローム エクステンション 通知API というのは違います。Chromeの拡張機能の通知は、明らかにChromeの拡張機能でのみ機能し、ユーザーからの特別な許可は必要ありません。

W3C通知は多くのブラウザで動作します。 カニース ) 、ユーザーの許可を必要とします。ベストプラクティスとして、いきなりこの許可を求めないようにしましょう。 なぜ通知が必要なのか、まずユーザーに説明する を参照し、他の プッシュ通知パターン .

Linuxでは、Chromeが通知アイコンを表示しないことに注意してください。 このバグ .

最後の言葉

通知機能のサポートは常に流動的で、ここ数年の間にさまざまなAPIが非推奨となりました。もし興味があれば、この回答の過去の編集をチェックして、Chrome で何が機能していたかを確認し、リッチ HTML 通知のストーリーを学んでください。

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

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

こちらもご覧ください notify.js はヘルパーライブラリです。