Le guide de l'API de notification

L'API Notifications est chargée d'afficher les notifications système de l'utilisateur. C'est l'interface que les navigateurs exposent au développeur pour permettre d'afficher des messages à l'utilisateur, avec sa permission, même si le site Web n'est pas ouvert dans le navigateur

Introduction à l'API de notification

LeAPI de notificationsest l'interface que les navigateurs exposent au développeur pour permettreaffichage des messages à l'utilisateur, avec leur permission, même si le site Web / l'application Web n'est pas ouvert dans le navigateur.

Ces messages sont cohérents et natifs, ce qui signifie que la personne qui les reçoit est habituée à leur interface utilisateur et à leur UX, étant à l'échelle du système et non spécifique à votre site.

En combinaison avec leAPI Pushcette technologie peut être un moyen efficace d'augmenter l'engagement des utilisateurs et d'améliorer les capacités de votre application.

L'API Notifications interagit fortement avecTravailleurs des services, car ils sont nécessaires pour les notifications push. Tupeututilisez l'API Notifications sans Push, mais ses cas d'utilisation sont limités.

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
    // status is "granted", if accepted by user
		var n = new Notification('Title', {
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		})
	})
}
n.close()

Autorisations

Pour afficher une notification à l'utilisateur, vous devez être autorisé à le faire.

LeNotification.requestPermission()l'appel de méthode demande cette autorisation.

Tu peux appeler

Notification.requestPermission()

sous cette forme très simple, et il affichera un panneau d'octroi de permission - à moins que la permission n'ait déjà été accordée auparavant.

Pour faire quelque chose lorsque l'utilisateur interagit (autorise ou refuse), vous pouvez lui attacher une fonction de traitement:

const process = (permission) => {
  if (permission === "granted") {
    // ok we can show the permission
  }
}

Notification.requestPermission((permission) => { process(permission) }).then((permission) => { process(permission) })

Voyez comment nous passons un rappel et nous attendons également unpromesse. Ceci est dû aux différentes implémentations deNotification.requestPermission()fait dans le passé, que nous devons maintenant prendre en charge car nous ne savons pas à l'avance quelle version est exécutée dans le navigateur. Donc, pour garder les choses dans un seul endroit, j'ai extrait le traitement des autorisations dans leprocess()fonction.

Dans les deux cas, cette fonction reçoit unpermissionchaîne qui peut avoir l'une de ces valeurs:

  • granted: l'utilisateur a accepté, nouspeutafficher une permission
  • denied: l'utilisateur a refusé, nousne peut pasafficher n'importe quelle permission

Ces valeurs peuvent également être récupérées en vérifiant leNotification.permissionpropriété, qui, si l'utilisateur a déjà accordé des autorisationsgrantedoudenied, mais si vous n'avez pas appeléNotification.requestPermission()pourtant, il se résoudra àdefault.

Créer une notification

LeNotificationobjet exposé par lewindowobjet dans le navigateur vous permet de créer une notification et de personnaliser son apparence.

Voici l'exemple le plus simple, qui fonctionne après avoir demandé des autorisations:

Notification.requestPermission()
new Notification('Hey')

Create a notification

Vous avez quelques options pour personnaliser la notification.

Ajouter un corps

Tout d'abord, vous pouvez ajouter un corps, qui est généralement affiché sous la forme d'une seule ligne:

new Notification('Hey', {
  body: 'You should see this!'
})

Add a body to the notification

Ajouter une image

Vous pouvez ajouter une propriété d'icône:

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

Add an image to the notification

Vous trouverez plus d'options de personnalisation, avec des propriétés spécifiques à la plateforme, àhttps://developer.mozilla.org/docs/Web/API/Notification

Fermer une notification

Vous voudrez peut-être fermer une notification une fois que vous l'avez ouverte.

Pour ce faire, créez une référence à la notification que vous ouvrez:

const n = new Notification('Hey')

puis vous pourrez le fermer plus tard, en utilisant:

n.close()

ou avec un timeout:

setTimeout(n.close(), 1 * 1000)

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: