ServiceWorkerRegistration.showNotification()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El método showNotification() de la interfaz ServiceWorkerRegistration crea una notificación en un service worker activo.

Note: Este recurso está disponible en Web Workers.

Syntax

​ServiceWorkerRegistration.showNotification(title, [options]).then(function(NotificationEvent) { ... });

Retorna

Una Promise que resuelve a un NotificationEvent.

Parameters

title
El título que debe mostrarse en la notificación
options Optional
Un objeto que permite configurar la notificación. Puede tener las siguientes propiedades:
  • actions: Un arreglo de acciones para mostrar en la notificación. Los elementos del arreglo deben ser un objeto literal. Puede contener los siguientes valores:
    • action: Un DOMString que identifica una acción del usuario a ser mostrada en la notificación.
    • title: Un DOMString que contiene el texto de la acción a mostrar al usuario.
    • icon: Un USVString que contiene la URL de un icono a mostrar junto a la acción.
    Una respuesta apropiadada se construye usando event.action con el evento notificationclick .
  • badge: The URL of an image to represent the notification when there is not enough space to display the notification itself such as, for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
  • body: A string representing an extra content to display within the notification.
  • dir : The direction of the notification; it can be auto, ltr, or rtl
  • icon: The URL of an image to be used as an icon by the notification.
  • image: a USVSTring containing the URL of an image to be displayed in the notification.
  • lang: Specify the lang used within the notification. This string must be a valid BCP 47 language tag.
  • renotify: A boolean that indicates whether to supress vibrations and audible alerts when resusing a tag value. The default is false.
  • requireInteraction: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is false.
  • tag: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.
  • vibrate: A vibration pattern to run with the display of the notification. A vibration pattern can be an array with as few as one member. The values are times in milliseconds where the even indices (0, 2, 4, etc.) indicate how long to vibrate and the odd indices indicate how long to pause. For example [300, 100, 400] would vibrate 300ms, pause 100ms, then vibrate 400ms.
  • data: Arbitrary data that you want associated with the notification. This can be of any data type.

Examples

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

function showNotification() {
  Notification.requestPermission(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(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'
        });
      });
    }
  });
}

To invoke the above function at an appropriate time, you could use the ServiceWorkerGlobalScope.onnotificationclick event handler.

You can also retrieve details of the Notifications have have been fired from the current service worker using ServiceWorkerRegistration.getNotifications().

Specifications

Specification Status Comment
Notifications API
La definición de 'showNotification()' en esta especificación.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básico
Experimental
Chrome Soporte completo 40Edge Soporte completo 17
Soporte completo 17
Soporte completo 16
Deshabilitado
Deshabilitado From version 16: this feature is behind the Enable service workers preference.
Firefox Soporte completo 46
Notas
Soporte completo 46
Notas
Notas Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR).
IE Sin soporte NoOpera Soporte completo 27Safari Sin soporte NoWebView Android Soporte completo 40Chrome Android Soporte completo 40Edge Mobile ? Firefox Android Soporte completo 46Opera Android Soporte completo 27Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
actions
Experimental
Chrome Soporte completo 45Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 32Safari Sin soporte NoWebView Android Soporte completo 45Chrome Android Soporte completo 45Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 32Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0
badge
Experimental
Chrome Soporte completo 53Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 39Safari Sin soporte NoWebView Android Soporte completo 53Chrome Android Soporte completo 53Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 39Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 6.0
data
Experimental
Chrome Soporte completo 44Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 31Safari Sin soporte NoWebView Android Soporte completo 44Chrome Android Soporte completo 44Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 31Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0
image
Experimental
Chrome Soporte completo 56Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 43Safari Sin soporte NoWebView Android Soporte completo 56Chrome Android Soporte completo 56Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 43Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 6.0
renotify
Experimental
Chrome Soporte completo 50Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 37Safari Sin soporte NoWebView Android Soporte completo 50Chrome Android Soporte completo 50Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 37Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0
requireInteraction
Experimental
Chrome Soporte completo 47Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 34Safari Sin soporte NoWebView Android Soporte completo 47Chrome Android Soporte completo 47Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 34Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0
vibrate
Experimental
Chrome Soporte completo 45Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 32Safari Sin soporte NoWebView Android Soporte completo 45Chrome Android Soporte completo 45Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 32Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 5.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
vibrate option 45 ? Sin soporte ? 32 ?
requireInteraction 47 ? Sin soporte ? ? ?
actions option 48 ? Sin soporte ? ? ?
renotify option 50 ? Sin soporte ? 37 ?
badge option 53 ? ? ? 39 ?
image option 56 ? ? ? ? ?
data option 44 ? Sin soporte Sin soporte ? Sin soporte
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
vibrate option Sin soporte Sin soporte Sin soporte Sin soporte ? 32 ? 45
requireInteraction Sin soporte Sin soporte Sin soporte Sin soporte ? ? ? 47
actions option Sin soporte Sin soporte Sin soporte Sin soporte ? ? ? 48
renotify option Sin soporte Sin soporte Sin soporte Sin soporte ? 37 ? 50
badge option Sin soporte Sin soporte ? ? ? 39 ? 53
image option Sin soporte Sin soporte ? ? ? ? ? 56
data option Sin soporte Sin soporte Sin soporte Sin soporte Sin soporte ? Sin soporte 44

Etiquetas y colaboradores del documento

Colaboradores en esta página: Ruxaxup
Última actualización por: Ruxaxup,