Introducción a las aplicaciones web progresivas

Artículo
03/29/2023

Las Web Apps 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 Web Apps progresivas 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.

Tenga en cuenta que, 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 usa 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:

Diagrama de arquitectura de un PWA

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.

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

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.

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

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

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 básica.

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 más interesante visualmente. 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, pero aún no se puede instalar, porque no hay ningún trabajo de servicio. Hará que la aplicación se pueda instalar en el paso siguiente mediante la creación de un trabajo de servicio.

Paso 5: Agregar un trabajo de servicio

Los trabajadores de servicios son una tecnología clave que ayuda a que las PPA sean más rápidas e independientes de las condiciones de red.

Los trabajadores de servicio son trabajadores web especializados que interceptan las solicitudes de red de su PWA y habilitan escenarios que anteriormente se limitaban a aplicaciones nativas, entre las que se incluyen:

Compatibilidad sin conexión.
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.

Para que Microsoft Edge pueda instalar la aplicación, la aplicación debe tener un archivo de trabajo de servicio.

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 el install evento y lo usa para almacenar en caché todos los recursos que la aplicación necesita para funcionar: la página HTML de inicio, el archivo JavaScript 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, Trabajadores 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 y un trabajo de servicio, los exploradores auxiliares pueden instalarlo 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.

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

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

Pasos siguientes

El simple convertidor de temperatura PWA que ha construido hasta ahora solo raya la superficie de lo que los 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.

Ver también

Introducción con Web Apps Progresiva (Workshop).