Cómo crear una progressive web app

Actualmente existe más de una progressive web app, o PWA por sus siglas, que ha tenido un gran éxito. Algunos de los gigantes que han dado el paso de crear la suya son Telegram, Instagram, Uber, Twitter y Forbes. Un escenario como este refleja que posiblemente las websites tradicionales quedarán obsoletas en el futuro.

De hecho, las convencionales han evolucionado llegando al punto de transformarse en replicas con menor potencia que las apps nativas. Si no quieres retrasarte, es recomendable que empieces a dar los pasos necesarios para hacer tu web progresiva.

Como recomendación, debes intentar que como mínimo tenga una ventaja competitiva y mantenerla actualizada de forma constante.

Características de una App web progresiva

Una progressive web app básicamente se basa en un tipo de aplicación o herramienta diferente, programada para móvil. Esta se construye con ciertas tecnologías web que implican el uso de Javascript, CSS y HTML.

Por lo tanto, funcionan bien en cualquiera de las plataformas que contienen un browser donde ejecutarlas. Las PWA han hallado la forma de brindar una experiencia parecida a las de las aplicaciones móviles, pero desde un navegador cualquiera. Algunas de sus características principales son:

• Seguridad y funcionamiento independiente de las conexiones disponibles.
• Diseño responsive o adaptativo para su correcta visualización en dispositivos diferentes.
• Capacidad de instalación con agregación de un ícono en homescreen.  

¿Qué diferencias hay entre una PWA y una nativa?

Las progressive web app tienen diferencias en comparación las nativas, aunque estas no sean muy notorias. De hecho, la progresiva tiende a parecerse mucho a la nativa. Sin embargo, sí existen algunas desigualdades ventajosas que pueden ayudarte a saber cómo debe ser una PWA.

Multiplataforma

La diferencia principal en este aspecto es que la app nativa puede ser usada solo donde está instalada. De tal manera que aparte de ese dispositivo, no podrás utilizar otro, a menos que lo descargues en este.

En cambio, la aplicación progresiva es multiplataforma y te permite el acceso hacia ella usando cualquier navegador. Tal como si se tratara de alguna website.

Peso

En la actualidad, existen app nativas muy pesadas que te puedes encontrar. Funcionan de manera muy similar al programa de un ordenador, dependiendo de la potencia. Por el contrario, las progressive web app en raras ocasiones van más allá de 1 MB en su peso.

Actualizaciones rápidas

Cuando una aplicación es muy compleja o grande como las nativas, al intentar actualizarlas tardarás más tiempo. La diferencia con respecto a la progresiva es que esta es liviana, por lo que sus actualizaciones se ejecutan en unos segundos.

Componentes necesarios para crear la PWA

Para que se haga posible crear la PWA, es necesario que cuentes con algunos componentes. Entre estos se pueden mencionar el manifiesto, el icono, el HTPPS y el Service Worker. Todos estos desempeñan un papel importante al componer la estructura de esta herramienta.

Manifiesto

Un manifiesto es un componente básico en la creación de la progressive web app. Este archivo JSON se encarga de especificar de forma completa la meta información de la aplicación. Contiene detalles específicos referentes al color que tiene el tema, el del fondo, nombre e íconos.

Service Worker

Es un componente esencial e importante en las PWA, ya que es un elemento de programación que brinda soluciones. Favorece que se intercambie información entre el caché del navegador y la red. De igual forma registra o almacena información para ser cargada al haber conexión.

Esto representa una gran ventaja, porque después puedes acceder a esa información en la app sin contar con internet.

Icono

De la misma forma que sucede con las aplicaciones nativas, las progressive web app también deben llevar un icono. Esta imagen, que logrará que tu aplicación sea identificada, puedes elaborarla tú mismo, según tus gustos. Será lo que distinga tu aplicación de cualquier otra que se halle en el mercado.

HTPPS

Un requisito obligatorio es que el acceso a la progressive web app lo realices mediante una conexión que sea segura. Debe contar con la garantía del correspondiente certificado seguro SSL. Es un asunto de mucha importancia, ya que así se mantendrá la confidencialidad de los datos en la web.

Creación de una App web progresiva: Paso a paso

El proceso de creación de una progressive web app va a depender del tipo de app que quieras crear. De acuerdo con las funciones que quieres que se realice en ella, la complejidad aumenta o disminuye.

Con el propósito de guiarte utilizaremos de ejemplo una aplicación que funciona como conversor de colores. Específicamente uno que trabaja con formatos RGB, CMYK, HSL y Hexa. A pesar de ello, puedes revisar estos pasos y adaptarlos a la app que tú buscas crear.

1. Preparación del ambiente de desarrollo

