En este codelab, usarás un service worker para administrar las notificaciones. En estas instrucciones, se presupone que ya conoces service workers y conceptos básicos para solicitar permisos de notificaciones y enviar notificaciones. Si necesitas repasar las notificaciones, consulta la Comienza a usar la API de Notifications en este codelab. Para obtener más información sobre los service workers, consulta la Introducción a los service workers de Matt Gaunt.
Hacer un remix de la app de ejemplo y verla en una pestaña nueva
Las notificaciones se bloquean automáticamente en la app incorporada de Glitch, por lo que no podrás obtener una vista previa de la app en esta página. En cambio, esto es lo que debes hacer:
- Haz clic en Remix para editar para que el proyecto se pueda editar.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
El problema se debería abrir en una nueva pestaña de Chrome.
A medida que trabajes en este codelab, realiza cambios en el código de la Glitch incorporada en esta página. Actualiza la pestaña nueva con la app publicada para ver los cambios.
Familiarízate con la app de ejemplo y el código de inicio
Para comenzar, observa la app activa en la nueva pestaña de Chrome:
- Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
Haz clic en la pestaña Consola.
Asegúrate de que la opción Información esté seleccionada en el menú desplegable Niveles. junto al cuadro Filtro.
En la consola de Herramientas para desarrolladores de tu app activa, deberías ver un mensaje de consola:
TODO: Implement getRegistration()
.Este es un mensaje de un stub de función que implementarás en este codelab.
Ahora, echemos un vistazo al código de la app de ejemplo en el Glitch incorporado en esta página.
En la falla incorporada, observa
public/index.js
:Hay cuatro stubs para las funciones que implementarás:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
ysendNotification
.La función
requestPermission
solicita el permiso del usuario para enviar notificaciones. Si realizaste el codelab Cómo comenzar a usar la API de Notifications, notarás que aquí se usa su funciónrequestPermission
. La única diferencia es que ahora también actualiza la interfaz de usuario después de resolver la solicitud de permiso.La función
updateUI
actualiza todos los botones y mensajes de la app.La función
initializePage
detecta funciones para la capacidad del service worker en el navegador y actualiza la interfaz de usuario de la app.La secuencia de comandos espera hasta que la página se cargue y la inicializa.
En el Glitch incorporado, abre
public/service-worker.js
.Tal como lo sugiere el nombre, agregarás código a la app para registrar este archivo como service worker.
Aunque la app aún no usa el archivo, este contiene código de inicio que imprimirá un mensaje en la consola cuando se active el service worker.
Agregarás código a
public/service-worker.js
para controlar las notificaciones cuando el service worker las reciba.
Registra el service worker
En este paso, escribirás código que se ejecute
Cuando el usuario hace clic en Registrar service worker en la IU de la app
Este código registrará public/service-worker.js
como service worker.
En el editor de Glitch incorporado, abre
public/index.js
. Reemplaza la funciónregisterServiceWorker
por el siguiente código:// Use the Service Worker API to register a service worker. async function registerServiceWorker() { await navigator.serviceWorker.register('./service-worker.js') updateUI(); }
Ten en cuenta que
registerServiceWorker
usa la declaraciónasync function
para que el manejo de promesas sea más conveniente. Esto te permiteawait
el valor resuelto de unaPromise
. Por ejemplo, la función anterior espera el resultado del registro de un service worker antes de actualizar la IU. Consultaawait
en MDN para obtener más información.Ahora que el usuario puede registrar un service worker, puedes obtener una referencia al objeto de registro del service worker. En
public/index.js
, reemplaza la funcióngetRegistration
por el siguiente código:// Get the current service worker registration. function getRegistration() { return navigator.serviceWorker.getRegistration(); }
La función anterior usa API de Service Worker para obtener el registro del service worker actual, si existe. Por lo tanto, obtener una referencia al registro del service worker es un poco más conveniente.
Para completar la funcionalidad de registro del service worker, agrega código para cancelar el registro del service worker. Reemplaza la función
unRegisterServiceWorker
por el siguiente código:// Unregister a service worker, then update the UI. async function unRegisterServiceWorker() { // Get a reference to the service worker registration. let registration = await getRegistration(); // Await the outcome of the unregistration attempt // so that the UI update is not superceded by a // returning Promise. await registration.unregister(); updateUI(); }
En la pestaña donde estás viendo la app en vivo, vuelve a cargar la página. Los botones Register service worker y Unregister service worker ahora deberían funcionar.
Envía notificaciones al service worker
En este paso, escribirás código que se ejecutará cuando el usuario haga clic en Enviar una notificación en la IU de la app. Este código creará una notificación, verificará que un service worker esté registrado y, luego, enviará la notificación al service worker con su método postMessage
.
En el editor de Glitch incorporado, abre public/index.js
y
Reemplaza la función sendNotification
por el siguiente código:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
Esto es lo que hace el código:
sendNotification
es una función asíncrona, por lo que puedes usarawait
para obtener una referencia al registro del service worker.El método
postMessage
del service worker envía datos de la app al service worker. Consulta la documentación de MDN sobre postMessage para obtener más información.El código verifica la presencia de la propiedad
navigator.serviceWorker.controller
antes de intentar acceder a la funciónpostMessage
.navigator.serviceWorker.controller
seránull
si no hay un service worker activo o si se realizó la actualización forzada de la página (Shift+
Volver a cargar). Consulta la documentación del controlador de ServiceWorker en MDN para obtener más información.
Cómo controlar las notificaciones en el service worker
En este paso, escribirás código en el service worker que controlará los mensajes publicados en él y mostrará notificaciones al usuario.
En el editor de Glitch incorporado, abre public/service-worker.js
. Agrega el siguiente código al final del archivo:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
Aquí le presentamos una breve explicación:
self
es una referencia al service worker en sí.Si bien el service worker ahora controla la visualización de notificaciones, la IU principal de la app sigue siendo responsable de obtener el permiso de notificaciones del usuario. Si no se otorga el permiso, se rechaza la promesa que muestra
showNotification
. En el código anterior, se usa un bloquecatch
para evitar un error de rechazoPromise
no detectado y manejar este error con un poco más de facilidad.
Si no puedes avanzar, consulta glitch.com/edit/#!/codelab-notifications-service-worker-completed para obtener el código completado.
Continúa con el siguiente codelab de esta serie: Cómo compilar un servidor de notificaciones push.