Maison > interface Web > js tutoriel > Comment afficher les notifications du bureau dans Chrome ?

Comment afficher les notifications du bureau dans Chrome ?

Patricia Arquette
Libérer: 2024-11-03 04:52:03
original
615 Les gens l'ont consulté

How to Show Desktop Notifications in Chrome?

Comment implémenter les notifications de bureau dans Chrome ?

Les navigateurs modernes proposent deux types de notifications : les notifications de bureau et les notifications des techniciens de service. Les notifications sur le bureau sont plus simples à déclencher, fonctionnant uniquement lorsque la page est ouverte et disparaissant potentiellement après un court intervalle.

L'appel API pour les deux types prend des paramètres identiques (à l'exception des actions, qui ne sont pas disponibles pour les notifications sur le bureau).

Exemple de notification sur le bureau pour Chrome

L'extrait de code ci-dessous illustre les notifications sur le bureau dans 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>
Copier après la connexion

HTML pour déclencher une notification

<code class="html"><button onclick="notifyMe()">Notify me!</button></code>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal