Introducción a las aplicaciones web progresivas

Artículo
10/09/2024

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 las PWA y sus ventajas, consulte Información general sobre las aplicaciones web progresivas (PWA).

Esta guía está dirigida a los desarrolladores web que quieren aprender a crear PWA. Para obtener más información sobre la instalación y ejecución de PWA, consulte Instalación de una PWA in Uso de aplicaciones web progresivas en Microsoft Edge.

En esta guía, primero aprenderá cómo funcionan las PWA, luego creará su primera PWA sencilla, que será una aplicación de conversión de temperatura, y después obtendrá más información sobre cómo crear PWA grandiosas.

Puede encontrar el código fuente final de la aplicación que va a compilar en esta guía en el repositorio de aplicaciones de demostración de introducción a PWA.

Requisitos previos

Instale Visual Studio Code para editar el código fuente de PWA.
Instale Node.js para usarlo como servidor web local.
Conocimientos prácticos de HTML, CSS y JavaScript son una ventaja.

La arquitectura de una PWA

Los aplicaciones web progresivas se escriben con 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, impleméntela en un servidor web accesible a través de HTTPS. El servidor contiene:

Código back-end: los puntos de conexión que necesita la aplicación, cuando se conecta a Internet, para recuperar contenido dinámico que se puede almacenar en una base de datos del 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 que prefiera, como ASP.NET, Java, Node.js o PHP. Sin embargo, tenga en cuenta que los puntos de conexión del lado servidor pueden incluso no ser 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 esta se ejecuta exclusivamente en el dispositivo en el que está instalada y no necesita ningún dato del lado servidor.

El código front-end solo usa HTML, CSS, JavaScript y un manifiesto JSON.

Use 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. Después 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, use un archivo de manifiesto JSON que describa 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 sea 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 una PWA. El servidor web está en un lado de la PWA y el dispositivo en el otro. El dispositivo contiene el código front-end, incluidos HTML, CSS, JavaScript, el trabajo de servicio y el manifiesto:

Diagrama de la arquitectura de una PWA

Paso 1: Iniciar un servidor web

Las PWA 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 de nuevo la nueva versión en el servidor web.

Para empezar a desarrollar su 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 el símbolo del sistema y escriba:
```
cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA
```
Inicie el servidor mediante la biblioteca Node.js http-server:
```
npx http-server
```

Ahora tiene un servidor web local sencillo que se ejecuta en http://localhost:8080.

Las partes clave de la plataforma de las aplicaciones web progresivas, como los trabajos de servicio, requieren el uso de HTTPS. Cuando la PWA esté activa, debe publicarla en una dirección URL HTTPS. Muchos hosts usan HTTPS de forma predeterminada, pero si su 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 servidor web localhost 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 verán los usuarios cuando accedan a su aplicación de conversión de temperatura.

Abra Visual Studio Code, seleccione Archivo>Abrir carpeta y, luego, seleccione el directorio MySamplePWA que creó en el paso anterior.

Para crear un archivo en el proyecto, presione 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 poderse instalar, la aplicación necesita un manifiesto de aplicación web.

Paso 3: 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 su nombre, descripción, iconos y las distintas características del sistema operativo que usa. Para obtener más información, consulte Usar un manifiesto de aplicación web para integrar una PWA en el sistema operativo.

Para agregar un manifiesto de aplicación a su aplicación:

En Visual Studio Code, presione Ctrl+N para crear un 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 etiqueta <head>.
```
<link rel="manifest" href="/manifest.json">
```

El fragmento de código anterior vincula el nuevo archivo de manifiesto de la aplicación web a su sitio web.

Su proyecto de VS Code ahora debería tener un aspecto como este:

Captura de pantalla de VS Code que muestra el proyecto de PWA de ejemplo, con los archivos de icono, manifest.json e index.html

Paso 4: Continuar la compilación de 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 momento de crear la función principal de la aplicación.

En este paso del tutorial, crearemos una aplicación de conversión de unidades de temperatura.

Para crear el contenido de la interfaz de usuario principal, copie el siguiente código HTML y péguelo en el archivo index.html, reemplazando la etiqueta HTML <h1>:

<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 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 archivo index.html 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 algo de estilo CSS a la aplicación para que sea más atractiva visualmente. Cree un 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 etiqueta <head>:
```
<link rel="stylesheet" href="converter.css">
```
Su proyecto de Visual Studio Code ahora debería tener un aspecto como este:
Vaya a http://localhost:8080 para ver la aplicación:

Ahora la aplicación tiene una función útil 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 servicio son una tecnología clave que ayuda a que las PWA sean rápidas e independientes de las condiciones de la red.

Un trabajo de servicio es un trabajo web especializado que puede interceptar solicitudes de red de la PWA y permite escenarios como:

Compatibilidad sin conexión, incluidas las conexiones intermitentes.
Almacenamiento en caché avanzado.
Ejecución de tareas en segundo plano, como recibir mensajes PUSH, agregar distintivos al icono de la aplicación o capturar datos de un servidor.

No es necesario que una PWA tenga un trabajo de servicio para que Microsoft Edge pueda instalar la aplicación. Sin embargo, se recomienda agregar un trabajo de servicio a la PWA para que sea más rápida y más confiable, por ejemplo, cuando su 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 a su proyecto:

En Visual Studio Code, cree un 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 archivo sw.js actuará como el trabajo de servicio de su PWA. El código anterior escucha el evento install, que se desencadena cuando el usuario instala la aplicación, y lo 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 los eventos fetch, que se producen cada vez que la aplicación envía una solicitud al servidor, y aplica una estrategia de primero en caché. El trabajo de servicio devuelve recursos almacenados en caché para que la aplicación pueda trabajar 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 etiqueta <body> 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, luego, 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 trabajo de servicio. Los recursos almacenados en caché por el trabajo de 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. Debería seguir apareciendo correctamente en el explorador, usando los recursos almacenados en caché proporcionados por el trabajo de servicio.

Paso 6: Instalar la aplicación

Ahora que la aplicación tiene un manifiesto de aplicación web, los exploradores compatibles pueden instalarla como una PWA.

En Microsoft Edge, una vez que actualiza la aplicación, el botón Aplicación disponible aparece en la barra de direcciones. Al hacer clic en el botón Aplicación disponible, se le pedirá que instale la aplicación localmente.

Haga clic en Instalar para instalar la aplicación localmente. Una vez completada la instalación, se muestra la aplicación en su propia ventana y su propio icono de aplicación en la Barra de tareas.

PWA de ejemplo, instalada y en ejecución en su propia ventana

Para obtener más información sobre la instalación de PWA, consulte Uso de aplicaciones web progresivas en Microsoft Edge.

Pasos siguientes

La PWA del convertidor de temperatura que ha creado hasta ahora es solo una pequeña muestra de lo que pueden hacer las PWA. 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 ha instalado.

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 dentro del sistema operativo, por ejemplo, gestionando archivos.
Los usuarios esperan que las aplicaciones realicen tareas informáticas no triviales.
Los usuarios esperan encontrar las aplicaciones en las tiendas de aplicaciones.

Para crear una PWA excelente, consulte Procedimientos recomendados para las PWA.

Consulte también

Introducción a las aplicaciones web progresivas (taller).

Compartir a través de