Comment implémenter les notifications de bureau dans les navigateurs modernes ?

Exemple de notification sur le bureau Chrome

Deux types de notifications existent dans les navigateurs modernes :

• Bureau Notifications - faciles à déclencher, actives tant que la page est ouverte et peuvent disparaître automatiquement après quelques secondes.
• Service Worker Notifications - Un peu complexe, mais elles fonctionnent en arrière-plan (même après la fermeture de la page), sont persistantes et prennent en charge les boutons d'action.

Les appels API prennent les mêmes paramètres (à l'exception des actions - non disponibles dans les notifications du bureau), qui sont bien documentés sur MDN et, pour les techniciens de service, sur le site Web Fundamentals de Google.

Voici un exemple fonctionnel de notification de bureau pour Chrome, Firefox, Opera et Safari. Notez que pour des raisons de sécurité, à partir de Chrome 62, les autorisations de l'API de notification ne peuvent plus être demandées à partir du framework cross-origin. Nous ne pouvons donc pas le démontrer à l'aide d'un extrait de code de StackOverflow. Vous devez enregistrer cet exemple dans le fichier HTML de votre site Web/application et vous assurer d'utiliser localhost:// ou HTTPS.

<code class="js">// 在页面加载时请求权限
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');
  };
 }
}</code>

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