¿Qué son las PWA o Progressive Web Apps?

Una PWA es el acrónimo de Progresive Web App, que en castellano sería una Aplicación Web Progresiva. En este artículo iremos desgranando los básicos de esta nueva forma de consumir las páginas web.

Las PWA son un híbrido entre página web y aplicación nativa. Se nutren del uso de Service workers para acercar la experiencia de página web a la de una app nativa. Es decir, mediante los service workers podemos:

• Trabajar en segundo plano
• Acceder a las apis del navegador
• Recibir notificaciones push
• Funcionamiento offline
• Más ligeras que las apps nativas

En móvil, Google Chrome nos permite instalarlas como si fuera una aplicación nativa, por tanto tendremos acceso directo a nuestra PWA desde la home de nuestro dispositivo.

¿Por qué merece la pena desarrollar una PWA?

• Presencia en el escritorio del dispositivo de tus usuarios
• Mejora la eficiencia y reduce el consumo de datos
• Aumenta el engament abriendo nuevas puertas como las notificaciones push
• Mejora las tasas de conversión de los ecommerce

¿Como creo mi primera PWA?

Por ejemplo, puedes crear los siguientes archivos:

• manifest.json
• service-workers.js

Ejemplo de manifest.json

{
"name": "Mi aplicación",
"short_name": "MiApp",
"icons": [{
"src": "/imagen/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/imagen/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}

Debes enlazar tu archivo manifest.json en el head de tu web:

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

Ejemplo de service-worker.js

'use strict';

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v1';

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
];

self.addEventListener('install', (evt) => {
console.log('[ServiceWorker] Install');
// CODELAB: Precache static resources here.

self.skipWaiting();
});

self.addEventListener('activate', (evt) => {
console.log('[ServiceWorker] Activate');
// CODELAB: Remove previous cached data from disk.

self.clients.claim();
});

self.addEventListener('fetch', (evt) => {
console.log('[ServiceWorker] Fetch', evt.request.url);
// CODELAB: Add fetch event handler here.

});

Ver ejemplo completo de Google Code Labs: https://github.com/googlecodelabs/your-first-pwapp