¡El futuro es ahora! ¿pero por dónde comienzo? (I parte)

el

Muchos de nosotros hemos escuchado sobre las Progressive Web Apps (PWA) o web progresivas, estas no son más que la evolución de la web, ofreciendo al usuario la sensación que da una aplicación móvil nativa pero usando netamente herramientas de desarrollo web. Las PWA son totalmente confiables, rápidas y lo mejor de ellas es que poseen un funcionamiento en 2 planos como si fuera una aplicación móvil. Son de fácil instalación, sencillas de compartir y lo más importante es que la aplicación puede ser descubierta hasta por un motor de búsqueda.

Ahora bien, si deseamos emprender en este camino de las PWA lo primero que nos viene a la mente es ¿pero por donde comienzo?. Para ello, el primer paso que debemos dar para iniciar en este mundo maravilloso es añadir un manifiesto. Esté es un archivo que por lo general es nombrado manifest.json, el cual es un fichero que lleva la configuración de como queremos que se muestre nuestra PWA al usuario. Por lo que podemos configurar la apariencia al iniciarse, la inclusión en el menú de inicio del dispositivo, mostrar información mientras se descargan los recursos o se restauran de la caché, entre otras funcionalidades.

Entendemos que el manifiesto es un archivo Json que nos ofrece productividad a nuestra aplicación. ¿Pero como podemos crear nuestro manifiesto?. Para ello existen tres maneras de hacerlo. La primera es desarrollarlo linea por linea de código, usando como ejemplo un fichero ya existente y tomando de él las propiedades necesarias, la segunda es por medio de un generador, existen ya páginas como https://app-manifest.firebaseapp.com/ que nos generan el fichero en función a la información que le incorporemos. Por último tenemos un snippet de Visual Studio Code (PWA tools) la cual nos permite añadir código en una PWA de una forma práctica.

 

generador

(Ejemplo del generador de Manifiesto)

 

En ese orden de ideas, un ejemplo de las propiedades que pueden ser agregadas en el manifiesto encontramos: App Name: indica en nombre de la App; Shortname: indica nombre corto; Theme Color: especifica un color de tema, este fija el color de la barra de herramientas ya que no aparece barra de navegación, Background Color: Especifica el color del fondo en el momento en que la PWA se inicia hasta la primera aparición en la pantalla; Display mode: personaliza el tipo de pantalla, Orientación: define como quieres que se muestre la aplicación. Y por último podemos agregar los iconos.

Una vez generado nuestro manifiesto y verificado que se encuentre en el directorio del proyecto, debemos vincularlo en el head de todas las páginas de nuestros proyectos. Finalmente se deben hacer las pruebas para confirmar que esta funcionando correctamente, lo más sencillo sería hacerlo desde un dispositivo móvil, pero la consola de Chrome nos permite visualizarla, ingresa en Application y donde dice manifest podremos ver si este esta funcionando.

 

ejemplo

(Ejemplo de un Manifiesto en formato Json)

 

Si deseas saber más sobre las PWA no te pierdas nuestro próximo apartado que dará continuidad a este artículo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s