Introducción a Las aplicaciones web progresivas (Chromium)

Las aplicaciones web progresivas (PWAs) son aplicaciones web que se mejoran progresivamente. Las mejoras progresivas incluyen características como aplicaciones, como la instalación, la compatibilidad sin conexión y las notificaciones de inserción. También puedes empaquetar tu PWA para almacenes de aplicaciones. Entre las posibles tiendas de aplicaciones se incluyen Microsoft Store, Google Play, Mac App Store y mucho más. Microsoft Store es la tienda de aplicaciones comercial integrada en Windows 10.

En la siguiente guía se ofrece información general sobre los conceptos básicos de PWA mediante la creación de una aplicación web sencilla y su extensión como PWA. El proyecto terminado funciona en exploradores modernos.

Sugerencia

Puedes usar PWABuilder para crear una PWA nueva, mejorar tu PWA existente o empaquetar tu PWA para almacenes de aplicaciones.

Requisitos previos

Crear una aplicación web básica

Para crear una aplicación web vacía, siga los pasos de Node Express App Generatory asigne un nombre a la aplicación MySamplePwa .

En el símbolo del sistema, ejecute los siguientes comandos.

npx express-generator --no-view
npm install

Los comandos crean una aplicación web vacía e instalan cualquier dependencia.

Ahora tienes una aplicación web sencilla y funcional. Para iniciar la aplicación web, ejecute el siguiente comando.

npm start

Ahora vaya a http://localhost:3000 ver la nueva aplicación web.

Ejecutar el nuevo PWA en localhost

Introducción a la creación de un PWA

Ahora que tienes una aplicación web sencilla, prorrogarla como PWA agregando los tres requisitos para las PWA: HTTPS, un manifiesto de aplicación weby un trabajador de servicio.

Paso 1: Usar HTTPS

Las partes clave de la plataforma PWA, como los trabajadores deservicio, requieren el uso de HTTPS. Cuando el PWA entre en servicio, debes publicarlo en una dirección URL HTTPS.

Para fines de depuración, Microsoft Edge también permite usar http://localhost las API de PWA.

Publique la aplicación web como un sitio en directo,pero asegúrese de que el servidor está configurado para HTTPS. Por ejemplo, puede crear una cuenta gratuita de Azure. Hospedar el sitio en el Servicio de aplicaciones de Microsoft Azure y se sirve a través de HTTPS de forma predeterminada.

La siguiente guía, use http://localhost para crear su PWA.

Paso 2: Crear un manifiesto de aplicación web

Un manifiesto de aplicación web es un archivo JSON que contiene metadatos sobre la aplicación, como el nombre, la descripción, los iconos y mucho más.

Para agregar un manifiesto de aplicación a la aplicación web:

  1. En Visual Studio, elija Archivo > abrir carpeta y elija el directorio que MySamplePwa creó anteriormente.

  2. Seleccione Ctrl + N para crear un nuevo archivo y pegue el siguiente fragmento de código.

    {
        "lang": "en-us",
        "name": "My Sample PWA",
        "short_name": "SamplePWA",
        "description": "A sample PWA for testing purposes",
        "start_url": "/",
        "background_color": "#2f3d58",
        "theme_color": "#2f3d58",        
        "orientation": "any",
        "display": "standalone",
        "icons": [
            {
                "src": "/icon512.png",
                "sizes": "512x512"
            }
        ]
    }
    
  3. Guarde el archivo como /MySamplePwa/public/manifest.json .

  4. Agregue una imagen de icono de aplicación de 512x512 denominada icon512.png a /MySamplePwa/public/images . Puede usar la imagen de ejemplo con fines de prueba.

  5. En Visual Studio, abra y agregue el siguiente fragmento /public/index.html de código dentro de la <head> etiqueta.

    <link rel="manifest" href="/manifest.json">
    

Paso 3: Agregar un trabajador de servicio

Los trabajadores de servicio son la tecnología clave detrás de las PWA, lo que permite escenarios como la compatibilidad sin conexión, el almacenamiento en caché avanzado y la ejecución de tareas en segundo plano anteriormente limitadas a aplicaciones nativas.

