En este tutorial crearemos una Progresive Web App desde cero en donde veremos varias herramientas que nos ayudarán con la implementación y el test para saber si nuestra web es una PWA o no. Comencemos con la parte teórica primero, para entender de que hablamos y hacia donde vamos, para luego comenzar con la diversión.
Sigue paso a paso las instrucciones que te permitirán crear tu primera progressive web app:
Descarga un template de Boostrap
Como paso inicial vamos a descargaros un template de boostrap para evitarnos crear nuestra propia web y así de esta manera no perder tanto tiempo con respecto al diseño.
Para realizar esto debemos de crear una carpeta con el nombre de nuestro proyecto como por ejemplo ProgressiveWA en donde descargaremos nuestro template para luego configurarlo y poder verlo en nuestro navegador.
Una vez creada la carpeta debemos de descargar el template en donde pueden obtenerlo ingresando aqui.
Luego de haber descargado nuestro archivo.zip con el contenido de nuestro template debemos de descomprimirlo dentro de nuestra carpeta del proyecto recientemente creada.
Para finalizar el primer paso debemos de instalar un servidor web en nuestra PC para poder montar el template que descargamos recientemente como por ejemplo instalando XXAMP o WAMP o sino usando el que a ustedes le resulte mas cómodo y práctico.
Una vez configurado nuestro servidor web debemos de ver nuestro sitio tal cual se ve en la imagen de abajo.
Si logramos ver esto quiere decir que ya tenemos nuestro sitio web andando, listo para optimizarlo para que funcione como una Progressive Web App.
Configurando las imágenes de nuestra web para que funcione como PWA
Como veremos nuestro sitio tiene componentes e imágenes grandes lo cual en una PWA deben de estar lo mas optimizados y con el tamaño acorde a nuestro dispositivo y así como también para varios dispositivos como Apple, Android entre otros.
Antes de realizar cualquier paso debemos de abrir nuestra carpeta ProgressiveWA con algún editor de texto como puede ser el Sublimetext para entender y ver los archivos y carpetas que tiene dentro.
Una vez abierto nuestro proyecto en el editor de texto veremos que existe una imagen que se encuentra dentro de la carpeta img llamada profile.png, en donde la usaremos como ejemplo para convertirla en varios tamaños para luego usarlo en nuestro sitio.
Para realizar esto debemos de ingresar en este sitio y seleccionar la foto que nombramos anteriormente y presionar en el botón llamado «Create Favicon«.
Una vez generado el favicon debemos de descargarlos presionando en el enlace que dice «Download the generated favicon» en donde de esta manera se nos descargara un archivo .zip con todas las imágenes que necesitamos. Luego de esto debemos de descomprimir este archivo dentro de la carpeta img de nuestro proyecto en donde le cambiaremos el nombre llamándola «icons» por ende nos debe de quedar algo similar a la imagen de abajo.
Luego de realizado esto vemos que en el sitio donde generamos todos favicons nos muestra todo un listado de las imágenes que nos sugiere de utilizar para poder hacer uso de las mismas en nuestra web, lo que debemos de hacer es colocarlas dentro del archivo index.html ubicado en la carpeta raíz de nuestro proyecto de forma que queden dentro de la etiqueta head tal cual se muestra la imagen de abajo.
Una vez realizado esto debemos de modificar la ruta de los archivos PNG que pegamos recién en nuestro archivo index.html colocando la ruta en donde los descargamos es decir dentro de la carpeta img/icons de forma que nos queden como se muestra la información inferior.
<link rel="apple-touch-icon" sizes="57x57" href="img/icons/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="img/icons/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="img/icons/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="img/icons/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="img/icons/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="img/icons/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="img/icons/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="img/icons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png"> <link rel="manifest" href="img/icons/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="img/icons/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff">
Configurando el sitio para que muestre nuestra información
Una vez hecho todos los pasos anteriores debemos de modificar el archivo manifest.json para mostrar la información de nuestro sitio, así como colocar el nombre, el alias, los colores que se usarán, entre otras opciones.
Para realizar esto debemos de editar el archivo manifest.json que se encuentra dentro de la carpeta que descargamos las imágenes recientemente es decir dentro de img/icons/manifest.json. Ahí debemos de eliminar los 2 caracteres «\ /» que aparecen dentro del arreglo icons y de la propiedad src para así le indicamos que las imágenes están dentro de la misma carpeta que esta el archivo manifest.json, mas adelante se indicara un ejemplo de como debe quedar el archivo a modificar.
Luego de haber realizado esto debemos de colocar la información de nuestro sitio en este mismo archivo manifest.json que venimos editando, en donde debemos de modificar y agregar los siguientes campos:
- name: Nombre de nuestra aplicación.
- short_name: Apodo de nuestra aplicación.
- lang: Lenguaje de nuestra aplicación.
- start_url: En donde inicia nuestra aplicación, en nuestro caso el archivo index.html esta en la carpeta ríz.
- background_color: Color de fondo de nuestra web.
- theme_color: El color que tiene nuestro tema, en este caso es el verde claro.
- display: La forma que se va a mostrar nuestra app.
A continuación mostraremos un ejemplo de como debe de quedar nuestro archivo manifest.json.
{
"name": "Mi aplicación PWA",
"short_name": "Mi PWA",
"lang": "es-ES",
"start_url": "/",
"background_color": "#2C3E50",
"theme_color": "#18BC9C",
"display": "standalone",
"icons": [
{
"src": "android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
} Una vez colocado esta información y arreglada la ruta de nuestras imágenes podemos corroborar de que todo se haya colocado correctamente y que el navegador lo ese procesando. Para realizar esto debemos de ingresar a nuestro sitio en el navegador Google Chrome e iniciar la Herramienta de desarrollador el cual nos permite ver varias cosas de nuestro sitio web pero lo que a nosotros nos interesa es ver que los datos se estén tomando correctamente.
Para abrir dicha herramienta debemos de posicionarnos en los tres puntitos de la parte superior derecha del navegador, luego dirigirnos a donde dice Más herramientas y por último donde dice Herramientas del desarrollador, abajo se muestra una imagen de como encontrarlo.
Cuando tengamos abierta esta herramienta dentro de nuestro sitio debemos de dirigirnos a la pestaña que dice Application y luego en donde dice Manifest, ahi veremos todos los datos que colocamos anteriormente y a su vez los diferentes tamaños de la imagen que descargamos en los pasos anteriores.
Creando nuestro Service Provider
En este paso crearemos nuestro servicio y lo registraremos para que funcione nuestra PWA. Es importante destacar que para que nuestro servicio se instale correctamente y funcione al cien por-ciento es necesario correr nuestra web mediante un certificado SSL es decir que corra mediante HTTPS.
Otra alternativa es correr nuestro sitio web mediante localhost ya que este último es tomado como seguro debido a que esta de forma local, esto podemos hacerlo usando un servidor web como mencionamos anteriormente que puede ser XAMP o WAMP.
Una vez comentado este punto que es sumamente importante vamos a proceder con la creación y la instalación de nuestro servicio.
Para poder generar esto primero que nada debemos de dirigirnos a Pwabuilder, donde nos facilita el código que debemos de utilizar para crear nuestro servicio y poder registrarlo como tal.
Una vez estemos en el sitio debemos de situarnos en el segundo paso que tiene el nombre de Build Service Worker, ahí veremos varias opciones para marcar, la que nosotros nos interesa la segunda opción que es la que tiene el nombre de Offline copy of pages.
Al presionar esta opción se nos cargará el contenido que debemos de usar en nuestro sitio web en donde el primer bloque llamado Code for website debemos de colocarlo en nuestro archivo index.html ubicado en la carpeta raíz de nuestro proyecto.
Este código debe estar encapsulado en una etiqueta script para que sea tomado y también tenemos que ponerlo antes de que termine la etiqueta body tal cual se muestra en el ejemplo de mas abajo.
Cuando tengamos colocado este código debemos de crear el servicio para que funcione nuestra Progresive Web App, para realizar esto debemos de crear un archivo en la raíz del proyecto llamado pwabuilder-sw.js, en donde en este debemos de copiar y pegar el otro fragmento de código que nos dio el sitio con el nombre Service worker code.
Una vez tengamos estos dos códigos colocados en nuestro proyecto podemos de realizar un test para saber si todo salio bien.
Para realizar esto debemos de ingresar a la Herramienta de desarrollador del navegador Google Chrome de la misma forma que indicamos mas arriba y posicionarnos en la pestaña Application y liego en donde dice Service Workers, ahí nos debería de aparecer el servicio que recién creamos indicando que nuestro servicio esta corriendo, si nos dice que esta parado solamente debemos de presionar en el botón que dice start.
Corroborando la puntuación de nuestra PWA
Esta parte es la más interesante y la que nos preocupa a todo desarrollador web, que nuestra PWA tenga una buena puntuación es fundamental para así sabremos que esta funcionando correctamente tal cual como queremos.
Antes de comentarles la forma de como saber que puntuación tenemos en nuestra PWA les recomiendo que realicen una redirección 301 de HTTP hacia HTTPS si es que están usando un dominio ya que este punto aumenta mucho porcentaje al momento de realizar el test de nuestro sitio.
Para hacer esto solamente debemos de crear un archivo .htaccess en el directorio raíz de nuestro proyecto y debemos de colocar el siguiente código.
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] Una vez creado este archivo ya podemos realizar el test de nuestra Progresvive Web App, esto lo podemos realizar instalando una extensión de Google Chrome llamada Lighthouse la cual nos muestra un registro completo de nuestro sitio incluyendo que porcentaje tiene como una PWA.
Para instalar dicha herramienta debemos de ir al navegador, dirigirnos a los tres puntitos ubicados en la parte superior derecha, luego ir a Más Herramientas y por último a donde dice Extensiones.
Ahí nos mostrará todas las extensiones que tenemos instaladas en nuestro navegador, pero para instalar una nueva debemos de dirigirnos a la parte inferior de la página y presionar en donde dice Obtener más extensiones, luego solamente debemos de buscar la extensión Lighthouse y darle a instalar.
Después de esto debemos primero que nada ubicarnos en nuestro sitio web para luego hacer uso de dicha herramienta presionando en el icono que se nos genero en la parte superior derecha, una vez hecho esto solamente necesitaras de presionar el botón azul que dice Generate report.
Una vez generado el reporte se nos va a desplegar una ventana con toda la información de nuestro sitio inclusive con la parte de cuanto porcentaje de Progresive Web App tiene nuestra aplicación. En este ejemplo que se realizó se puede obtener un 91% en la parte de las PWA lo cual es muy bueno.
Conclusión
Es muy importante tener una Progresive Web App si queremos mejorar la velocidad de nuestro sitio y con mas razón si nuestra web es una tienda online ya que cuanto mas rápido vaya mas tráfico vamos a tener.
Es importante destacar que tiene como desventaja que se debe de tener un certificado SSL instalado para poder correr nuestro Service Provider, pero también es importante destacar que en unos simples pasos ya podemos tener nuestra PWA corriendo y lista para ser publicada.