Se usó la API de Cloud Translation para traducir esta página.

Comienza a usar la API de Notifications

En este codelab, usarás funciones básicas de la API de Notifications para hacer lo siguiente:

Solicita permiso para enviar notificaciones
Envíe notificaciones
Experimenta con opciones de notificaciones

Navegadores compatibles

Haz un remix de la app de ejemplo y mírala en una pestaña nueva

Las notificaciones se bloquean automáticamente en la app de Glitch incorporada, por lo que no podrás obtener una vista previa de la app en esta página. Esto es lo que debes hacer:

Haz clic en Remix to Edit para que el proyecto sea editable.
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .

Glitch debería abrirse en una nueva pestaña de Chrome:

Captura de pantalla que muestra la app en vivo de remix en una pestaña nueva

A medida que avanzas en este codelab, realiza cambios en el código de Glitch incorporado en esta página. Actualiza la pestaña nueva con la app activa para ver los cambios.

Familiarízate con la app de partida y su código

Para comenzar, revisa la app activa en la nueva pestaña de Chrome:

Presiona "Control + Mayús + J" (o "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores. Haz clic en la pestaña Consola.

Deberías ver el siguiente mensaje en Console:
```
Notification permission is default
```
Si no sabes lo que significa, no te preocupes, ¡pronto se te revelará todo!
Haz clic en los botones de la app activa: Solicitar permiso para enviar notificaciones y Enviar una notificación.

La consola imprime mensajes "TODO" desde un par de stubs de funciones: requestPermission y sendNotification. Estas son las funciones que implementarás en este codelab.

Ahora, veamos el código de la app de ejemplo en Glitch incorporado en esta página. Abre public/index.js y observa algunas partes importantes del código existente:

La función showPermission usa la API de Notifications para obtener el estado actual del permiso del sitio y registrarlo en la consola:

// Print current permission state to console;
// update onscreen message.
function showPermission() {
  let permission = Notification.permission;
  console.log('Notification permission is ' + permission);
  let p = document.getElementById('permission');
  p.textContent = 'Notification permission is ' + permission;
}

Antes de solicitar permiso, el estado del permiso es default. En el estado de permiso default, un sitio debe solicitar y obtener permiso para poder enviar notificaciones.

La función requestPermission es un stub:

// Use the Notification API to request permission to send notifications.
function requestPermission() {
  console.log('TODO: Implement requestPermission()');
}

Implementarás esta función en el siguiente paso.

La función sendNotification es un stub:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  console.log('TODO: Implement sendNotification()');
}

Implementarás esta función después de implementar requestPermission.

El objeto de escucha de eventos window.onload llama a la función showPermission cuando se carga la página y muestra el estado actual del permiso en la consola y en la página:
```
window.onload = () => { showPermission(); };
```

Solicita permiso para enviar notificaciones

En este paso, agregarás funcionalidad a fin de solicitar el permiso del usuario para enviar notificaciones.

Utilizarás el método Notification.requestPermission() para activar una ventana emergente que le solicite al usuario que permita o bloquee las notificaciones de tu sitio.

Nota: Notification.requestPermission() muestra un Promise. Para realizar acciones después de que se resuelva esta promesa, debes colocarlas dentro de una función y pasar esa función como parámetro al método then() de la promesa: js Notification.requestPermission().then((result) => { /* do stuff */ }); Consulta la documentación de Promise en MDN para obtener más información sobre el funcionamiento de las promesas.

Reemplaza el stub de la función requestPermission en public/index.js por el siguiente código:

// Use the Notification API to request permission to send notifications.
function requestPermission() {
  Notification.requestPermission()
    .then((permission) => {
      console.log('Promise resolved: ' + permission);
      showPermission();
    })
    .catch((error) => {
      console.log('Promise was rejected');
      console.log(error);
    });
}

Vuelve a cargar la pestaña de Chrome en la que estás viendo la aplicación publicada.
En la interfaz de la app activa, haz clic en Solicitar permiso para enviar notificaciones. Aparecerá una ventana emergente.

El usuario puede realizar una de las tres respuestas a la ventana emergente de permisos.

