Contenido
- El ascenso de las PWA
- PWA en acción hoy
- Instalación
- Lanzamiento inmediato y sin conexión
- Experiencia de primera
- Tiendas de aplicaciones
- Integración de plataforma
- Desafíos de diseño y UX
- El año de las PWA
Así como el diseño web receptivo cerró la brecha entre los sitios de escritorio y móviles hace unos años, las técnicas de aplicaciones web progresivas actualmente están cerrando la brecha entre la web y el mundo de las aplicaciones. Con las experiencias de los usuarios de aplicaciones de escritorio a móviles convergiendo rápidamente, parece que está evolucionando una Internet mucho más elegante y eficiente, aunque inevitablemente no sin algunos cambios significativos en su código genético subyacente.
- Cómo crear una aplicación web progresiva
Evidentemente, hay algunas presiones selectivas importantes que impulsan esto. En primer lugar, la creación de aplicaciones nativas para cada nicho no es necesariamente un uso eficiente de los recursos: los usuarios terminan con cientos de grandes aplicaciones desperdiciando ancho de banda y valioso espacio en disco y las empresas gastan una gran cantidad de dinero creando aplicaciones solo para que sean abandonadas. después de sus primeras versiones. Y la mayoría de estas aplicaciones solo están impulsadas por contenido web: información que proviene de servicios web o un sistema de gestión de contenido.
La definición de una aplicación web progresiva no es concreta. Una PWA es solo una aplicación web que utiliza varias API y capacidades nuevas en la plataforma web mediante la mejora progresiva para ofrecer una experiencia similar a una aplicación en todas las plataformas con la misma base de código. Es más un conjunto de mejores prácticas y uso de API que crea una excelente experiencia similar a una aplicación para sus usuarios, por lo que no es como si tuviera o no tuviera una PWA; es más como si su sitio fuera más o menos PWA.
¿Estás a punto de empezar a construir un nuevo sitio? Intente utilizar un creador de sitios web. Y asegúrese de obtener también el soporte que necesita de un servicio de alojamiento web decente. O para algo ligeramente diferente, consulte nuestra guía sobre el mejor almacenamiento en la nube.
El ascenso de las PWA
Si bien el nombre PWA se acuñó en 2015 en el artículo Escaping Tabs Without Losing our Soul de Alex Russell, que trabaja en Google para el equipo de Chrome, su viaje en realidad no comenzó allí. Solíamos tener aplicaciones HTML (HTA), que fueron creadas por Microsoft en 1999, junto con muchas otras plataformas de aplicaciones web de Nokia, BlackBerry y otras empresas. Luego, en 2007, Steve Jobs presentó lo que era en ese momento la única forma de crear aplicaciones para el iPhone original: PWA, aunque con un nombre diferente. Chrome comenzó desde allí, mejoró las API unos años más tarde e inventó el nombre PWA.
Con tantas experiencias fallidas anteriores tratando de llevar contenido web al mundo de las aplicaciones, ¿por qué creemos que funcionará ahora? Bueno, principalmente, depende de las empresas que ahora están trabajando y promocionando las tecnologías detrás de las PWA, como Microsoft, Google, Apple y Mozilla, por nombrar solo algunas. Además, el rendimiento de la plataforma web llegó a un punto en el que no se percibe ninguna diferencia cuando se compara una PWA bien diseñada con una aplicación nativa. Esas condiciones nunca han existido antes y esa es una de las razones por las que la comunidad web ha decidido que ha llegado el momento de las PWA.
PWA en acción hoy
Hoy en día, las PWA son completamente funcionales e instalables en:
- Android con la mayoría de los navegadores, con Chrome ofreciendo la mejor experiencia
- iOS con Safari
- Chromebooks
- Windows 10 de Microsoft Store
- Teléfonos con funciones con KaiOS, una bifurcación de Firefox OS, actualmente disponible para millones de usuarios principalmente en India
El soporte también llegará a macOS, Windows y Linux a través de Chrome a finales de este año. Está disponible hoy como una bandera experimental "Desktop PWA" si quieres probarlo ahora. La instalación en Windows on Edge sin el uso de la tienda también llegará más tarde, aunque no se define un período de tiempo específico.
Si vuelve a leer la lista, puede ver que todas las plataformas tienen o están a punto de tener soporte para PWA completamente instalables en los próximos meses. Y debido a que una PWA es solo un sitio web con funciones en la parte superior que se activarán solo en navegadores compatibles, incluso podemos decir que es compatible con todos los navegadores desde su funcionalidad básica.
Además, actualmente se están generando PWA a partir de la mayoría de las CLI para diferentes marcos, incluida la CLI de Angular 6+, la aplicación React Create, el kit de inicio PWA de Polymer y la CLI de Preact. Finalmente, al equipo de Ionic Framework se le ocurrió la idea de Capacitor, un reemplazo de Cordova de código abierto que hace posible los PWA nativos en todas las tiendas de aplicaciones.
Instalación
Uno de los aspectos críticos de una PWA es la instalación de la aplicación. Este proceso se realiza en dos pasos opcionales: la descarga y el almacenamiento sin conexión de los archivos de la aplicación y la instalación del icono en el sistema operativo. Debido a que ambos pasos son opcionales, puede ofrecer una experiencia sin conexión en el navegador o puede ofrecer un icono sin instalación sin conexión. Pero una verdadera PWA debe incluir ambos: debe ser servida con TLS bajo HTTPS y el usuario decidirá si la usará en el navegador o dentro de su propio ícono instalado.
Lanzamiento inmediato y sin conexión
El cerebro de una PWA es el trabajador de servicios, un archivo JavaScript instalado en el dispositivo del usuario que es responsable de descargar los archivos de la aplicación, almacenarlos en un caché y luego servirlos cuando sea necesario. Una vez que el trabajador del servicio está instalado, actúa como un proxy de red para cada recurso que la aplicación web necesita: puede decidir buscarlo de la red o entregarlo desde la caché local, lo que hace que la aplicación esté disponible sin conexión y también disponible en solo un par de milisegundos incluso si el usuario tiene conexión, emulando el inicio de una aplicación nativa.
Para instalar un trabajador de servicio, su documento HTML deberá incluir algo como:
if ('serviceWorker' en el navegador) navigator.serviceWorker.register ("sw.js");
Eso instalará el archivo "sw.js" en los dispositivos de los usuarios para la carpeta actual en el dominio actual, un concepto conocido como alcance. Una vez instalado, ese trabajador del servicio administrará las próximas visitas a cualquier URL dentro de su alcance.
Supongamos que tenemos una PWA con cuatro archivos: index.html, app.js, app.css y logo.png. Lo primero es instalar esos archivos en la caché en el archivo sw.js.
recursos const = ["index.html", "app.js", "app.css", "logo.png"]; uno mismo. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Luego, para que la PWA siempre se sirva desde la caché, debemos escuchar el evento de recuperación dentro del trabajador del servicio y decidir la política de caché que se utilizará, como la caché primero con el siguiente fragmento.
self.addEventListener ("buscar", e => e.respondWith (caches.match (e.request). then (res => res);
En este caso, cada vez que el usuario acceda a la PWA (tanto desde un navegador como desde un icono instalado), el motor obtendrá los archivos de la caché. Una ventaja de las PWA frente a las aplicaciones nativas es que los dispositivos no necesitan descargar todos los archivos nuevamente cuando hay un cambio, solo el archivo que ha cambiado con un proceso transparente. Además, todavía podemos descargar partes de la aplicación a pedido.
Pero el desafío es ¿cómo saber qué archivos se actualizaron en el servidor para poder reemplazarlos en la caché? Si no desea escribir un trabajador de servicio de bajo nivel para administrar esto, puede usar la biblioteca de código abierto Workbox, que lo ayudará con la generación del trabajador de servicio y el manifiesto de recursos para actualizar el paquete instalado.
Tenga en cuenta que los archivos de su PWA se eliminarán si hay presión de almacenamiento en el dispositivo, a menos que solicite Almacenamiento persistente si está disponible:
if ("almacenamiento" en el navegador && "persistir" en el navegador.storage) navigator.storage.persist ();
En Chrome y la mayoría de los navegadores de Android, su aplicación no puede utilizar más del cinco por ciento del espacio disponible; en iOS es 50MiB (cerca de 50 MB) solo por host; en Edge es variable según el tamaño total de la memoria y en Windows Store es ilimitado.
Experiencia de primera
Tenemos el cerebro y ahora es el momento del corazón: el manifiesto de la aplicación web. El propósito de convertir un sitio web en una PWA no es solo garantizar que esté disponible rápidamente o sin conexión, sino también permitir que tenga su propio ícono en el sistema operativo y ofrecer una experiencia completamente independiente como cualquier otra aplicación instalada.
El manifiesto es un archivo JSON que define metadatos para la PWA utilizada por un navegador o una tienda de aplicaciones para definir el comportamiento de instalación.
El archivo define varias propiedades como metadatos para su PWA. Cada sistema operativo leerá estas propiedades y hará todo lo posible para adaptarse a la experiencia que prefiera. Por ejemplo, Android leerá "display: standalone" y creará una experiencia de aplicación normal. Con "display: minimal-ui" creará una experiencia con una URL visible y un certificado TLS, útil para aplicaciones sensibles a la seguridad. Con "pantalla: pantalla completa", crea aplicaciones totalmente inmersivas sin barra de estado ni botón de retroceso visible. Un conjunto de iconos y colores define cómo se verán las pantallas de presentación o las barras de título en la ventana de su aplicación.
Hay algunos generadores de manifiestos, como Web App Manifest Generator o PWA Builder, que también cambiarán el tamaño del icono en diferentes resoluciones si proporciona uno de alta resolución (mínimo 512 píxeles).
Cuando tenga el archivo de manifiesto vinculado en su documento HTML, los usuarios podrán instalar la aplicación utilizando diferentes técnicas según el navegador, generalmente llamadas Agregar a la pantalla de inicio, Instalar o simplemente Agregar. Si Bing puede rastrear su PWA, Microsoft la agregará automáticamente a Microsoft Store para que los usuarios de Windows 10 puedan instalarla desde allí.
En algunos sistemas operativos, su PWA tendrá la capacidad de capturar enlaces. Esto significa que después de que el usuario haya instalado la aplicación, cualquier URL dentro del alcance de su manifiesto se abrirá dentro de los límites de su aplicación y no en el navegador, sin importar si aparece en el navegador u otras aplicaciones como WhatsApp, Facebook. o un correo electrónico.
Si pasa los requisitos de PWA que estamos definiendo aquí, algunas plataformas ofrecerán credenciales ambientales (un pequeño ícono generalmente en la barra de URL que especifica que la web es instalable) o un banner de aplicación web. Si lo prefiere, también puede agregar su propio botón de instalación personalizado con el siguiente fragmento:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // mostrará el indicador nativo de instalación})
Si la PWA está instalada, el evento "aplicación instalada" se activará en el objeto de la ventana para que pueda realizar un seguimiento de las estadísticas que lo escuchan.
Tiendas de aplicaciones
Uno de los principales beneficios de instalar desde un navegador es poder evitar el proceso de aprobación de la tienda de aplicaciones o tener que pagar para ser editor. Eso viene con ventajas obvias, como la publicación instantánea, la creación de aplicaciones privadas para empresas o aplicaciones que no deberían aceptarse en las tiendas.
Pero algunas empresas quieren estar en la tienda. A partir de hoy, las únicas tiendas que aceptan oficialmente PWA son Windows Store y kaiOS Store. Afortunadamente, con herramientas como Capacitor (actualmente en Alpha) o PWA Builder, también podemos crear y firmar paquetes nativos para otras plataformas.
Hay algunas PWA ya publicadas en Google Play Store, como Twitter Lite y Google Maps Go, actualmente bajo implementaciones personalizadas. Chrome ofrecerá una solución de Chrome 68 a través de actividades web confiables. A partir de ese punto, podremos crear un paquete de Android (APK) con un lanzador a nuestra PWA y subirlo a la tienda. Para Microsoft Store en Windows 10, el sitio PWA Builder está ayudando actualmente con la generación de un paquete APPX de Windows 10. Con una vista web, es posible que pueda crear manualmente una aplicación de iOS para la App Store, pero tenga mucho cuidado con las reglas de la tienda.
Integración de plataforma
Al implementar técnicas de mejora progresiva, podrá utilizar muchas funciones, incluidas las notificaciones automáticas, el acceso a la cámara y al micrófono, la ubicación geográfica, los sensores, los pagos, los cuadros de diálogo para compartir y el almacenamiento fuera de línea. Todas estas funciones se ejecutan directamente dentro del modelo de seguridad del navegador, incluidos los cuadros de diálogo de permisos.
También podemos comunicarnos con otras aplicaciones a través de esquemas de URI, como abrir Twitter, YouTube o WhatsApp a través de sus URL o URI personalizadas, como whatsapp: //.
Finalmente, al crear PWA nativas que se publican en la tienda usando Capacitor o en Microsoft Store, podremos hacer un puente a las API nativas que nos permitirán ejecutar prácticamente cualquier código nativo. Esa integración con Windows 10 incluye acceso al hardware, pero también integración con el sistema operativo, ofreciendo opciones como Pin to Start. Por ejemplo, Twitter PWA le permite anclar a cualquier usuario a su pantalla de inicio.
Desafíos de diseño y UX
El diseño de PWA presenta desafíos únicos, por lo que es importante dedicar un tiempo a investigar, probar tanto como sea posible y considerar lo siguiente:
- Los usuarios esperarán experiencias similares a las de una aplicación.
- El proceso de instalación aún es nuevo, por lo que debemos hacer un esfuerzo adicional para explicar cómo instalar la aplicación.
- Actualizar la aplicación en segundo plano sin la interacción del usuario es genial, pero también agrega algunos desafíos para la UX.
- En el escritorio, el diseño web receptivo toma una nueva frontera, ya que las ventanas PWA pueden ser pequeñas, mucho más pequeñas que una ventana gráfica móvil. Esto significa que necesitamos crear vistas específicas o pequeños widgets para este formato, como se ve hoy en Chrome OS.
- Las notificaciones push deben agregar valor solo al usuario, así que aprenda a preguntar en el momento adecuado y no pierda la oportunidad enviando mensajes que no son útiles o interesantes.
- Necesitamos diseñar para el rendimiento web y para el acceso sin conexión.
El año de las PWA
Con la incorporación de iOS y escritorio este año, las PWA están en todas partes hoy. Pero debemos recordar que su viaje recién está comenzando, así que espere cambios frecuentes y asegúrese de mantenerse actualizado con las últimas técnicas e ideas para brindar una excelente experiencia de usuario mientras la plataforma evoluciona.
Este artículo se publicó originalmente en el número 308 de neto, la revista más vendida del mundo para diseñadores y desarrolladores web. Compra el número 308 aquí o Suscríbete aquí.
