Chrome でのデスクトップ通知はどのように機能しますか?

Chrome デスクトップ通知の説明

最新のブラウザのデスクトップ通知を使用すると、画面に簡単なメッセージを表示できます。これらは、ユーザーが Web サイトを操作していないときでも、ユーザーに警告または通知したい場合に特に便利です。

通知には 2 種類あります:

デスクトップ通知:

• 簡単に表示
• 数秒後に自動的に消える
• ウェブページを開いている間のみ利用可能

Service Worker 通知:

• 実装がより複雑
• Web ページが閉じている場合でも永続的に表示できます
• アクション ボタンをサポート

デスクトップ通知 API へのアクセス:

デスクトップ通知 API は、MDN で説明されているように、両方のタイプで同様のパラメーターを使用します。この API にアクセスするには:

1. ページの読み込み時に権限をリクエストします。
2. タイトル、アイコン、本文テキストを含む新しい通知オブジェクトを作成します。
3. イベントを割り当てますアクション (onclick) を処理するリスナー。

実装例:

<code class="js">document.addEventListener('DOMContentLoaded', function() {
  if (!Notification) alert('Desktop notifications not available in your browser.');
  if (Notification.permission !== 'granted') Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission === 'granted') {
    var notification = new Notification('Notification title', {
      icon: 'icon.png',
      body: 'Hey there! You\'ve been notified!',
    });
    notification.onclick = function() {
      window.open('http://example.com');
    };
  } else Notification.requestPermission();
}</code>

HTML:

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

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