Introducción a las aplicaciones web progresivas

  • Artículo
  • Tiempo de lectura: 6 minutos

Las aplicaciones web progresivas (PWA) 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, como Microsoft Store, Google Play y Mac App Store. El Microsoft Store es la tienda de aplicaciones comercial que está integrada en Windows 10 y posterior.

En esta introducción PWA conceptos básicos, se crea una aplicación web sencilla y se amplía como una PWA. El proyecto terminado funciona en exploradores modernos.

Sugerencia

Puedes usar PWABuilder para crear un nuevo PWA, mejorar los PWA existentes o empaquetar tu PWA para almacenes de aplicaciones.

Requisitos previos

Creación de 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, que crean una aplicación web vacía e instalan las dependencias:

npx express-generator --no-view

npm install

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.

Ejecución de la nueva PWA localhost.

Introducción a la creación de PWA

Ahora que tienes una aplicación web sencilla, exándala como una aplicación web progresiva (PWA) agregando los tres requisitos para las PWA:

Paso 1: Usar HTTPS

Las partes clave de la plataforma de aplicaciones web progresivas, como los trabajadores deservicio, requieren el uso de HTTPS. Cuando el PWA se publique, debe publicarlo en una dirección URL HTTPS. Muchos hosts ahora ofrecen HTTPS de forma predeterminada, pero si el host no lo hace, Let's Encrypt ofrece una alternativa gratuita para crear los certificados necesarios.

Para fines de depuración, Microsoft Edge también permite usar las API PWA http://localhost web. En este tutorial, se usa http://localhost para crear el 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. Si hospedas el sitio de la aplicación en Microsoft Azure App Service,se sirve a través de HTTPS de forma predeterminada.

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 Code, seleccione Archivoabrir carpeta y, a continuación, > **** seleccione el directorio MySamplePwa que creó anteriormente.

  2. Presione Ctrl + N para crear un nuevo archivo.

  3. Copie y pegue el siguiente código en el nuevo archivo:

    {
    "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"
        }
    ]
}

  4. Guarde el archivo como /MySamplePwa/public/manifest.json .

  5. 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.

  6. En Visual Studio Code, abra /public/index.html y agregue el siguiente 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. Los trabajadores del servicio habilitan escenarios que anteriormente estaban limitados a aplicaciones nativas, como:

  • Compatibilidad sin conexión.
  • Almacenamiento en caché avanzado.
  • Ejecución de tareas en segundo plano.

Los trabajadores de servicio son trabajadores web especializados que interceptan solicitudes de red desde la aplicación web. Los trabajadores de servicio pueden ejecutar tareas incluso PWA no se está ejecutando, incluidos:

  • Servir recursos solicitados desde una memoria caché.
  • Enviar notificaciones de inserción.
  • Ejecutar tareas de captura en segundo plano.
  • Iconos de desabado.

Los trabajadores de servicio se definen en un archivo JavaScript especial, descrito en 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 cache de PWA Builder, como se muestra a continuación.

  1. Copie los archivos de origenpwabuilder-sw-register.js y pwabuilder-sw.js en la carpeta del proyecto de la public aplicación web.

  2. En Visual Studio Code, abra /public/index.html .

  3. Dentro de <head> la etiqueta, agregue el siguiente código.

    <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.

Confirme que el trabajador de servicio se ejecuta de la siguiente manera:

  1. Vaya a la aplicación web en 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 DevTools. Seleccione Aplicacióny, a continuación, Trabajadores de servicio para ver los trabajadores del servicio. Si no se muestra el trabajador de servicio, actualice la página.

    Introducción al trabajador de servicio de DevTools.

  3. Para ver la caché de trabajo de servicio, expanda Caché Storage 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 DevTools.

  4. Prueba tu PWA como una aplicación sin conexión, como se muestra a continuación. En DevTools, seleccione Redy, a continuación, cambie el estado de En línea a Sin conexión.

    Establecer la aplicación en modo sin conexión en DevTools.

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

    Un PWA sin conexión.

La aplicación ahora se puede instalar.

Procedimientos recomendados y pasos siguientes

Para crear una aplicación sólida y real PWA, tenga en cuenta los siguientes procedimientos recomendados para el desarrollo de aplicaciones web.

Compatibilidad entre exploradores

Pruebe la compatibilidad entre exploradores de la aplicación. Asegúrese de que su PWA funciona, probando en diferentes exploradores y entornos. Vea Herramientas en Microsoft Edge Developer.

Diseño adaptativo

Usa diseños fluidos e imágenes flexibles. El diseño dinámico incluye los siguientes elementos que adaptan la experiencia de usuario al dispositivo del usuario:

Para probar la aplicación localmente, usa las herramientas de emulación de dispositivos desde el explorador. Para probar la aplicación directamente en un dispositivo de destino, crea una sesión de depuración remota en Windows o Android.

Compatibilidad con la vinculación profunda

Admite la vinculación profunda. Enruta cada página del sitio a una dirección URL única para que los usuarios existentes puedan ayudarle a atraer a una audiencia aún más amplia a través del uso compartido de redes sociales.

Proporcionar una experiencia sin conexión enriquec

Proporcionar una experiencia sin conexión enriquecte. Haz que la aplicación funcione incluso si el dispositivo del usuario está sin conexión. Proporcione una página sin conexión personalizada en lugar de usar la página sin conexión predeterminada del explorador.

Usar prácticas de validación y pruebas

Use prácticas de validación y pruebas de software. Usa herramientas de calidad de código como webhint linter para optimizar la eficiencia, la solidez, la seguridad y la accesibilidad de la aplicación.

Consulte también