Compartir a través de

Introducción al desarrollo de una PWA

Una aplicación web progresiva (PWA) es una aplicación que se compila mediante tecnologías web como HTML, CSS y JavaScript, y que también se puede instalar y ejecutar en varios sistemas operativos de dispositivo, desde un único código base.

Mediante el uso de este artículo junto con el ejemplo de convertidor de temperatura, que se realiza para aprender a crear un PWA, podrá:

  • Personalice el PWA del convertidor de temperatura realizando pequeñas modificaciones del código del ejemplo.

  • Cree su propia PWA copiando y pegando todo el directorio de ejemplo y modificando ampliamente el código.

Consulta también:

La arquitectura de una aplicación web progresiva

En el diagrama siguiente se muestra la arquitectura de alto nivel de una aplicación web progresiva (PWA):

Diagrama de arquitectura de un PWA

A la izquierda, el dispositivo que ejecuta el front-end de la PWA tiene los archivos del código front-end de un PWA.

A la derecha, el servidor web ejecuta el código back-end (o contenido de base de datos) de un PWA.

El dispositivo contiene el código front-end, incluidos HTML, CSS, JavaScript, el trabajo del servicio y el manifiesto. Esto es así independientemente de si la aplicación web progresiva (PWA) se usa como una aplicación web en el explorador o como una aplicación local instalada en el dispositivo.

Al igual que una aplicación web normal, una aplicación web progresiva se escribe con los lenguajes de programación de la web: HTML, CSS y JavaScript, y se distribuye a los usuarios mediante un servidor web. Si la aplicación web es una aplicación web progresiva, el usuario ve inicialmente la aplicación web en un explorador web y la barra de direcciones también tiene un botón App available (Aplicación disponible ) que pide al usuario que instale la aplicación localmente.

Implementación de un PWA en un servidor web de producción

Para que una aplicación web progresiva (PWA) esté disponible para los usuarios, implemente la aplicación web progresiva (PWA) en un servidor web al que se pueda acceder a través de HTTPS (a diferencia de un entorno de desarrollo local). El servidor web envía el código front-end a los usuarios y ejecuta el código back-end para la aplicación web.

Algunas partes de la plataforma de Web Apps progresiva (PWA), como los trabajadores del servicio, requieren el uso de HTTPS.

Si la aplicación web progresiva (PWA) no tiene código back-end, la aplicación web progresiva (PWA) se puede servir desde un servidor web estático. Por ejemplo, el convertidor de temperatura en https://microsoftedge.github.io/Demos/temperature-converter/ usa el github.io servidor estático de GitHub.

En el artículo Ejemplo de convertidor de temperatura se ha ejecutado y probado la aplicación web progresiva de ejemplo en el servidor local. Cuando se haya probado su propia aplicación web progresiva y esté lista para distribuirla, distribuirá la PWA probada a los usuarios a través de un servidor web (un proveedor de hospedaje web).

Para actualizar la aplicación web progresiva, vuelva a implementar la nueva versión en el servidor web.

Hosts de servidor web de ejemplo

