Volver a interactuar con los usuarios con mensajes push
Los mensajes push son un canal de comunicación útil que permite a las aplicaciones actualizar a sus usuarios con contenido pertinente y oportuno. Los mensajes push se pueden usar para volver a interactuar con los usuarios con la aplicación.
Una de las ventajas más importantes de los mensajes push es que el servidor de la aplicación puede entregarlos aunque el usuario no use activamente la aplicación.
Las notificaciones de mensajes push participan en el centro de notificaciones del sistema y pueden mostrar imágenes e información de texto. Las notificaciones son útiles para alertar al usuario sobre una actualización importante en la aplicación. Sin embargo, las notificaciones se deben usar con poca frecuencia, ya que tienden a ser perjudiciales para el flujo de trabajo del usuario.
Para crear un PWA que admita notificaciones push:
- Solicite el permiso del usuario para recibir notificaciones push en el código del lado cliente de su PWA.
- Suscríbase a los mensajes push del servidor.
- Envíe mensajes push desde el código del lado servidor de su PWA.
- Mostrar notificaciones cuando se reciben mensajes push.
Paso 1: Solicitar el permiso del usuario para recibir notificaciones push
Para poder enviar notificaciones push a su PWA, debe solicitar permiso al usuario para recibir mensajes. Para solicitar permiso, use la API Notification.requestPermission en el código del lado cliente, como cuando el usuario hace clic en un botón:
button.addEventListener("click", () => {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
console.log("The user accepted to receive notifications");
}
});
});
Puede volver a comprobar el estado del permiso más adelante:
if (Notification.permission === "granted") {
console.log("The user already accepted");
}
Paso 2: Suscribirse a notificaciones push
Para recibir eventos de inserción desde el servidor, suscríbase a las notificaciones push mediante push API.
Antes de crear una nueva suscripción de inserción, Microsoft Edge comprueba si el usuario ha concedido el permiso PWA para recibir notificaciones.
Si el usuario no ha concedido el permiso PWA para recibir notificaciones, el explorador le pide permiso. Si el usuario no concede permiso al explorador, la solicitud de registration.pushManager.subscribe inicia .DOMException
El siguiente fragmento de código muestra cómo suscribirse a notificaciones push en su PWA:
async function subscribeToPushMessages() {
const serviceWorkerRegistration = await navigator.serviceWorker.ready;
// Check if the user has an existing subscription
let pushSubscription = serviceWorkerRegistration.pushManager.getSubscription();
if (pushSubscription) {
// The user is already subscribed to push notifications
return;
}
try {
// Subscribe the user to push notifications
pushSubscription = await serviceWorkerRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array("YOUR PUBLIC VAPID KEY HERE")
});
} catch (err) {
// The subscription wasn't successful.
console.log("Error", err);
}
}
// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
var padding = '='.repeat((4 - base64String.length % 4) % 4);
var base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
var rawData = window.atob(base64);
var outputArray = new Uint8Array(rawData.length);
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
La clave VAPID que se menciona en el fragmento de código anterior es una clave pública que se usa para identificar el servidor que envía los mensajes push y cifrar la carga del mensaje de inserción. Consulte Paso 3: Envío de mensajes push desde el servidor para obtener más información sobre las claves VAPID.
La userVisibleOnly opción de configuración de la registration.pushManager.subscribe función debe estar presente y establecerse en true. Esta opción indica que el mensaje de inserción debe mostrarse al usuario. Microsoft Edge no admite mensajes push que no se muestren al usuario.
Paso 3: Envío de mensajes push desde el servidor
La aplicación necesita claves VAPID (identificación voluntaria del servidor de aplicaciones) para enviar mensajes push desde el servidor a los clientes de PWA. Hay varios generadores de claves VAPID disponibles en línea (por ejemplo, Vapidkeys.com).
Una vez que tenga una clave VAPID, puede enviar mensajes push a los clientes de PWA mediante el protocolo de inserción web.
Puede usar una biblioteca para enviar mensajes push desde el servidor, en función del lenguaje de programación que use. Por ejemplo, puede usar la biblioteca de inserción web si el servidor usa Node.js. Otras bibliotecas están disponibles en el repositorio de bibliotecas de WebPush.
Paso 4: Mostrar notificaciones cuando se reciben mensajes push
Después de crear una suscripción en el PWA (como se muestra en Paso 2: Suscribirse a notificaciones push), agregue un push controlador de eventos en el trabajo de servicio para controlar los mensajes push enviados por el servidor.
El siguiente fragmento de código muestra cómo mostrar una notificación cuando se recibe un mensaje de inserción:
// Listen to push events.
self.addEventListener('push', event => {
// Check if the user has granted permission to display notifications.
if (Notification.permission === "granted") {
// Get the notification data from the server.
const notificationText = event.data.text();
// Display a notification.
const showNotificationPromise = self.registration.showNotification('Sample PWA', {
body: notificationText,
icon: 'images/icon512.png'
});
// Keep the service worker running until the notification is displayed.
event.waitUntil(showNotificationPromise);
}
});
Si el PWA no muestra una notificación cuando se recibe un mensaje push, Microsoft Edge muestra una notificación genérica que indica que se ha recibido un mensaje push.