ServiceWorkerRegistration.showNotification()

La méthode showNotification() de l'interface ServiceWorkerRegistration crée une notification dans un service worker actif.

Note: Cette fonctionnalité est disponible dans les Web Workers.

Syntaxe

​serviceWorkerRegistration.showNotification(title, [options])

Paramètres

title
Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
options Facultatif
Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
  • actions: Un tableau de NotificationAction représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes:
    • action: Une DOMString  représentant une action utilisateur à afficher sur la notification.
    • title: Une DOMString contenant le texte d'action à montrer à l'utilisateur.
    • icon: Une USVString contenant l'URL d'une icône à afficher avec l'action.
    Les réponses appropriées sont construites à l'aide de event.action dans l'événement notificationclick.
  • badge: Un USVString contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
  • body: Un DOMString représentant le corps du texte de la notification, qui est affiché sous le titre.
  • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
  • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
  • icon: Une USVString contenant l'URL d'une icône à afficher dans la notification.
  • image: Une USVString contenant l'URL d'une image à afficher dans la notification.
  • lang: La langue de la notification, telle que spécifiée à l'aide d'un DOMString représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
  • renotify: Un Booléen spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
  • requireInteraction: Un Booléen indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est false.
  • silent: Un Booléen spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est false, ce qui signifie qu'il ne sera pas silencieux.
  • tag: Un DOMString représentant un tag d'identification pour la notification.
  • timestamp: Un DOMTimeStamp représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.
  • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.

Valeur de retour

Un Promise qui se résout en undefined.

Exemples

navigator.serviceWorker.register('sw.js')

function showNotification() {
  Notification.requestPermission((result) => {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then((registration) => {
        registration.showNotification('Vibration Sample', {
          body: 'Buzz! Buzz!',
          icon: '../images/touch/chrome-touch-icon-192x192.png',
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: 'vibration-sample'
        })
      })
    }
  })
}

Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements ServiceWorkerGlobalScope.onnotificationclick.

Vous pouvez également récupérer les détails des Notifications qui ont été déclenchés par le service worker actuel en utilisant ServiceWorkerRegistration.getNotifications().

Spécifications

Spécification État Commentaire
Notifications API
La définition de 'showNotification()' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
showNotification
Expérimentale
Chrome Support complet 40Edge Support complet 17
Support complet 17
Support complet 16
Désactivée
Désactivée From version 16: this feature is behind the Enable service workers preference.
Firefox Support complet 46
Notes
Support complet 46
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 27Safari Aucun support NonWebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 46Opera Android Support complet 27Safari iOS Aucun support NonSamsung Internet Android Support complet 4.0
actions
Expérimentale
Chrome Support complet 45Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 32Safari Aucun support NonWebView Android Support complet 45Chrome Android Support complet 45Firefox Android Aucun support NonOpera Android Support complet 32Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
badge
Expérimentale
Chrome Support complet 53Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 39Safari Aucun support NonWebView Android Support complet 53Chrome Android Support complet 53Firefox Android Aucun support NonOpera Android Support complet 41Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
data
Expérimentale
Chrome Support complet 44Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 31Safari Aucun support NonWebView Android Support complet 44Chrome Android Support complet 44Firefox Android Aucun support NonOpera Android Support complet 32Safari iOS Aucun support NonSamsung Internet Android Support complet 4.0
image
Expérimentale
Chrome Support complet 56Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 43Safari Aucun support NonWebView Android Support complet 56Chrome Android Support complet 56Firefox Android Aucun support NonOpera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
renotify
Expérimentale
Chrome Support complet 50Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 37Safari Aucun support NonWebView Android Support complet 50Chrome Android Support complet 50Firefox Android Aucun support NonOpera Android Support complet 37Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
requireInteraction
Expérimentale
Chrome Support complet 47Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 34Safari Aucun support NonWebView Android Support complet 47Chrome Android Support complet 47Firefox Android Aucun support NonOpera Android Support complet 34Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
vibrate
Expérimentale
Chrome Support complet 45Edge Support complet ≤79Firefox Aucun support NonIE Aucun support NonOpera Support complet 32Safari Aucun support NonWebView Android Support complet 45Chrome Android Support complet 45Firefox Android Aucun support NonOpera Android Support complet 32Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.