Comment puis-je implémenter les notifications du bureau Chrome dans mon application Web ?

Utiliser les notifications de Chrome Desktop : un guide pratique

Dans le développement Web, les notifications sont un moyen efficace d'engager les utilisateurs et de transmettre des informations importantes. Chrome, en tant que navigateur largement utilisé, prend en charge les notifications du bureau, ce qui constitue une méthode pratique pour afficher les messages en dehors de la fenêtre du navigateur.

Pour utiliser les notifications du bureau Chrome dans votre code, vous devez comprendre quelques appels d'API clés :

• Notification.requestPermission() : demande l'autorisation à l'utilisateur d'afficher les notifications.
• nouvelle notification('title', { options }) : crée une nouvelle instance de notification avec un titre et des options facultatives (par exemple, icône, corps).
• notification.onclick : un gestionnaire d'événements qui s'exécute lorsque l'utilisateur clique sur la notification .

Pour une compatibilité multiplateforme, pensez à utiliser les notifications Service Worker. Cependant, les notifications de bureau sont plus simples à mettre en œuvre et offrent un niveau de fonctionnalité raisonnable.

Vous trouverez ci-dessous un exemple concret de notifications de bureau dans Chrome, Firefox, Opera et Safari :

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

<script>
// 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 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');
    };
  }
}
</script>

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!