Los trabajadores de servicio son tareas en segundo plano que interceptan solicitudes de red desde la aplicación web. Los trabajadores del servicio intentan completar tareas, incluso cuando el PWA no se está ejecutando. Las tareas incluyen las siguientes acciones.

  • Servir recursos solicitados desde una memoria caché
  • Envío de notificaciones de inserción
  • Ejecutar tareas de captura en segundo plano
  • Iconos de badging
  • y mucho más

Los trabajadores de servicio se definen en un archivo JavaScript especial. Para obtener más información, vaya a Using Service Workers and Service Worker API.

Para crear un trabajador de servicio en el proyecto, use la receta de trabajo de servicio de red de caché de PWA Builder.

  1. Vaya a pwabuilder.com/serviceworker, seleccione el trabajador de servicio de red primero en caché y seleccione el botón Descargar. El archivo descargado contiene los siguientes archivos:

    • pwabuilder-sw-register.js
    • pwabuilder-sw.js
  2. Copie los archivos descargados en la public carpeta del proyecto de la aplicación web.

  3. En Visual Studio code, abra y agregue el siguiente fragmento /public/index.html de código dentro de la <head> etiqueta.

    <script type="module" src="/pwabuilder-sw-register.js"></script>
    

La aplicación web ahora tiene un trabajador de servicio que usa la estrategia de primero en caché. El nuevo trabajador de servicio captura primero los recursos de la memoria caché y de la red solo según sea necesario. Los recursos almacenados en caché incluyen imágenes, JavaScript, CSS y HTML.

Siga estos pasos para confirmar que se ejecuta el trabajador de servicio.

  1. Navegue a la aplicación web con http://localhost:3000 . Si la aplicación web no está disponible, ejecute el siguiente comando.

    npm start
    
  2. En Microsoft Edge, seleccione F12 para abrir Microsoft Edge DevTools. Seleccione Aplicacióny, a continuación, Trabajadores de servicio para ver los trabajadores del servicio. Si no se muestra el trabajador del servicio, actualice la página.

    Introducción al trabajador del servicio DevTools de Microsoft Edge

  3. Para ver la caché de trabajo de servicio, expanda Almacenamiento en caché y seleccione pwabuilder-precache. Se deben mostrar todos los recursos almacenados en caché por el trabajador de servicio. Los recursos almacenados en caché por el trabajador de servicio incluyen el icono de la aplicación, el manifiesto de la aplicación, CSS y los archivos JavaScript.

    Caché de trabajo de servicio en Microsoft Edge DevTools

  4. Prueba tu PWA como una aplicación sin conexión. En Microsoft Edge DevTools ( F12 ), **** elija Red y, a continuación, cambie el estado En línea a Sin conexión.

    Establecer la aplicación en modo sin conexión en Microsoft Edge DevTools

  5. Actualiza la aplicación y debería mostrar el mecanismo sin conexión para servir los recursos de la aplicación desde la memoria caché.

    PWA que se ejecuta sin conexión

Agregar notificaciones de inserción a su PWA

Puede crear PWA que admitan notificaciones de inserción completando las siguientes tareas.

  1. Suscribirse a un servicio de mensajería mediante la API de inserción
  2. Mostrar un mensaje del sistema cuando se recibe un mensaje del servicio mediante la API de notificaciones

Al igual que con los trabajadores de servicio, las API de notificación de inserción son API basadas en estándares. Las API de notificación de inserción funcionan en todos los exploradores, por lo que el código debe funcionar en todas partes en las que se admiten las PWA. Para obtener más información acerca de cómo entregar mensajes de inserción a diferentes exploradores del servidor, vaya a Web-Push.

Los siguientes pasos se han adaptado del Libro de recetas Push Rich Demo in Service Worker proporcionado por Mozilla, que tiene una serie de otras recetas útiles de inserción web y de trabajo de servicio.

Paso 1: Generar claves VAPID

Las notificaciones push requieren claves VAPID (Voluntary Application Server Identification) para enviar mensajes de inserción al cliente de PWA. Hay varios generadores de claves VAPID disponibles en línea (por ejemplo, vapidkeys.com). Después de la generación, debe obtener un objeto JSON que contenga una clave pública y privada. Guarde las claves para los pasos posteriores del siguiente tutorial. Para obtener información acerca de VAPID y WebPush, vaya a Enviar notificaciones de WebPush identificadas por VAPID mediante el Servicio de inserción de Mozilla.

