NorfiPC » Web » Crear una Web App

Como crear una Aplicación Web Progresiva (PWA) o Web App

Actualizado: 11 de abril del 2023
Por: Norfi Carrodeguas

Requisitos para que una página funcione como una Web App (Progressive Web App). Código para los archivos Service Worker y manifest necesarios.

Como crear una Aplicación Web Progresiva para móviles

Es algo difícil crear una aplicación movil, para un sitio web, un negocio u otro proyecto, pero es algo sencillo crear una Web App, que funcione tanto online como offline.
En otra página explico como como usar la funcionalidad Service Workers, disponible en todos los navegadores modernos, para crear una o varias páginas que funcionen sin conexión a internet, guardando los archivos necesarios en la cache o memoria del navegador.
En este artículo explico los elementos adicionales para convertirla en una Aplicación Web Progresiva, que funcione como una aplicación nativa en dispositivos móviles con Android y con iOS.

¿Qué es una Aplicación Web Progresiva?

Una Aplicación Web Progresiva, también conocida como Web App, es una página web tradicional en formato HTML, que puede estar enlazada a otras páginas y archivos auxiliares y funciona similar a una aplicación convencional, con la diferencia que lo hace usando el navegador web.
Permite disponer de las siguientes funcionalidades:

- Funcionar sin conexión a internet.
- Botón para agregar a la pantalla principal o inicio del dispositivo.
- Notificaciones push.

Una aplicación de este tipo no es necesario subirla a la tienda de aplicaciones, ni instalarla con un archivo APK.
Los lectores para instalarla en su dispositivo, solo necesitan guardar su página index o principal, para tenerla disponible tanto online, como sin conexión a internet.

¿Cómo funcionan las Aplicaciones Web Progresivas?

Las Aplicaciones Web Progresivas funcionan gracias a Service Workers, una funcionalidad de HTML5 disponible en casi todos los navegadores modernos.
También requieren de un archivo Manifest, en el que se indican parámetros como la página principal y los iconos que la representan.

Crear una Aplicación Web Progresiva

En este artículo detallo como crear una sencilla Aplicación Web Progresiva, con sus archivos auxiliares necesarios o agregar a una página ya existente o a un grupo de ellas, esta funcionalidad.
Sigue los siguientes pasos.

1- Crea una página web en formato HTML y sitúala en un directorio independiente.
2- Agrégale una o varias imágenes, de ser necesario.
El estilo CSS puede ser "inline" (recomendado) o en un archivo auxiliar.
3- Crea y sitúa en el mismo directorio el archivo Service Worker.
Es un archivo de texto con la extensión JS, que contiene instrucciones en JavaScript.
Para crearlo usa el siguiente código de ejemplo: Archivo Service Worker de ejemplo
Enlázalo a la página principal del directorio, agregando el siguiente script antes de la etiqueta de cierre </body>

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('worker.js?'+Math.random()+'')
  });
}
</script>