Cuando la aplicación web progresiva (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 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 (pages.github.com), que admite HTTPS. Consulte la documentación de GitHub Pages.

Acerca de localhost (http) frente al servidor de producción (https)

Cuando se usa un servidor web de desarrollo local en la localhost dirección , la dirección URL suele comenzar por http, no httpspor . Las partes clave de la plataforma de Web Apps progresiva, como los trabajadores del servicio, requieren el uso de HTTPS, no HTTP.

Con fines de desarrollo y depuración, Microsoft Edge (o una ventana que hospeda una aplicación local de PWA) permite que la localhost dirección ejecute las API de aplicación web progresiva (PWA) sin HTTPS.

Archivos de código de front-end (código de interfaz de usuario)

Una aplicación web progresiva (PWA) tiene archivos de código front-end enviados por el servidor web al explorador en el dispositivo local.

El código front-end es los recursos necesarios para que la aplicación se instale en el dispositivo del usuario, como código HTML, CSS y JavaScript.

Una aplicación web progresiva (PWA) normalmente incluye los siguientes archivos de código front-end:

  • Un archivo 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.

  • Un archivo CSS para organizar el contenido HTML en un diseño y proporcionar estilos a los elementos.

  • Un archivo JavaScript para agregar interacciones de usuario a la interfaz de usuario.

  • Un archivo de manifiesto JSON para describir la aplicación en el sistema operativo host.

  • Un archivo de trabajo del servicio JavaScript para almacenar en caché los archivos de código front-end de la aplicación y ejecutar tareas en segundo plano.

El código front-end de una aplicación web progresiva (PWA) se ejecuta mediante el explorador web del dispositivo. La propia interfaz de usuario del explorador no es visible cuando la aplicación se ejecuta en una ventana independiente, que es una ventana del explorador simplificada con controles mínimos de interfaz de usuario del explorador.

Código de back-end, archivos, puntos de conexión y datos (código del lado servidor)

Una aplicación web progresiva (PWA) potencialmente tiene código back-end que reside y se ejecuta en el servidor web.

Al igual que una aplicación web, una aplicación web progresiva puede incluir código back-end (código del lado servidor) que implementa cualquier punto de conexión de API de servicio web que la aplicación necesita, cuando está conectada a Internet, para recuperar contenido dinámico que se puede almacenar en una base de datos en el servidor.

El código back-end de una aplicación web progresiva puede usar los lenguajes del lado servidor de su elección, como:

  • ASP.NET
  • Java
  • Node.js
  • PHP

Es posible que no se necesiten puntos de conexión de API de servicio web del lado servidor, en función de la aplicación que esté compilando.

El PWA de ejemplo del convertidor de temperatura 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.

En las secciones restantes se explican los archivos que componen el ejemplo de PWA.

Manifiesto de aplicación web (manifest.json)

Una aplicación web normal solo se ejecuta en el explorador. Al agregar un manifiesto de aplicación web, la aplicación web se convierte en una aplicación web progresiva (PWA). El manifiesto de aplicación web permite a los exploradores que admiten PWA instalar la aplicación web como una aplicación web progresiva en el dispositivo.

Un manifiesto de aplicación web es un archivo JSON que contiene metadatos sobre la aplicación web progresiva, como su nombre, descripción, iconos y las distintas características del sistema operativo que usa. El código JSON describe la aplicación en el sistema operativo host. El archivo de manifiesto proporciona información básica sobre la aplicación web progresiva para que el sistema operativo del dispositivo lo use.

El nombre manifest.json de archivo es una convención común, no un requisito estricto.

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

Consulta también:

El trabajo de servicio para almacenar en caché los archivos de la aplicación en el dispositivo local (sw.js)

Una aplicación web progresiva (PWA) puede usar un archivo JavaScript de trabajo de servicio (como sw.js), para almacenar en caché los archivos de front-end y de interfaz de usuario en el dispositivo local. Un trabajo de servicio se define en un archivo JavaScript dedicado cargado por la aplicación (distinto del archivo principal .js que contiene la lógica de la aplicación).

Un trabajador de servicio es un trabajo web especializado que puede interceptar solicitudes de red desde la aplicación web progresiva. El trabajo de servicio habilita escenarios como:

  • Compatibilidad sin conexión, incluida la conexión intermitente a Internet.
  • Almacenamiento en caché avanzada en el dispositivo.
  • Ejecutar tareas en segundo plano, como recibir mensajes PUSH, agregar distintivos al icono de aplicación o capturar datos de un servidor.

Un trabajador de servicio es una tecnología clave que ayuda a que una aplicación web progresiva sea rápida e independiente de las condiciones de red. El trabajador del servicio realiza la aplicación:

  • Más rapidez.
  • Más confiable.
  • Independiente de la red; la aplicación sigue funcionando (de alguna manera), incluso con una conexión a Internet intermitente o que falta.

Este archivo desw.js de ejemplo es un trabajo de servicio que administra los archivos de almacenamiento en caché que forman parte de la PWA del convertidor de temperatura, almacenando en caché los archivos en la unidad local y sirviéndolos cuando no hay conexión a Internet.

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
        }
    }
  })());
});

Este trabajo de servicio almacena explícitamente en caché tres archivos:

  • ./ medio index.html
  • ./converter.js
  • ./converter.css

El explorador almacena automáticamente en caché dos archivos adicionales:

  • El archivo de icono (.png).
  • El archivo de manifiesto (.json).

Escuchar el install evento

El trabajador del servicio escucha el install 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:

  • Página HTML inicial.
  • El archivo JavaScript principal de la aplicación que contiene la lógica de la aplicación.
  • Archivo CSS de la aplicación.

Para habilitar la instalación de la aplicación, un archivo de trabajo del servicio JavaScript permite que la aplicación funcione sin conexión (sin tener siempre una conexión a Internet), mediante el almacenamiento en caché de los archivos front-end necesarios en el dispositivo local.

Escuchar el fetch evento

El trabajador del servicio 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, el trabajador del servicio intenta descargar el archivo del servidor en su lugar.

Un trabajo de servicio es opcional

Una aplicación web progresiva (PWA) no necesita tener un trabajo de servicio para que Microsoft Edge pueda instalar la aplicación. Sin embargo, se recomienda incluir un trabajador de servicio en su propia aplicación web progresiva para que sea más rápido y para que la aplicación sea más confiable, como cuando el dispositivo tiene una conexión de red intermitente o está sin conexión.

Consulta también:

Pasos siguientes

Siga los pasos descritos en Muestra del convertidor de temperatura. A continuación, para crear su propia aplicación web progresiva (PWA), puede copiar, pegar y modificar el Demos\temperature-converter directorio. El ejemplo del convertidor de temperatura muestra solo una pequeña muestra de lo que puede hacer la Web Apps progresiva (PWA). En el ejemplo se muestra el código que es importante para cualquier aplicación web progresiva (PWA), como trabajar cuando no hay conexión a Internet.

Hay procedimientos recomendados adicionales para las PWA para que una aplicación web progresiva (PWA) se parezca a una aplicación nativa:

  • Integre la aplicación en el sistema operativo, por ejemplo, controlando archivos.

  • Realice tareas de computación no trivial.

  • Cargue la aplicación en almacenes de aplicaciones.

Consulte también

MDN:

Hospitalidad:

Muestra:

  • Last updated on