LoDigitalizo

Cómo crear una progressive web app

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 atrás a futuro.

De hecho, las convencionales han evolucionado 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 diferente de aplicación o herramienta programada para móvil. Estas se construyen con ciertas tecnologías web que implican el uso de Javascript, CSS y HTML.

Por lo tanto, funcionan bien en cualesquiera plataformas que contienen un browser en 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.  
Características de una App web progresiva

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

Toda progressive web app tiene sus diferencias en comparación con una nativa, 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 con las cuales puedes toparte. 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.

Rápidas actualizaciones

Cuando una aplicación es muy compleja o grande como las nativas, al tratar de 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 solo segundos.

Componentes necesarios para crear la PWA

A fin de que se te haga posible crear la PWA, es necesario que cuentes con algunos componentes. Entre estos se pueden mencionar el manifiesto, el ícono, 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 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

Un componente esencial e importante en las PWA, ya que es un elemento de programación que te brinda soluciones. Favorece que se intercambie información entre el caché en el 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.

Ícono

De la misma forma que sucede con las aplicaciones nativas, las progressive web app también debe llevar un ícono. Esta imagen, que logrará que tu aplicación sea identificada, puedes elaborarla tú mismo, según tus gustos. Llegará a 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

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

El proceso exacto de creación de una progressive web app va a depender del tipo de app que quieras crear. De acuerdo a las funciones que quieres que sea posible realizar 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. Ya que posee el código de inicio para empezar a formar la web app.

2. Añadidura 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. Pues contribuirá a que logres un diseño responsive para darle a los usuarios una experiencia excelente. 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. Comienza a usarlo agregando esta línea al archivo index.html adentro 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 ícono a usar y más detalles importantes.

Que resultan necesarios en la transformación de un sitio web a una aplicación que luzca como 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 achivo, 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án 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 agregado en la cache y será utilizado en cada oportunidad 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. Esto se hace abriendo el navegador y observando si aparece el botón para instalarla.

O 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 los 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 ofrecemos ayuda para crear tu progressive web app. En LoDigitalizo contamos con servicios especializados de desarrollo tanto de webs como de aplicaciones.

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

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on tumblr

Posts Relacionados