4- Crea un archivo Manifest, el que debe estar en el directorio raíz del sitio.
Usa el siguiente código de ejemplo y sustituye los valores necesarios.

 {
  "short_name": "Nombre de App",
  "name": "Nombre de App",
  "icons": [
  {
      "src": "icon.png",
      "sizes": "128x128",
      "type": "image/png"
    },
	 {
      "src": "icon512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "movil/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#a1d9fc",
  "theme_color": "#a1d9fc"
}

El archivo Manifest es un archivo de texto plano, con el nombre: "manifest.json".
Permite especificar la dirección de la página principal ("start_url"), los iconos de distintas dimensiones que se usarán en los móviles para representar a la aplicación con su ruta y agregar la funcionalidad "Add to homescreen" (Agregar a inicio) en dispositivos con Android).
El archivo Manifest se puede validar con la siguiente herramienta online: https://manifest-validator.appspot.com/
5- Enlaza la página creada en los pasos anteriores al archivo manifest.json, usando la siguiente etiqueta situada en el área del encabezado (HEAD), usando la ruta necesaria a su ubicación.

<link rel="manifest" href="../manifest.json">

Es todo.

Requisitos de la aplicación web progresiva

Para que la aplicación funcione correctamente sin conexión, se debe tener en cuenta lo siguiente.

- En el archivo Service Worker se debe incluir la ruta a todos los archivos que se deben guardar en la cache del navegador.
- En el directorio donde radica la aplicación pueden situarse varias páginas enlazadas a la principal.
- Las páginas deben estar servidas como HTML.

Como probar la aplicación web progresiva antes de subirla a internet

La aplicación así creada podemos probarla en la computadora sin conexión, antes de subir los archivos al servidor web en internet.
Para eso necesitamos la aplicación Web Server for Chrome para el navegador Google Chrome.
Es fácil de emplear.
Solo instálala en el navegador, iníciala e indícale la ubicación de la carpeta donde se encuentran los archivos de la aplicación.
Web Server for Chrome simula un servidor local y nos permite cargar la aplicación en Google Chrome usando la dirección URL:

http://127.0.0.1:8887/directorio

Sustituye "directorio" por el nombre correspondiente.

Probar la aplicación con la Consola de desarrolladores de Google Chrome

Después de cargarla en el navegador Google Chrome, podemos emplear la Consola de desarrolladores para comprobar el funcionamiento de la aplicación.
La consola se abre usando la combinación de teclas: Control + Shift + J.
Después de hacerlo necesitamos abrir el panel Application.
En la barra de la izquierda selecciona las herramientas Manifest, Service Workers y Cache Storage (archivos guardados en cache).
Panel "Manifest" en la Consola del navegador Google Chrome.
En él se puede comprobar todos los parámetros del archivo manifest.json de la aplicación progresiva.
Panel Manifest en la Consola del navegador Google Chrome

Panel Manifest en la Consola del navegador Google Chrome

Ver a mayor tamaño

Panel "Service Workers" en la Consola del navegador Google Chrome.
Muestra información de todos los service workers cargados actualmente por el navegador.
Panel Service Workers en la Consola del navegador Google Chrome

Ver a mayor tamaño

En el panel "Cache Storage" se puede comprobar todos los archivos guardados actualmente en la cache del navegador, especificados en el Service Worker.
En el panel de la Consola se puede ver la versión de la cache guardada.

Probar la aplicación con Lighthouse

El próximo paso es revisar la aplicación con Lighthouse.
Lighthouse es una aplicación de Auditoria, disponible para Google Chrome como una extensión.
En su sección "Progressive Web App" comprueba el funcionamiento de la aplicación, señalando cualquier error existente y como solucionarlo.
Resultado exitoso de la auditoria de Lighthouse a la aplicación web progresiva.
El error de HTTPS siempre se recibe al efectuarla offline.

Resultado exitoso de la auditoria de Lighthouse a la aplicación web

Probar la aplicación web progresiva en el móvil

Podemos probar el funcionamiento de la aplicación en un móvil con Android, conectado a la computadora mediante el cable USB.
Para eso previamente debemos de abrir la pestaña "Dispositivos" usando la siguiente dirección interna de Google Chrome:

chrome://inspect/#devices

A continuación conectamos el móvil a la computadora y recargamos la pestaña.
Seguidamente introducimos en el móvil la siguiente dirección:

localhost:8887/directorio/

Sustituye "directorio" por el nombre correspondiente.
Veremos en el móvil la aplicación, de la misma forma que en internet.

Probar la aplicación web progresiva online

Finalmente, después de comprobar su funcionamiento y corregir los errores si existe alguno, podemos subir los archivos de la aplicación al servidor web en internet.
A continuación cargarla usando distintos navegadores y dispositivos.

Actualizar los archivos de la aplicación web progresiva

Para actualizar cualquier cambio que se haga en los archivos que componen la aplicación, se debe actualizar también el archivo Service Worker.
Este es el que indica al navegador que debe sustituir el contenido de la cache guardada.
Puede lograrse simplemente sustituyendo el nombre de la cache, en las dos líneas donde aparece.

Optimizar los archivos de la aplicación

Se recomienda optimizar y reducir al máximo el tamaño de los archivos de la aplicación, porque la cache del navegador es limitada.
Debemos validar el HTML y comprimirlo de ser necesario.
También debemos optimizar las imágenes para la web, comprimir los archivos CSS y eliminar las reglas de estilo sin usar.

Ejemplo de Aplicación Web Progresiva

Carga en el siguiente enlace la aplicación creada en este sitio y comprueba su funcionamiento. https://norfipc.com/movil/

Compartir una PWA en las tiendas de aplicaciones de internet

Si has creado una PWA que sea de utilidad a otras personas, puedes subirla y compartirla en las tiendas de aplicaciones de Google Play, Microsoft y Apple Store.
Para eso accede al servicio de PWABuilder y genera un paquete para compartirla.

Páginas relacionadas

✓ Como usar Service Workers en páginas que funcionen offline
✓ Aplicación Web Progresiva móvil del sitio NorfiPC
✓ Tiempo de respuesta del servidor y velocidad de las páginas
✓ Los mejores servicios de hosting o alojamiento web en español
✓ Optimizar las imágenes y reducir su tamaño para la web
✓ Como retrasar la carga de las imágenes en las páginas con Lazy Load

Comparta esta página

Facebook

Twitter