Cómo Crear Una Aplicación Web Progresiva Que Funcione Con Y Sin Internet
Forbes, Twitter, Uber, Le Equipe, Telegram o Instagram son sólo algunos de los gigantes que han decidido crear sus propias PWA, o aplicaciones progresivas. Este escenario conlleva el riesgo de que los sitios web tradicionales se conviertan en algo del pasado.
Es natural que los sitios web, tal y como los conocemos, se conviertan cada vez más en copias menos potentes de las aplicaciones nativas. Las PWA son esencialmente un producto de esta evolución, encontrando una forma de ofrecer una experiencia similar a la de una aplicación móvil desde cualquier navegador.
Si no quiere quedarse atrás, es importante que piense en hacer que su sitio sea progresivo, o al menos lo más parecido posible, ya que afectará a las clasificaciones más pronto que tarde.
También puedes leer: Como Crear Tus Propios Videojuegos Con Giphy Arcade
¿Qué es una aplicación web progresiva y en qué se diferencia de una aplicación nativa?
Una app progresiva es una herramienta programada y escrita en lenguajes web como HTML5, JavaScript y CSS, pero que se comporta como una app móvil y conserva sus características, como el almacenamiento de datos en el dispositivo, lo que permite su uso sin conexión a Internet.
Las diferencias entre la versión progresiva y la nativa no son muy grandes, ya que la primera trata de parecerse a la segunda, pero podemos ver algunas diferencias que nos hacen preferir una sobre la otra:
- Multiplataforma: la principal diferencia entre una y otra es que la app nativa sólo puede utilizarse en el dispositivo en el que está instalada. Para utilizarlo en otro dispositivo, hay que descargarlo desde cero. La aplicación web, en cambio, es multiplataforma porque se puede acceder a ella desde cualquier navegador como si fuera un sitio web.
- Peso: Hoy en día, se pueden encontrar aplicaciones nativas que son tan pesadas como los programas de ordenador, lo que en consecuencia depende del rendimiento. Por otro lado, el tamaño de los sitios web progresivos rara vez supera 1 MB.
- Actualizaciones rápidas: Si la aplicación es muy grande, cada actualización tarda unos minutos. Una aplicación progresiva es más versátil en este sentido porque es tan ligera que las actualizaciones pueden hacerse en segundos.
¿Qué necesitaremos para programar esta aplicación web progresiva?
Nos acercamos al momento de la verdad en el que tenemos que empezar a construir nuestra aplicación web progresiva. Se trata nada menos que de una simple previsión meteorológica que informa de la temperatura, la humedad y la presión atmosférica.
Para crearla, hay varios requisitos importantes que debemos cumplir antes de empezar a codificar. Entre ellas se encuentran las siguientes:
- Clave de la API de Dark Sky: los datos de nuestra aplicación meteorológica provendrán directamente de esta API, por lo que deberás obtener una clave de la misma. Son completamente gratuitos para pequeños proyectos no comerciales como el que vamos a crear.
- Conocimientos de programación: no estamos bromeando, para entender lo que te vamos a contar, necesitarás al menos conocimientos de programación web y los fundamentos de HTML5, CSS y JavaScript.
Cómo Crear Una Aplicación Web Progresiva Que Funcione Con Y Sin Internet
Hemos conseguido lo que queríamos conseguir. Es el momento de empezar a codificar tu primera app progresiva, muy sencilla, pero que te dará los conocimientos para construir una app más completa y potente en el futuro. Ten cuidado y sigue todos los pasos cuidadosamente:
1. Cómo obtener la API de Starlight
Como se ha mencionado anteriormente, lo primero que hay que hacer es conseguir la clave API de Dark Sky, que proporciona datos meteorológicos para nuestra aplicación progresiva. Para ello, debes ir directamente a https://darksky.net/dev, registrarse y solicitar una clave.
Una vez que lo tengas, tienes que asegurarte de que funciona correctamente. Para ello debes ir al siguiente enlace y sustituir las palabras "ClaveAqui" por la clave API que acabas de adquirir. Si todo va bien, podrás mostrar la previsión de Nueva York sin problemas.
https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319
2. Obtén el código de la aplicación
Esto es en realidad un laboratorio de pruebas, por lo que obtuvimos el repositorio directamente de Developers Google para que podamos ejecutar este asistente de pruebas. Para obtener el repositorio, es necesario utilizar Glitch, que es una plataforma muy útil para que los desarrolladores compartan información sin problemas.
Esto es lo que tienes que hacer:
- Ve a Glitch y haz clic en "Nuevo proyecto" en la esquina superior derecha de la pantalla, luego haz clic donde dice "Clonar desde Git Repo".
- Se abrirá una pequeña ventana en la que deberás pegar la siguiente dirección https://github.com/googlecodelabs/your-first-pwapp.git y hacer clic en "Aceptar".
- En este repositorio encontrará toda la información que necesita. Ahora accede al archivo .env y cambia donde dice "DARKSKY_API_KEY="KeyHere" y pega tu clave API de Dark Sky donde dice "ClaveAqui".
- Ahora debes hacer clic en el botón "Mostrar su aplicación" para ver la aplicación en acción.
3. Auditoría con Lighthouse
Básicamente, el AWP está completo con este código, pero todavía tiene algunos errores que tenemos que arreglar nosotros mismos, que descubriremos durante esta auditoría. Esta herramienta tiene una sección específica para auditar sitios web progresivos como el que hemos creado, y para ello debemos hacer lo siguiente
- Abre tu proyecto en una nueva pestaña del navegador Chrome.
- A continuación, abre Chrome DevTools y accede a la pestaña Auditorías. Aquí, la plataforma le mostrará una lista de categorías de auditoría que deben dejarse activas.
- A continuación, haz clic en "Ejecutar auditorías" y, tras unos segundos, Lighthouse le proporcionará un informe de la página.
En este caso, nos centraremos en los resultados de la sección AWP de interés. Es probable que plantee las siguientes cuestiones:
- ERROR: la página actual no responde a 200 offline.
- ERROR: start_url no responde a 200 offline.
- ERROR: No se puede registrar un trabajador de servicio para comprobar la página y start_url.
- ERROR: El manifiesto de la aplicación web no cumple con los requisitos de instalación.
- ERROR: No está configurado para una pantalla de proyección personalizada.
- ERROR: El color del tema para la barra de direcciones no está configurado.
Nuestro objetivo en la siguiente lección es conseguir que nuestro sitio progresivo funcione con y sin conexión a Internet, sea instalable y tenga un manifiesto de aplicación decente.
4. Crear manifiesto de la aplicación
La razón por la que la aplicación no ejecutó el manifiesto es porque no tiene uno. Así que hay que crear uno, aunque en tu caso lo único que tienes que hacer es modificar el código del manifiesto que te hemos preparado.
{
"name": "Clima",
"short_name": "Clima",
"icons": [{
"src": "/images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
Cómo añadir ese manifiesto a tu aplicación
A continuación te explicamos cómo añadir ese manifiesto a tu aplicación. A continuación, tenemos que notificar al navegador nuestro manifiesto añadiendo <link rel="manifest".... En cada página de nuestra aplicación. Ahora añada la siguiente línea al elemento <head> del archivo index.html.
<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">
A continuación, tenemos que añadir una meta descripción a nuestra aplicación. Para ello, añada la siguiente línea de código a la cabecera de la aplicación:
<meta name="description" content="Un simple aplicación meteorológica">
Por último, también estableceremos el color de la barra de direcciones de nuestra aplicación progresiva. Para ello, copie la siguiente línea de código en el <head> de tu aplicación.
<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />
5. Hacer que la web sea offline
Ahora viene una de las partes más difíciles de todo el tutorial, ya que tendremos que hacer algo de codificación complicada para realizar correctamente la creación de nuestro servicio de trabajo, un elemento que ya hemos mencionado como importante para cualquier app progresiva.
Todos los usuarios quieren que la aplicación se pueda utilizar sin conexión a Internet, facilitando el acceso a los contenidos sin estar conectados. Esto es igual de importante en una aplicación progresiva, por lo que es absolutamente necesario mantener el cromo del dinosaurio.
Tutorial
Aquí, crearemos una página personalizada fuera de línea. De esta forma, cuando alguien entre en la aplicación y no tenga un nombre de usuario, aparecerá en lugar del molesto dinosaurio. Para ello, vamos a crear nuestro primer proveedor de servicios.
Si no estás muy familiarizado con esto, te recomendamos que lo hagas. Este es un mundo de programación completamente nuevo para ti, por lo que será muy útil que te especialices en él. De esta manera, crecerás profesionalmente, adquiriendo conocimientos actualizados que te darán una ventaja en tu gremio.
Lo primero que haremos es registrar el proveedor de servicios, así que inserta la siguiente línea de código en el archivo de índice de la aplicación progresiva:
// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((reg) => {
console.log('Service worker registered.', reg);
});
});
}
Ahora tienes que decirle al service worker qué página debe mostrar sin conexión. Ya tenemos una página offline personalizada creada en el repositorio (public/offline.html). Lo que tienes que hacer es ir al archivo public/service-worker.js en el repositorio y bajo la const "FILES_TO_CACHE = [
];" incluyen el valor "offline.html". Debería tener el aspecto que se muestra en la figura:
A continuación, tenemos que añadir esta línea de código al evento "install" para indicar al service worker que instale el parche de la Web Progresiva sin conexión:
evt.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log('[ServiceWorker] Pre-caching offline page');
return cache.addAll(FILES_TO_CACHE);
})
);
Hasta ahora, estamos a mitad de camino. A continuación, nuestro proveedor de servicios debe borrar la caché para que no queden datos antiguos en ella. Por lo tanto, tenemos que añadir este código a la carpeta public/service-worker.js:
// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
Por último, añadimos una línea de código más para que las peticiones web del proveedor de servicios sean más eficientes y para redirigir a la página sin conexión mencionada anteriormente si falla. Tienes que añadir lo siguiente a la carpeta public/service-worker.js:
// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
Con ello, hemos creado una herramienta que proporciona una experiencia offline bastante sencilla, pero que cumple perfectamente los requisitos de una aplicación progresiva. Pero esto es sólo el principio, aún queda mucho trabajo por hacer.
6. Ofrece experiencia offline completa
Para saber más sobre esto, es muy importante investigar un poco sobre el ciclo de vida del trabajador de servicios, porque estas etapas están estrechamente relacionadas entre sí.
Lo primero que haremos es cambiar la lógica de la aplicación para que pueda realizar peticiones asíncronas para que funcione correctamente. Estas peticiones son una a la red y otra a la caché. Para ello, debemos ir a la ruta public/scripts/apps y editar la siguiente línea de código:
// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
.then((response) => {
if (response) {
return response.json();
}
return null;
})
.catch((err) => {
console.error('Error getting data from cache', err);
return null;
});
A continuación, cambiaremos el elemento de actualización de datos por debajo del anterior. Para ello, cambiaremos el código de la siguiente manera:
// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
.then((forecast) => {
renderForecast(card, forecast);
});
Con él, ya hemos resuelto el problema de las consultas asíncronas que deben ejecutarse, por lo que ya es capaz de proporcionar un trabajo más o menos completo fuera de línea. Pero sigue sin funcionar al 100% sin conexión a Internet.
Para ello, primero tenemos que ocultar los recursos de la aplicación, lo que se hace añadiendo Data_Cache_NAME a la carpeta public/service worker. Para ello, utilizamos el siguiente código:
// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';
Actualizar el archivo_TO_CACHE
A continuación, tenemos que actualizar el archivo_TO_CACHE en la misma carpeta que el servicio de trabajadores para añadir una lista completa de archivos. Esto se consigue con el siguiente código:
// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
'/',
'/index.html',
'/scripts/app.js',
'/scripts/install.js',
'/scripts/luxon-1.11.4.js',
'/styles/inline.css',
'/images/add.svg',
'/images/clear-day.svg',
'/images/clear-night.svg',
'/images/cloudy.svg',
'/images/fog.svg',
'/images/hail.svg',
'/images/install.svg',
'/images/partly-cloudy-day.svg',
'/images/partly-cloudy-night.svg',
'/images/rain.svg',
'/images/refresh.svg',
'/images/sleet.svg',
'/images/snow.svg',
'/images/thunderstorm.svg',
'/images/tornado.svg',
'/images/wind.svg',
];
Actualizar Cache_NAME
Debemos recordar que debemos actualizar Cache_NAME cada vez que añadamos un nuevo archivo. Hemos eliminado el archivo "offline.html" porque nuestro sitio no lo necesita en este caso, ya que ahora tiene todos los recursos que necesita para estar sin conexión y ya no muestra las páginas sin conexión.
Para asegurarnos de que nuestro evento de "activación" no elimine los archivos, tenemos que sustituir "if (key !== CACHE_NAME) {" por "if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {". En nuestro archivo service-worker.js.
El siguiente paso en nuestra programación es guardar la previsión meteorológica en nuestra aplicación para poder consultarla más fácilmente en el futuro. Para ello, tenemos que añadir lo siguiente al archivo serviceworker.js:
// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
console.log('[Service Worker] Fetch (data)', evt.request.url);
evt.respondWith(
caches.open(DATA_CACHE_NAME).then((cache) => {
return fetch(evt.request)
.then((response) => {
// If the response was good, clone it and store it in the cache.
if (response.status === 200) {
cache.put(evt.request.url, response.clone());
}
return response;
}).catch((err) => {
// Network request failed, try to get it from the cache.
return cache.match(evt.request);
});
}));
return;
}
evt.respondWith(
caches.open(CACHE_NAME).then((cache) => {
return cache.match(evt.request)
.then((response) => {
return response || fetch(evt.request);
});
})
);
Una vez hecho todo esto, ya tenemos una aplicación progresiva que proporciona una experiencia offline completa a la que podemos acceder desde cualquier navegador. El trabajo está casi terminado, pero nos queda un detalle por hacer:
7. Hacer que la aplicación sea instalable.
Para terminar nuestro tutorial, tenemos que hacer que nuestra aplicación sea instalable en el navegador, lo cual, aunque pueda parecer complicado, es el proceso más sencillo de todos los que hemos mostrado hasta ahora.
En primer lugar, añadiremos el archivo install.js a nuestro index.html copiando este código en el archivo:
<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>
Ahora tenemos que ir al evento install.js y escribir la siguiente línea de código para continuar el proceso de instalación de nuestra aplicación:
// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);
Luego, para mostrar el botón de instalación, que es clave en todo esto, necesitamos seguir editando nuestro archivo install.js con el siguiente código:
// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');
Ahora es el momento del código que mostrará la aplicación y ocultará el botón de instalación, ya que esto sólo se puede hacer una vez. Así, en el archivo install.js añadimos lo siguiente:
// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);
Componentes de una PWA ¿Qué se necesita para crear una PWA?
Una aplicación progresiva consta de cuatro partes: un manifiesto, un proveedor de servicios, un icono y un servidor. Cada uno de ellos desempeña un papel fundamental en la estructura de toda la herramienta.
1. Manifiesto de la app
El manifiesto de la aplicación PWA es un archivo JSON que define toda la meta-información sobre la aplicación. Especifica el color, el título, el color de fondo, el icono y otros detalles del tema.
2. Service Worker
Este es probablemente el elemento más importante. Como se ha mencionado anteriormente, es un componente de software que asegura el intercambio de información entre la web y la caché del navegador. También registra la información descargada cuando se conecta para que la aplicación pueda funcionar incluso sin acceso a Internet.
3. Icono
Un icono no es más que una imagen que distingue su aplicación de otras aplicaciones web disponibles en el mercado. Tienes que diseñarlo tu mismo porque se convertirá en la tarjeta de visita de su sitio web.
4. HTPPS
Por último, necesitas un servidor seguro con un certificado SSL adecuado. Los navegadores nunca podrán ejecutar una PWA alojada en HTPP, como hacen muchos sitios web en la actualidad. Lo más importante en una aplicación progresiva es la seguridad, y eso es lo que buscan los navegadores.
También puedes leer: Cómo Crear Acceso Directo de una Página Web
Deja una respuesta