Respuesta del usuario	Estado del permiso de notificaciones
El usuario selecciona Permitir.	`granted`
El usuario selecciona Bloquear.	`denied`
El usuario descarta la ventana emergente sin realizar una selección.	`default`

Si el usuario hace clic en Permitir, ocurrirá lo siguiente:

Notification.permission se configura en granted.
El sitio podrá mostrar notificaciones.
Las llamadas posteriores a Notification.requestPermission se resolverán en granted sin que aparezca una ventana emergente.

Si el usuario hace clic en Bloquear, ocurrirá lo siguiente:

Notification.permission se configura en denied.
El sitio no podrá mostrar notificaciones al usuario.
Las llamadas posteriores a Notification.requestPermission se resolverán en denied sin que aparezca una ventana emergente.

Si el usuario descarta la ventana emergente, haz lo siguiente:

Notification.permission sigue siendo default.
El sitio no podrá mostrar notificaciones al usuario.
Las llamadas posteriores a Notification.requestPermission generarán más ventanas emergentes.

Sin embargo, si el usuario sigue descartando las ventanas emergentes, es posible que el navegador bloquee el sitio y establezca Notification.permission como denied. Por lo tanto, no se pueden mostrar ventanas emergentes de solicitud de permisos ni notificaciones al usuario.

Al momento de la redacción, el comportamiento del navegador en respuesta a ventanas emergentes de permisos de notificaciones descartadas aún está sujeto a cambios. La mejor manera de manejar esto es solicitar siempre permisos de notificaciones en respuesta a alguna interacción que haya iniciado el usuario, de modo que el usuario la espere y sepa qué está sucediendo.

Enviar una notificación

En este paso, enviarás una notificación al usuario.

Usarás el constructor Notification para crear una notificación nueva y, luego, intentar mostrarla. Si el estado del permiso es granted, se mostrará la notificación.

Reemplaza el stub de la función sendNotification en index.js por el siguiente código:
```
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
}
```
El constructor Notification toma dos parámetros: title y options. options es un objeto con propiedades que representan la configuración visual y los datos que puedes incluir en una notificación. Consulta la documentación de MDN sobre los parámetros de notificación para obtener más información.
Actualiza la pestaña de Chrome en la que estás viendo tu app en vivo y haz clic en el botón Enviar notificación. Debería aparecer una notificación con el texto Test body.

¿Qué sucede cuando envías notificaciones sin permiso?

En este paso, agregarás un par de líneas de código que te permitirán ver lo que sucede cuando intentas mostrar una notificación sin el permiso del usuario.

En public/index.js, al final de la función sendNotification, define el controlador de eventos onerror de la notificación nueva:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

Para observar un error de permisos de notificaciones, haz lo siguiente:

Haz clic en el ícono de bloqueo junto a la barra de URL de Chrome y restablece la configuración de permisos de notificaciones del sitio a los valores predeterminados.
Haz clic en Solicitar permiso para enviar notificaciones y, esta vez, selecciona Bloquear en la ventana emergente.
Haz clic en Enviar notificación y observa lo que sucede. El texto de error (Could not send notification) y el objeto de evento se registran en la consola.

De manera opcional, vuelve a restablecer los permisos de notificaciones del sitio. Puedes solicitar permiso y descartar la ventana emergente varias veces para ver qué sucede.

Experimenta con opciones de notificaciones

Ya aprendiste los conceptos básicos sobre cómo solicitar permiso y enviar notificaciones. También viste el impacto que tienen las respuestas de los usuarios en la capacidad de tu app para mostrar notificaciones.

Ahora puedes experimentar con las distintas opciones visuales y de datos disponibles cuando creas una notificación. A continuación, se incluye el conjunto completo de opciones disponibles. (Consulta la documentación sobre notificaciones en MDN para obtener más información sobre estas opciones).

Ten en cuenta que los navegadores y los dispositivos implementan estas opciones de manera diferente, por lo que vale la pena probar tus notificaciones en distintas plataformas para ver cómo se ven.

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

Consulta Generador de notificaciones de Peter Beverloo para obtener más ideas.

Si no logras avanzar, este es el código completo de este codelab: glitch.com/edit/#!/codelab-notifications-get-started-completed.

Si deseas obtener más información, consulta el siguiente codelab de esta serie, Controla las notificaciones con un service worker.