Introducción a las Aplicaciones web progresivas
Las aplicaciones web progresivas (PWA) son aplicaciones que se compilan mediante tecnologías web y que se pueden instalar y ejecutar en todos los dispositivos, desde un código base.
Para obtener más información sobre qué son los PPA y sus ventajas, consulte Introducción a la Web Apps progresiva (PPA).
Esta guía está dirigida a los desarrolladores web que quieren aprender a crear PPA. Para obtener más información sobre cómo instalar y ejecutar PWA, consulte Instalación de un PWA en Uso de PWA en Microsoft Edge.
En esta guía, primero aprenderás cómo funcionan las PWA, luego creas tu primera PWA simple, que será una aplicación de convertidor de temperatura, y luego aprenderás a hacer excelentes PWA.
Puede encontrar el código fuente final de la aplicación que va a compilar en esta guía en el repositorio de la aplicación de demostración de introducción de PWA.
Requisitos previos
- Instale Visual Studio Code para editar el código fuente de PWA.
- Instale Node.js para usarlo como servidor web local.
- El conocimiento práctico de HTML, CSS y JavaScript también es una ventaja.
La arquitectura de un PWA
Los Web Apps progresivos se escriben mediante los lenguajes de programación de la web: HTML, CSS y JavaScript, y se distribuyen a los usuarios mediante servidores web.
Para que la aplicación esté disponible para los usuarios, implemente la aplicación en un servidor web al que se pueda acceder a través de HTTPS. El servidor contiene:
- Código de back-end: los puntos de conexión necesarios para que la aplicación, cuando está conectada a Internet, recupere el contenido dinámico que se puede almacenar en una base de datos en el servidor.
- Código front-end: los recursos necesarios para que la aplicación se instale en el dispositivo del usuario, como código HTML, CSS y JavaScript.
El código back-end puede usar los lenguajes del lado servidor de su elección, como ASP.NET, Java, Node.js o PHP. Sin embargo, tenga en cuenta que es posible que los puntos de conexión del lado servidor ni siquiera sean necesarios en función de la aplicación que esté compilando. La PWA que cree en este tutorial no tiene ningún código del lado servidor, ya que la aplicación se ejecuta exclusivamente en el dispositivo en el que está instalado y no necesita datos del lado servidor.
El código front-end solo usa HTML, CSS, JavaScript y un manifiesto JSON.
Usa HTML para describir el contenido de la aplicación, como el texto, las imágenes, los campos de texto o los botones que aparecen en la interfaz de usuario. A continuación, use CSS para organizar el contenido HTML en un diseño y proporcionar estilos a los elementos. Use JavaScript para agregar interacciones de usuario a la interfaz de usuario. Por último, se usa un archivo de manifiesto JSON que describe la aplicación en el sistema operativo host.
Aunque el código front-end se ejecuta mediante el explorador web del dispositivo, es posible que la interfaz de usuario del explorador no esté visible, ya que la aplicación puede optar por ejecutarse en una ventana independiente.
Además del código de la interfaz de usuario, también puede usar JavaScript para que la aplicación sea más rápida, confiable e independiente de la red mediante un archivo de trabajo de servicio. Por último, el código front-end también contiene un archivo de manifiesto JSON que describe la aplicación en el sistema operativo host.
En el diagrama siguiente se muestra la arquitectura de alto nivel de un PWA. El servidor web está en un lado de la PWA y el dispositivo está en el otro lado. El dispositivo contiene el código front-end, incluidos HTML, CSS, JavaScript, el trabajo del servicio y el manifiesto:
Paso 1: Inicio de un servidor web
Las PPA se distribuyen a los usuarios mediante servidores web. Una vez que la aplicación esté lista, impleméntela en la web mediante un proveedor de hospedaje web. A continuación, puede actualizar la aplicación simplemente implementando la nueva versión en el servidor web de nuevo.
Para empezar a desarrollar el PWA, puede usar un servidor web local en su lugar. Para iniciar un servidor local:
Cree una nueva carpeta en el equipo donde se ejecutará el servidor web.
Para ello, abra un símbolo del sistema y escriba:
cd path/to/your/dev/folder mkdir MySamplePWA cd MySamplePWA
Inicie el servidor mediante la
http-server
biblioteca de Node.js:npx http-server
Ahora tiene un servidor web local simple que se ejecuta en http://localhost:8080
.
Los elementos clave de la plataforma de Web Apps progresiva, como los trabajadores del servicio, requieren el uso de HTTPS. Cuando la PWA se pone en marcha, debe publicarla en una dirección URL HTTPS. Muchos hosts usan HTTPS de forma predeterminada, pero si el host no ofrece HTTPS, Let's Encrypt ofrece una alternativa gratuita para crear los certificados necesarios.
Por ejemplo, puede crear una cuenta gratuita de Azure. Si hospeda su sitio web en microsoft Azure App Service, se sirve a través de HTTPS de forma predeterminada.
También puede hospedar su sitio web en GitHub Pages , que también admite HTTPS.
Con fines de depuración, Microsoft Edge también permite que un localhost
servidor web use las API de PWA sin HTTPS.
Paso 2: Crear la página de inicio de la aplicación
Hasta ahora, no hay contenido disponible en el servidor web. Empiece por crear la primera página que los usuarios verán cuando accedan a la aplicación de convertidor de temperatura.
Abra Visual Studio Code, seleccione Abrir>carpeta y, a continuación, seleccione el
MySamplePWA
directorio que creó en el paso anterior.Cree un nuevo archivo en el proyecto presionando Ctrl+N, agregue el siguiente contenido y guarde el archivo como
index.html
:<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" /> <title>Temperature converter</title> </head> <body> <h1>Temperature converter</h1> </body> </html>
Vaya a
http://localhost:8080
para ver la aplicación:
Por ahora, la aplicación se ejecuta en el explorador y no se puede instalar. Para que la aplicación sea instalable, la aplicación necesita un manifiesto de aplicación web.
Paso 3: Creación de un manifiesto de aplicación web
Un manifiesto de aplicación web es un archivo JSON que contiene metadatos sobre la aplicación, como su nombre, descripción, iconos y las distintas características del sistema operativo que usa.
Ve:
- Manifiesto de aplicación web en Hacer que las PPA se puedan instalar en las guías de aplicaciones > web progresivas de referencias > de MDN>.
- Manifiestos de aplicación web en referencias de MDN > .
Para agregar un manifiesto de aplicación a la aplicación:
En Visual Studio Code, presione Ctrl+N para crear un nuevo archivo con el siguiente contenido y guarde el archivo como
manifest.json
.{ "lang": "en-us", "name": "Temperature converter app", "short_name": "Temperature converter", "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit", "start_url": "/", "background_color": "#2f3d58", "theme_color": "#2f3d58", "orientation": "any", "display": "standalone", "icons": [ { "src": "/icon512.png", "sizes": "512x512" } ] }
Agregue una imagen de icono de aplicación de 512 x 512 píxeles denominada
icon512.png
al proyecto. Puede usar la imagen de ejemplo con fines de prueba.En Visual Studio Code, abra
index.html
y agregue el código siguiente dentro de la<head>
etiqueta .<link rel="manifest" href="/manifest.json">
El fragmento de código anterior vincula el nuevo archivo de manifiesto de aplicación web al sitio web.
El proyecto de VS Code ahora debería tener un aspecto similar al siguiente:
Paso 4: Continuar creando la interfaz de usuario de la aplicación
Ahora que la aplicación tiene un archivo de manifiesto de aplicación web y una página de inicio, es el momento de compilar la funcionalidad principal de la aplicación.
En este paso del tutorial, crearemos una aplicación de conversión de unidad de temperatura.
Para crear el contenido principal de la interfaz de usuario, copie el siguiente código HTML y péguelo en el
index.html
archivo, reemplazando la<h1>
etiqueta HTML:<form id="converter"> <label for="input-temp">temperature</label> <input type="text" id="input-temp" name="input-temp" value="20" /> <label for="input-unit">from</label> <select id="input-unit" name="input-unit"> <option value="c" selected>Celsius</option> <option value="f">Fahrenheit</option> <option value="k">Kelvin</option> </select> <label for="output-unit">to</label> <select id="output-unit" name="output-unit"> <option value="c">Celsius</option> <option value="f" selected>Fahrenheit</option> <option value="k">Kelvin</option> </select> <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output> </form>
El código HTML anterior contiene un formulario con varios elementos de entrada que la aplicación usará para convertir un valor de temperatura de una unidad a otra.
Para que el convertidor funcione, use código JavaScript. Cree un nuevo archivo denominado
converter.js
en el proyecto y agréguele el código siguiente:const inputField = document.getElementById('input-temp'); const fromUnitField = document.getElementById('input-unit'); const toUnitField = document.getElementById('output-unit'); const outputField = document.getElementById('output-temp'); const form = document.getElementById('converter'); function convertTemp(value, fromUnit, toUnit) { if (fromUnit === 'c') { if (toUnit === 'f') { return value * 9 / 5 + 32; } else if (toUnit === 'k') { return value + 273.15; } return value; } if (fromUnit === 'f') { if (toUnit === 'c') { return (value - 32) * 5 / 9; } else if (toUnit === 'k') { return (value + 459.67) * 5 / 9; } return value; } if (fromUnit === 'k') { if (toUnit === 'c') { return value - 273.15; } else if (toUnit === 'f') { return value * 9 / 5 - 459.67; } return value; } throw new Error('Invalid unit'); } form.addEventListener('input', () => { const inputTemp = parseFloat(inputField.value); const fromUnit = fromUnitField.value; const toUnit = toUnitField.value; const outputTemp = convertTemp(inputTemp, fromUnit, toUnit); outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase(); });
Vuelva a abrir el
index.html
archivo y agregue el código siguiente después de la etiqueta de cierre</form>
para cargar el archivo JavaScript:<script src="converter.js"></script>
Ahora agregue un estilo CSS a la aplicación para que sea visualmente más atractivo. Cree un nuevo archivo llamado
converter.css
en el proyecto y agréguele el código siguiente:html { background: rgb(243, 243, 243); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 15pt; } html, body { height: 100%; margin: 0; } body { display: grid; place-items: center; } #converter { width: 15rem; padding: 2rem; border-radius: .5rem; box-shadow: 0 0 2rem 0 #0001; display: flex; flex-direction: column; align-items: center; } #converter input, #converter select { font-family: inherit; font-size: inherit; margin-block-end: 1rem; text-align: center; width: 10rem; } #converter #output-temp { font-size: 2rem; font-weight: bold; }
Vuelva a abrir
index.html
y haga referencia al nuevo archivo CSS que contiene agregando el código siguiente dentro de la<head>
etiqueta :<link rel="stylesheet" href="converter.css">
El proyecto de Visual Studio Code ahora debería tener un aspecto similar al siguiente:
Vaya a
http://localhost:8080
para ver la aplicación:
La aplicación hace algo útil ahora y los usuarios pueden instalarla como una aplicación independiente. Antes de instalar la aplicación, cree un trabajo de servicio para que la aplicación funcione sin conexión.
Paso 5: Agregar un trabajo de servicio
Los trabajadores de servicios son una tecnología clave que ayuda a que las PPA sean rápidas e independientes de las condiciones de red.
Un trabajador de servicio es un trabajo web especializado que puede interceptar solicitudes de red desde su PWA y permite escenarios como:
- Compatibilidad sin conexión, incluidas las conexiones intermitentes.
- Almacenamiento en caché avanzado.
- Ejecutar tareas en segundo plano, como recibir mensajes PUSH, agregar distintivos al icono de aplicación o capturar datos de un servidor.
Consulte API de Service Worker en MDN.
Una PWA no necesita tener un trabajador de servicio para que Microsoft Edge pueda instalar la aplicación. Sin embargo, se recomienda agregar un trabajo de servicio a su PWA para que sea más rápido y para que su PWA sea más confiable, como cuando el dispositivo tiene una conexión de red intermitente o está sin conexión.
Un trabajo de servicio se define en un archivo JavaScript cargado por la aplicación. Para agregar un trabajo de servicio al proyecto:
En Visual Studio Code, cree un nuevo archivo (Ctrl+N), agregue el siguiente contenido y guarde el archivo como
sw.js
:const CACHE_NAME = `temperature-converter-v1`; // Use the install event to pre-cache all initial resources. self.addEventListener('install', event => { event.waitUntil((async () => { const cache = await caches.open(CACHE_NAME); cache.addAll([ '/', '/converter.js', '/converter.css' ]); })()); }); self.addEventListener('fetch', event => { event.respondWith((async () => { const cache = await caches.open(CACHE_NAME); // Get the resource from the cache. const cachedResponse = await cache.match(event.request); if (cachedResponse) { return cachedResponse; } else { try { // If the resource was not in the cache, try the network. const fetchResponse = await fetch(event.request); // Save the resource in the cache and return it. cache.put(event.request, fetchResponse.clone()); return fetchResponse; } catch (e) { // The network failed. } } })()); });
El
sw.js
archivo actuará como trabajo de servicio de PWA. El código anterior escucha elinstall
evento, que se desencadena cuando el usuario instala la aplicación y la usa para almacenar en caché los recursos que la aplicación necesita para funcionar sin conexión, como la página HTML inicial, el archivo JavaScript del convertidor y el archivo CSS del convertidor.El código también intercepta eventos
fetch
, que se producen cada vez que la aplicación envía una solicitud al servidor y aplica una estrategia de cache-first. El trabajador del servicio devuelve recursos almacenados en caché para que la aplicación pueda funcionar sin conexión y, si se produce un error, intenta descargar desde el servidor.Abra
index.html
y agregue el código siguiente al final de la<body>
etiqueta para registrar el trabajo de servicio:<script> if('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js', { scope: '/' }); } </script>
Para confirmar que el trabajo de servicio se está ejecutando:
En Microsoft Edge, vaya a
http://localhost:8080
.Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.
Abra la herramienta Aplicación y, a continuación, haga clic en Trabajos de servicio. Si no se muestra el trabajo de servicio, actualice la página.
Para ver la caché del trabajo de servicio, expanda Almacenamiento en caché y seleccione temperature-converter-v1. Se deben mostrar todos los recursos almacenados en caché por el trabajador del servicio. Los recursos almacenados en caché por el trabajador del servicio incluyen el icono de la aplicación, el manifiesto de la aplicación y la página inicial.
Pruebe su PWA como una aplicación sin conexión. En DevTools, abra la herramienta Red y cambie el valor de Limitación a Sin conexión.
Actualice la aplicación. Debe aparecer correctamente en el explorador, con los recursos almacenados en caché que atiende el trabajador del servicio.
Paso 6: Instalación de la aplicación
Ahora que la aplicación tiene un manifiesto de aplicación web, los exploradores compatibles pueden instalar la aplicación como PWA.
En Microsoft Edge, una vez que actualice la aplicación, aparecerá el botón App available (Aplicación disponible ) en la barra de direcciones. Al hacer clic en el botón App available (Aplicación disponible ), se le pide que instale la aplicación localmente.
Haga clic en Instalar para instalar la aplicación localmente. Una vez completada la instalación, la aplicación se muestra en su propia ventana y su propio icono de aplicación en la barra de tareas.
Para obtener más información sobre la instalación de PWA, consulte Uso de PWA en Microsoft Edge.
Pasos siguientes
El convertidor de temperatura PWA que ha creado hasta ahora es solo una pequeña muestra de lo que las PWA pueden hacer. Los pasos anteriores son requisitos previos importantes para cualquier PWA, pero hay procedimientos recomendados importantes que harán que su PWA se sienta como una aplicación real cuando se instala.
Cuando los usuarios instalan aplicaciones, tienen ciertas expectativas de lo que estas aplicaciones pueden hacer; por ejemplo:
- Los usuarios esperan que las aplicaciones funcionen sin conexión.
- Los usuarios esperan que las aplicaciones se integren en el sistema operativo, como mediante el control de archivos.
- Los usuarios esperan que las aplicaciones realicen tareas informáticas no triviales.
- Los usuarios esperan encontrar aplicaciones en tiendas de aplicaciones.
Para crear una excelente PWA, consulte Procedimientos recomendados para PWA.
Consulte también
Local:
- Introducción a las aplicaciones web progresivas (PWA)
- Uso de PPA en Microsoft Edge
- Instalación de un PWA en Uso de PWA en Microsoft Edge.
- Procedimientos recomendados para PPA
MDN:
- Manifiestos de aplicación web en MDN.
- API de Service Worker en MDN.
Microsoft externo:
- Repositorio de aplicaciones de demostración de introducción a PWA
- Visual Studio Code
- Cuenta gratuita de Azure
- Microsoft Azure App Service
Externo: