En este codelab, usarás funciones básicas de la API de notificaciones para lo siguiente:
- Cómo solicitar permiso para enviar notificaciones
- Envíe notificaciones
- Experimenta con las opciones de notificación
Remezcla la app de ejemplo y mírala en una pestaña nueva
Las notificaciones se bloquean automáticamente desde la app de Glitch incorporada, por lo que no podrás obtener una vista previa de la app en esta página. En su lugar, haz lo siguiente:
- Haz clic en Remix para editar 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:
A medida que trabajes en este codelab, realiza cambios en el código de Glitch incorporado en esta página. Actualiza la nueva pestaña con tu app en vivo para ver los cambios.
Familiarízate con la app de partida y su código
Primero, revisa la app en vivo en la nueva pestaña de Chrome:
Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools. Haz clic en la pestaña Consola.
Deberías ver el siguiente mensaje en la consola:
Notification permission is default
Si no sabes lo que significa, no te preocupes, pronto se revelará todo.
Haz clic en los botones de la app publicada: Solicitar permiso para enviar notificaciones y Enviar una notificación.
La consola imprime mensajes "TODO" de un par de stubs de función:
requestPermission
ysendNotification
. Estas son las funciones que implementarás en este codelab.
Ahora, veamos el código de la app de ejemplo en el 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 notificaciones para obtener el estado de permiso actual 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 el permiso, el estado del permiso es
default
. En el estado de permisodefault
, un sitio debe solicitar permiso y obtenerlo antes de 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ónshowPermission
cuando se carga la página y muestra el estado de permiso actual en la consola y en la página:window.onload = () => { showPermission(); };
Cómo solicitar permiso para enviar notificaciones
En este paso, agregarás la funcionalidad para solicitar el permiso del usuario para enviar notificaciones.
Usará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.
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 ves la app en vivo.
En la interfaz en vivo de la app, 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 hacer una selección | default |
Si el usuario hace clic en Permitir, ocurrirá lo siguiente:
Notification.permission
se configura engranted
.El sitio podrá mostrar notificaciones.
Las llamadas posteriores a
Notification.requestPermission
se resolverán engranted
sin una ventana emergente.
Si el usuario hace clic en Bloquear:
Notification.permission
se configura endenied
.El sitio no podrá mostrar notificaciones al usuario.
Las llamadas posteriores a
Notification.requestPermission
se resolverán endenied
sin una ventana emergente.
Si el usuario descarta la ventana emergente, ocurrirá lo siguiente:
Notification.permission
sigue siendodefault
.El sitio no podrá mostrar notificaciones al usuario.
Las llamadas posteriores a
Notification.requestPermission
producirán más ventanas emergentes.Sin embargo, si el usuario continúa rechazando las ventanas emergentes, es posible que el navegador bloquee el sitio y establezca
Notification.permission
endenied
. No se pueden mostrar al usuario las ventanas emergentes ni las notificaciones de solicitud de permisos.En el momento de escribir este artículo, el comportamiento del navegador en respuesta a las ventanas emergentes de permisos de notificaciones rechazadas aún está sujeto a cambios. La mejor manera de controlar esto es solicitar siempre el permiso de notificación en respuesta a alguna interacción que haya iniciado el usuario, de modo que lo espere y sepa qué sucede.
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 tratar de mostrarla.
Si el estado del permiso es granted
, se mostrará tu 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
yoptions
.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 ves la 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 qué sucede cuando intentas mostrar una notificación sin el permiso del usuario.
- En
public/index.js
, al final de la funciónsendNotification
, define el controlador de eventosonerror
de la nueva notificación:
// 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 permiso de notificación, haz lo siguiente:
Haz clic en el ícono de candado junto a la barra de URL de Chrome y restablece el parámetro de configuración de permisos de notificaciones del sitio a su valor predeterminado.
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 qué sucede. El texto del error (
Could not send notification
) y el objeto del evento se registran en la consola.
De forma opcional, restablece los permisos de notificaciones del sitio. Puedes intentar solicitar el permiso y descartar la ventana emergente varias veces para ver qué sucede.
Experimenta con las opciones de notificación
Ya conoces los conceptos básicos para solicitar permisos 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 muchas opciones visuales y de datos disponibles cuando creas una notificación. A continuación, se muestra el conjunto completo de opciones disponibles. (consulta la documentación de 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 diferentes 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 el Notification Generator de Peter Beverloo para obtener más ideas.
Si tienes problemas, aquí tienes el código completo de este codelab: glitch.com/edit/#!/codelab-notifications-get-started-completed
Consulta el siguiente codelab de esta serie, Controla las notificaciones con un service worker, para obtener más información.