ホームページ > ウェブフロントエンド > jsチュートリアル > Chrome でのデスクトップ通知はどのように機能しますか?

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

DDD
リリース: 2024-11-03 22:21:02
オリジナル
655 人が閲覧しました

How Do Desktop Notifications Work in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート