Chrome でデスクトップ通知を表示するにはどうすればよいですか?

Chrome でデスクトップ通知を実装する方法

最新のブラウザでは、デスクトップ通知と Service Worker 通知という 2 つの通知タイプが提供されます。デスクトップ通知はトリガーが簡単で、ページが開いている間のみ機能し、短期間で消える可能性があります。

どちらのタイプの API 呼び出しも同じパラメーターを受け取ります (デスクトップ通知では使用できないアクションを除く)。

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

以下のコード スニペットは、Chrome でのデスクトップ通知を示しています。

<code class="javascript">// 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 to display a notification
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');
  };
 }
}</code>

通知をトリガーする HTML

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

以上がChrome でデスクトップ通知を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。