ホームページ > ウェブフロントエンド > jsチュートリアル > Chrome でデスクトップ通知を表示するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-11-03 04:52:03
オリジナル
613 人が閲覧しました

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

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