Comment fonctionnent les notifications de bureau dans Chrome ?

Explication des notifications du bureau Chrome

Les notifications du bureau dans les navigateurs modernes permettent l'affichage de messages simples à l'écran. Elles sont particulièrement utiles lorsque vous souhaitez alerter ou informer les utilisateurs même lorsqu'ils n'interagissent pas avec votre site Web.

Il existe deux types de notifications :

Notifications de bureau :

• Facile à afficher
• Disparaît automatiquement après quelques secondes
• Disponible uniquement lorsque la page Web est ouverte

Notifications du Service Worker :

• Plus complexe à mettre en œuvre
• Peut être persistant et apparaître même lorsque la page Web est fermée
• Action de support boutons

Accès à l'API Desktop Notification :

L'API Desktop Notification utilise des paramètres similaires pour les deux types, comme documenté sur MDN. Pour accéder à cette API :

1. Demandez l'autorisation lors du chargement de la page.
2. Créez un nouvel objet de notification avec un titre, une icône et un corps de texte.
3. Attribuez un événement auditeur pour gérer les actions (onclick).

Exemple Implémentation :

<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>

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!