Web アプリケーションに Chrome デスクトップ通知を実装するにはどうすればよいですか?

Chrome デスクトップ通知の使用: 実践ガイド

ウェブ開発において、通知はユーザーを引き付け、重要な情報を伝える効果的な方法です。広く使用されているブラウザである Chrome は、ブラウザ ウィンドウの外側にメッセージを表示する便利な方法を提供するデスクトップ通知をサポートしています。

コードで Chrome デスクトップ通知を利用するには、理解する必要のある重要な API 呼び出しがいくつかあります。

• Notification.requestPermission(): ユーザーに表示の許可を要求します。 notification.
• new Notice('title', { options }): タイトルとオプションのオプション (アイコン、本文など) を使用して新しい通知インスタンスを作成します。
• notification.onclick: ユーザーが通知をクリックしたときに実行されるイベント ハンドラー。 notification.

クロスプラットフォームの互換性を確保するには、Service Worker 通知の使用を検討してください。ただし、デスクトップ通知は実装が簡単で、適切なレベルの機能を提供します。

以下は、Chrome、Firefox、Opera、Safari でのデスクトップ通知の実例です:

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

<script>
// 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');
    };
  }
}
</script>

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