Una aplicación web progresiva es una aplicación web que aprovecha las funciones de los navegadores modernos y se puede agregar a su pantalla de inicio, comportándose como una aplicación nativa.
En este tutorial te mostraremos todo lo que necesitas saber sobre las PWA, paso a paso, con ejemplos prácticos y una aplicación de demostración. Para no empezar de cero, vamos a usar la aplicación de selfies que hicimos recientemente y hacerla progresiva.
¿Qué es una aplicación web progresiva?
En esencia, una aplicación web progresiva no es diferente de un sitio web normal:está hecha de HTML, CSS y JavaScript, y vive en el navegador. Lo que separa a las PWA de los sitios web regulares es una lista de 10 conceptos clave que deben cumplirse. Aquí están, tomados directamente del sitio web de Google Developers.
- Seguro - Servido a través de HTTPS para evitar la intromisión y garantizar que el contenido no haya sido manipulado.
- Progresivo - Trabaja para todos los usuarios, independientemente de la elección del navegador, ya que están construidos con mejoras progresivas como principio fundamental.
- Responsivo - Se adapta a cualquier factor de forma:computadora de escritorio, dispositivo móvil, tableta o lo que sea que se presente.
- Independiente de la conectividad - Mejorado con trabajadores de servicio para trabajar sin conexión o en redes de baja calidad.
- similar a una aplicación - Siéntase como una aplicación para el usuario con interacciones y navegación al estilo de una aplicación porque están construidas en el modelo de shell de la aplicación.
- Fresco - Siempre actualizado gracias al proceso de actualización del trabajador del servicio.
- Detectable - Son identificables como "aplicaciones" gracias a los manifiestos W3C y al ámbito de registro de los trabajadores de servicios, lo que permite que los motores de búsqueda las encuentren.
- Reactivable - Facilite el reenganche a través de funciones como notificaciones automáticas.
- Instalable - Permita que los usuarios "mantengan" las aplicaciones que les parezcan más útiles en su pantalla de inicio sin las molestias de una tienda de aplicaciones.
- Enlazable - Comparta fácilmente a través de URL y no requiera una instalación compleja.
Seguir estas pautas asegurará que su aplicación funcione bien no solo cuando se ve en el navegador, sino también cuando se inicia por separado a través de un acceso directo en la pantalla de inicio. Es posible que encuentre la redacción que Google ha elegido bastante confusa, pero no se preocupe, explicaremos las reglas una por una más adelante en el tutorial.
Lo que NO es una aplicación web progresiva
El concepto de PWA no debe confundirse con:
- Aplicaciones híbridas basadas en Córdoba
- Reaccionar nativo
- Script nativo
- Electrón y NW.js
Todas las tecnologías antes mencionadas envuelven aplicaciones HTML y las empaquetan en archivos ejecutables, ya sea un .apk , .exe o cualquier otra cosa, que luego debe descargarse de la tienda de aplicaciones respectiva e instalarse en el dispositivo del usuario.
Los PWA no requieren instalación y no están disponibles (todavía) en Google Play o en la tienda de aplicaciones de iTunes. Para descargar un PWA, simplemente debe visitar su sitio web y luego guardarlo en la pantalla de inicio como acceso directo. Desarrollar y mantener versiones separadas de iOS y Android ya no es un problema, pero se debe tener en cuenta la compatibilidad con el navegador.
1. Seguro
La mayoría de las aplicaciones web progresivas funcionan con API nativas y trabajadores de servicios, tecnologías que manejan datos confidenciales y deben manejarse con precaución. Es por eso que cada PWA debe servirse a través de una conexión HTTPS.
Si no tiene acceso a un servidor con un certificado SSL, la forma más sencilla de ejecutar proyectos en un entorno seguro es a través de GitHub Pages o un servicio similar. Cualquier repositorio de GitHub se puede alojar directamente a través de HTTPS, y tanto GitHub como las páginas de GitHub son gratuitas para los repositorios públicos.
Aquí es donde hemos elegido presentar nuestra demostración:https://tutorialzine.github.io/pwa-photobooth/.
Para pruebas simples en un servidor local, también puede probar Ngrok. Es una pequeña herramienta que le permite tunelizar cualquier localhost que se esté ejecutando actualmente a una URL pública segura. Ngrok es gratuito y está disponible para Windows, Mac y Linux.
2. Progresivo
Esencialmente, lo que esto significa es que las PWA deben usar tecnologías web que sean ampliamente compatibles y funcionen igual de bien en tantos navegadores como sea posible. Como todos sabemos, en el mundo del desarrollo web esto es casi imposible, pero aun así hay cosas que podemos hacer para cubrir una base de usuarios más grande.
Por ejemplo, en nuestra aplicación PhotoBooth usamos la API getUserMedia() para acceder a la cámara de hardware en un dispositivo. Su soporte en diferentes navegadores es bastante inconsistente:Safari no lo admite en absoluto, los navegadores que lo admiten necesitan prefijos y difieren en el uso.
Para garantizar que más personas puedan usar nuestra aplicación, cubrimos todos los prefijos:
navigator.getMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
); También mostramos un error si ninguno de los prefijos funciona:
if (!navigator.getMedia) {
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
// Use Camera API
} Siempre que sea posible, se deben proporcionar respaldos y rellenos de polietileno. Los mismos principios se aplican al código CSS y HTML.
3. Sensible
La aplicación debería verse bien en todos los dispositivos, sin importar el tamaño de la pantalla. Nuestra aplicación tiene una interfaz de usuario bastante simple, por lo que solo usamos un par de consultas de medios para controlar el tamaño de fuente, los rellenos, los márgenes, etc.
No tenga miedo de usar bibliotecas CSS y marcos como Bootstrap, ya que facilitan mucho la creación de cuadrículas y el manejo de la tipografía y la capacidad de respuesta general.
4. Conectividad independiente
Esto es muy importante. El uso de trabajadores de servicio permite que su aplicación funcione incluso cuando no hay conexión a Internet disponible.
Algunas aplicaciones se pueden almacenar en caché solo parcialmente:la interfaz de usuario se almacena en caché y está disponible sin conexión, el contenido dinámico aún necesita acceso a un servidor.
Otros, como nuestra demostración de PhotoBooth, se pueden almacenar en caché en su totalidad. Todo el código fuente y los recursos se guardarán localmente y la aplicación funcionará sin conexión y en línea exactamente de la misma manera. Aquí está el código que hace que suceda la magia:
Primero, debemos crear un archivo JavaScript de trabajador de servicio y definir la lógica detrás de él.
sw.js
// Install the service worker.
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
// The cache will fail if any of these resources can't be saved.
return cache.addAll([
// Path is relative to the origin, not the app directory.
'/pwa-photobooth/',
'/pwa-photobooth/index.html',
'/pwa-photobooth/assets/css/styles.css',
'/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
'/pwa-photobooth/assets/js/script.js',
'/pwa-photobooth/assets/icons/ic-face.png',
'/pwa-photobooth/assets/icons/ic-face-large.png',
'/pwa-photobooth/manifest.json'
])
.then(function() {
console.log('Success! App is available offline!');
})
})
);
});
// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
event.respondWith(
// Try the cache.
caches.match(event.request)
.then(function(response) {
// Fallback to network if resource not stored in cache.
return response || fetch(event.request);
})
);
}); Luego, debemos vincular ese trabajador de servicio a nuestro HTML.
index.html
<script>
// Register Service Worker.
if ('serviceWorker' in navigator) {
// Path is relative to the origin, not project root.
navigator.serviceWorker.register('/pwa-photobooth/sw.js')
.then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function(error) {
console.error('Registration failed with ' + error);
});
}
</script> Ahora todos los archivos de nuestro proyecto se guardarán en el navegador del usuario. Todas las variables y objetos de JavaScript también deben guardarse en localStorage o IndexDB cuando sea posible.
5. Similar a una aplicación
Al crear PWA, se recomienda seguir un concepto de diseño denominado arquitectura de shell de aplicación. Suena muy complicado, pero esencialmente se reduce a esto:la aplicación se divide en dos componentes principales:el shell y el contenido .
El shell contiene todos los elementos estáticos de la interfaz de usuario, como un encabezado, menús, cajones, etc. Cuando almacenamos en caché una aplicación, el shell siempre debe guardarse en el dispositivo, porque queremos que esté disponible en todo momento. De esa forma, cuando un usuario sin conexión a Internet abra la aplicación, no verá una pantalla vacía o un dinosaurio corriendo, verá la interfaz de la aplicación almacenada en caché y un mensaje de error apropiado.
El contenido reside dentro del shell. También se puede almacenar en caché, pero no es necesario hacerlo, ya que el contenido suele ser dinámico, cambia con frecuencia y puede ser diferente en cada carga de página.
6. Fresco
Una vez almacenado en caché, nuestro PWA siempre se cargará desde el almacenamiento local. Sin embargo, si cambiamos el trabajador del servicio sw.js de cualquier forma, en la siguiente página de carga se descargará e instalará la nueva versión.
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1.0.1').then(function(cache) {
// ...
})
);
}); Con las actualizaciones de los trabajadores del servicio, podemos volver a descargar recursos, eliminar el caché antiguo o cambiar completamente la lógica del trabajador del servicio. Puede obtener más información sobre el proceso de actualización de SW en este artículo de Google Developers, aquí.
7. Visible
Al agregar un Manifiesto web a nuestra aplicación, podemos brindar información diversa al respecto y cambiar la forma en que se muestra en los dispositivos de las personas. Permite que las aplicaciones se guarden en la pantalla de inicio con un ícono personalizado, que se inicien en una ventana de navegador separada y muchas otras cosas interesantes.
El manifiesto web toma la forma de un archivo JSON simple:
manifiesto.json
{
"name": "Progressive Web App: PhotoBooth",
"short_name": "PhotoBooth",
"description": "Simple Progressive Web App for taking selfies.",
"icons": [{
"src": "assets/icons/ic-face.png",
"type": "image/png",
"sizes": "72x72"
}, {
"src": "assets/icons/ic-face-large.png",
"type": "image/png",
"sizes": "144x144 256x256"
}],
"start_url": "index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "portrait"
} La mayoría de las propiedades se explican por sí mismas, por lo que cubriremos solo las más importantes. Para ver el formato completo del manifiesto web y todos los campos disponibles, vaya aquí.
- Nombre corto:este es el nombre que tendrá nuestra aplicación cuando se guarde en la pantalla de inicio.
- Iconos:matriz de iconos con diferentes resoluciones.
- Pantalla:define cómo se abrirá la aplicación. Hemos elegido independiente por lo tanto, cuando se inicie, nuestro fotomatón aparecerá en una ventana de pantalla completa sin navegación ni menús del navegador. También se verá como una aplicación separada en multitarea.
Para registrar el manifiesto tenemos que vincularlo a nuestro HTML:
<!-- Web Manifest --> <link rel="manifest" href="manifest.json">
Safari aún no es compatible con el estándar Web Manifest, pero podemos definir un comportamiento similar al de una aplicación con esta metaetiqueta específica de Apple:
<!-- Meta tag for app-like behaviour in iOS --> <meta name=”apple-mobile-web-app-capable” content=”yes”>
8. Reconectable
Las notificaciones automáticas ya no se limitan a las aplicaciones nativas. Gracias a los trabajadores del servicio y la API Push, las aplicaciones web también pueden enviar mensajes a la barra de notificaciones de Android. No todas las aplicaciones se beneficiarán de esta característica, pero cuando se usan correctamente, las notificaciones realmente pueden ayudar a atraer a los usuarios.
Este tema va más allá del alcance de nuestro tutorial, ya que las notificaciones automáticas son bastante complicadas y merecen una lección completa por sí solas. Si aún desea implementar notificaciones en su aplicación web, estos son algunos de los mejores recursos de aprendizaje disponibles:
- Google Developers, notificaciones automáticas:Oportunas, Relevantes y Precisas - aquí.
- Desarrolladores de Google, notificaciones automáticas en la web abierta:aquí.
- MDN, Usando la API Push - aquí.
- Push.js, biblioteca que proporciona una API más limpia para manejar notificaciones push, aquí.
9. Instalable
De manera predeterminada, cualquier sitio web se puede guardar manualmente en la pantalla de inicio usando Agregar a la pantalla de inicio del menú del navegador Chrome. Sin embargo, puede ser bastante difícil hacer que los usuarios "instalen" nuestra aplicación de esta manera, ya que la mayoría de la gente no conoce esa función en absoluto.
Afortunadamente, hay una manera de que su aplicación solicite a los usuarios que la guarden con una ventana emergente de instalación simple. Para evitar que los desarrolladores abusen de estas ventanas emergentes, no hay forma de mostrarlas mediante programación. En cambio, aparecerán solos cuando una aplicación cumpla una serie de requisitos:
- Hay un manifiesto web válido.
- Hay un Service Worker válido instalado.
- La aplicación se sirve a través de HTTPS.
Cubrimos todo lo anterior, por lo que cuando un usuario visite el sitio web de nuestra aplicación un par de veces, recibirá este mensaje:
Todo el proceso de instalación de nuestra aplicación se encuentra en este simple aviso. La instalación se realiza instantáneamente y, una vez guardado, PhotoBooth estará disponible para iniciarse desde un ícono de la pantalla de inicio, comportándose exactamente como una aplicación nativa.
10. Enlazable
Cualquier persona con un navegador web tiene acceso a las aplicaciones PWA y se pueden compartir simplemente a través de su URL. No se requieren herramientas de terceros para encontrarlos o instalarlos.
Si una aplicación se ejecuta en modo independiente, también es recomendable agregar botones para compartir en la aplicación, ya que la barra de direcciones y los menús del navegador no están visibles.
Conclusión
Nuestro PWA ahora está completo. Podemos probar qué tan bien sigue las reglas de PWA con una herramienta oficial creada por Google llamada Lighthouse. Recrea posibles escenarios y prueba la aplicación a fondo. Esto es lo que nos dice sobre PhotoBooth:
¡Pasamos!
Si desea encontrar más PWA para jugar, vaya a pwa.rocks. Ofrecen una buena colección de juegos y herramientas útiles, que muestran el gran poder de las aplicaciones web progresivas.