Se ingresa a Glitch (herramienta que facilita la programación online y el guardado de proyectos) y se presiona en “New Proyect”. Después se escoge la opción llamada “Clone from git Repo” y se clona el siguiente enlace especificado aquí: https://github.com/SamsungInternet/pigment-starter.git. que posee el código de inicio para empezar a formar la web app.

2. Agregación de ONE UI web

Samsung creó una guía para diseño llamada ONE UI, de la que puedes valerte para hacer tu progressive web app. Contribuirá a que logres un diseño responsive para darle a los usuarios la mejor experiencia sin importar desde que dispositivo se encuentren.

Esta guía se encuentra en el sistema operativo de los Smartphone Samsung Android. Con el proyecto clonado en Gitlab, la librería está instalada en la carpeta llamada css/oui-css. Empieza a usarlo agregando esta línea al archivo index.html dentro de la respectiva etiqueta <header>:

<link rel=”stylesheet” type=”text/css” href=”css/oui-css/oui.css”> 

Ahora que la app luce mejor, es necesario agregar otro detalle, puesto que ONE UI trabaja agregando la clase correspondiente al elemento HTML debido. Por ejemplo, para el elemento input se agrega esta clase:

<h2 class=»oui-bubble-title»>HEX</h2>

<input type=»text» class=»oui-input-textual current-color-text» onchange=»convertColor(this.value)» placeholder=»#FFFFFF»>

3. Agregación de archivo Manifest

El archivo Manifest es de tipo JSON y permite tener control de la forma en la que la aplicación será vista por los usuarios. Además, se encarga de que la PWA sea encontrada de forma fácil. También describe qué nombre tendrá la app, su URL, cada icono a usar y más detalles importantes.

Detalles que resultan necesarios en la transformación de un sitio web a una aplicación que parezca native. Puedes hacer un archivo bajo este nombre manifest.webmanifest de manera manual dentro del proyecto usando este código con los datos debidos:

{

 “name” : “Nombre de la app”,

 “short_name” : “Nombre de la app”,

 “description” : “Nombre de la App color conversion”,

 “start_url” : “https://sdc-pwa-2019.glitch.me/»,

 “lang” : “English”,

 “display” : “standalone”,

 “theme_color”: “#3d3d3d”,

 “background_color”: “#f2f2f2”,

 “orientation” : “portrait”,

 “icons”: [ {

 “src”: “/images/pigment-ico.png”,

 “sizes”: “192×192”,

 “type”: “image/png”

 },

 {

 “src”: “/images/pigment-ico.png”,

 “sizes”: “512×512”,

 “type”: “image/png”

 }]

 }

Aparte de esos atributos proveídos al archivo es posible agregar más usando la herramienta para crear progressive web app PWA builder. Basta con ir a Glitch, en la parte “Share” y luego a “Live App” para copiar la URL. La cual deberás pegar en el apartado correspondiente del inicio de PWA Builder, para presionar “Start”. Así saldrá el estado en el que se encuentra tu PWA.

4. Adjunción del service worker

Existen tipos distintos de service worker, pero para este ejemplo se usa el llamado “Cache First”. Que hace posible pre-cachear el contenido, y su funcionamiento es sencillo.

El contenido agregado al “cache-array” va a ser el añadido en la cache y será utilizado cada vez que lo requiera la página.

Utilizando nuevamente PWA Builder, ve a la parte del menú “Service Worker” y escoge el ‘cache-firts network’ y agrega el código al archivo ‘serviceworker.js’. Agrega también en index.html una referencia hacia ese archivo para que pueda registrarse. Introduce la siguiente referencia en la etiqueta <script>:

<script>

if (navigator.serviceWorker.controller) {

     console.log(«Active service worker found, no need to register»);

}else{

 // Register the service worker

navigator.serviceWorker.register(“serviceworker.js”, { scope: “./” }).then(function (reg) {

    console.log(«Service worker has been registered»);

}

}

</script>

5. Prueba

Una vez completado el proceso de creación de tu progressive web app, es necesario probar que funciona. Para elllo hay que abrir el navegador y observar si aparece el botón para instalarla.

También puede aparecer una notificación preguntando si se desea agregar la aplicación creada a la homescreen, lo que confirmará que todo fue un éxito. Puedes formar parte de las progressive web app ejemplos siguiendo y ajustando estos pasos para formar específicamente la que deseas.

Ahora bien, si quieres ahorrarte todo este trabajo de programación, nosotros te ofrecemos ayuda para crear tu progressive web app. En LoDigitalizo proporcionamos servicios especializados de desarrollo tanto de webs como de aplicaciones.

Así que permítenos que nos encarguemos de todo para que tengas la app web progresiva que quieres crear, sin complicaciones y en poco tiempo.