Paso 2: suscribirse a notificaciones de inserción

Los trabajadores de servicio controlan eventos de inserción e interacciones de notificación del sistema en su PWA. Para suscribir el PWA a las notificaciones de inserción del servidor, asegúrese de que se cumplen las siguientes condiciones.

  • El PWA está instalado, activo y registrado
  • El código para completar la tarea de suscripción está en el subproceso de interfaz de usuario principal de la PWA
  • Tiene conectividad de red

Antes de crear una nueva suscripción de inserción, Microsoft Edge comprueba si el usuario concedió el permiso de PWA para recibir notificaciones. Si no es así, el explorador le pedirá permiso al usuario. Si se deniega el permiso, la solicitud registration.pushManager.subscribe para iniciar un , que debe DOMException controlarse. Para obtener más información sobre la administración de permisos, vaya a Notificaciones de inserción en Microsoft Edge.

En el pwabuilder-sw-register.js archivo, anexa el siguiente fragmento de código.

// Ask the user for permission to send push notifications.
navigator.serviceWorker.ready
    .then(function (registration) {
        // Check if the user has an existing subscription
        return registration.pushManager.getSubscription()
            .then(function (subscription) {
                if (subscription) {
                    return subscription;
                }
                
                const vapidPublicKey = "PASTE YOUR PUBLIC VAPID KEY HERE";             
                return registration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
                });
            });
    });

// 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;
}

Para obtener más información, vaya a PushManager y Web-Push.

Paso 3: escuchar notificaciones de inserción

Después de crear una suscripción en su PWA, agregue controladores al trabajador del servicio para responder a eventos de inserción. El evento Push se envía desde el servidor para mostrar notificaciones del sistema. Las notificaciones del sistema muestran los datos de un mensaje recibido. Para completar las siguientes tareas, debe agregar un click controlador.

  • Descartar la notificación del sistema
  • Abrir, enfocar o abrir y enfocar cualquier ventana abierta
  • Abrir y centrar una nueva ventana para mostrar una página de cliente de PWA

En el pwabuilder-sw.js archivo, agregue los siguientes controladores.

// Respond to a server push with a user notification.
self.addEventListener('push', function (event) {
    if (Notification.permission === "granted") {
        const notificationText = event.data.text();
        const showNotification = self.registration.showNotification('Sample PWA', {
            body: notificationText,
            icon: 'images/icon512.png'
        });
        // Ensure the toast notification is displayed before exiting the function.
        event.waitUntil(showNotification);
    }
});

// Respond to the user selecting the toast notification.
self.addEventListener('notificationclick', function (event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();
    
    // This attempts to display the current notification if it is already open and then focuses on it.
    event.waitUntil(clients.matchAll({
        type: 'window'
    }).then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
            var client = clientList[i];
            if (client.url == 'http://localhost:1337/' && 'focus' in client)
                return client.focus();
        }
        if (clients.openWindow)
            return clients.openWindow('/');
    }));
});

Paso 4: Pruébalo

Para probar las notificaciones de inserción de su PWA, siga estos pasos.

  1. Vaya a su PWA en http://localhost:3000 . Cuando el trabajador de servicio se activa e intenta suscribir su PWA a notificaciones push, Microsoft Edge le pide que permita que su PWA muestre notificaciones. Seleccione Permitir.

    Cuadro de diálogo de permisos para habilitar notificaciones

  2. Simular una notificación de inserción del lado servidor. Con el PWA abierto en http://localhost:3000 el explorador, seleccione F12 para abrir DevTools. Elija Insercióndel trabajador del servicio de > **** > **** aplicación para enviar una notificación de inserción de prueba a su PWA.

    Una notificación de inserción debe mostrarse cerca de la barra de tareas.

    Insertar una notificación desde DevTools

    Si no seleccionas (o activate) una notificación del sistema, el sistema la descarta automáticamente después de varios segundos y la pone en cola en el Centro de acciones de Windows.

    Notificaciones en el Centro de acciones de Windows

Pasos siguientes

Los siguientes pasos incluyen tareas adicionales que le ayudarán a comprender la creación de pwas reales.

Consulte también