Las apps web progresivas (AWP) para computadoras son una excelente manera de crear apps multiplataforma y compatibles con varios navegadores con un modelo de seguridad que se centra en la seguridad y la privacidad del usuario, y que incluye el uso compartido integrado con la capacidad inherente de vinculación de la Web. Crea una app web nueva o mejora la existente con APIs modernas para brindarle capacidades, confiabilidad y capacidad de instalación similares a las de una app para computadoras. Las AWP son la mejor manera de ofrecer tu app web para ChromeOS.
En ChromeOS, la potencia de la plataforma web es fundamental, y las apps web son una función principal de la plataforma. Las AWP instaladas aparecen en el Selector de ChromeOS, se pueden fijar en la biblioteca y se integran profundamente con el resto del SO.
Para comenzar, revisa la Lista de tareas de AWP y asegúrate de que tu app web apruebe la lista de tareas principal de AWP. Puedes usar PWABuilder para proporcionar una página sin conexión personalizada y hacer que tu app se pueda instalar. Luego, usa estas recomendaciones para que tu APW se destaque en ChromeOS.
Haz que se pueda instalar
Una de las grandes ventajas de las AWP sobre las apps web normales es la capacidad de instalarse, al igual que las apps tradicionales para computadoras de escritorio. La ruta de la app web progresiva en web.dev tiene una sección dedicada a cómo hacer que tu AWP se pueda instalar. Úsala para comenzar. Para que una AWP se identifique como instalable en ChromeOS, se deben cumplir los siguientes criterios, que se pueden verificar con la auditoría de instalación de Lighthouse:
- Debe tener un manifiesto de aplicación web válido.
-
Debe cumplir con los criterios de instalación de Chrome.
- En el caso de las PWA en ChromeOS, se mostrará un mensaje de instalación en la barra de direcciones sin que se cumpla un umbral de heurística de participación del usuario.
Los íconos son una parte importante de la identidad de tu AWP, así que asegúrate de que sean interesantes y únicos. Incluso pueden incluir transparencia. Como las PWA tienen una sola base de código que se comparte en todas las plataformas, debes asegurarte de tener disponible un ícono enmascarable. Asegúrate de incluir también íconos normales para los sistemas operativos que no admiten íconos enmascarables.
Ahora que tu AWP se puede instalar, aparecerá en todo ChromeOS, desde el selector hasta la biblioteca. Tener instalada tu PWA también abre algunas capacidades adicionales para que tu app realmente se destaque.
Nota sobre el trabajo sin conexión
Simplemente con hacer que tu app se pueda instalar, obtendrás muchas ventajas en cuanto a capacidad, usabilidad y visibilidad. Hacer que tu AWP sea instalable no significa que toda tu experiencia debe funcionar sin conexión. Sin embargo, para que una app web instalada se sienta como una app tradicional, debe tener alguna forma de funcionalidad sin conexión. Una página sin conexión personalizada básica es suficiente para comenzar. Los usuarios esperan que las apps instaladas no fallen cuando cambia el estado de la conexión. Al igual que una app tradicional nunca muestra una página en blanco cuando está sin conexión, las AWP nunca deberían mostrar la página sin conexión predeterminada del navegador. Las páginas sin conexión personalizadas pueden incluir desde un mensaje que le indique al usuario que necesita conexión para jugar hasta un juego que le permita pasar el tiempo hasta que vuelva a tener conexión. Proporcionar esta experiencia sin conexión personalizada para las páginas o funciones que no se almacenan en caché y que requieren una conexión ayuda a cerrar la brecha de la experiencia del usuario en la app.
Puedes crear una página sin conexión simple durante el evento install de un service worker almacenando en caché previamente la página deseada para su uso posterior y respondiendo con ella si un usuario está sin conexión. Puedes seguir nuestro ejemplo de página sin conexión personalizada para ver un ejemplo de esto en acción y aprender a implementarlo por tu cuenta.
Si deseas brindar una experiencia más sólida, además de la API de Cache Storage, puedes usar funciones como IndexedDB para el almacenamiento NoSQL en el navegador y la sincronización en segundo plano para permitir que los usuarios realicen acciones sin conexión y pospongan la comunicación con el servidor hasta que vuelvan a tener una conexión estable. También puedes implementar patrones como sesiones seguras y duraderas para mantener la autenticación de los usuarios y pantallas esqueleto para que los usuarios sepan rápidamente que estás cargando contenido que puede recurrir al contenido almacenado en caché o a un indicador sin conexión si es necesario.
Haz que se pueda tocar
Casi todos los dispositivos ChromeOS admiten la entrada táctil y muchos también admiten lápices ópticos, por lo que debes asegurarte de que tu app funcione sin problemas con ambas entradas, además del teclado y el mouse normales. La API de eventos de puntero está diseñada específicamente para controlar esto. Algunos eventos fundamentales relacionados con el puntero que probablemente no tendrás que cambiar, como los eventos click Otros eventos, como mouseup o touchstart, deben migrarse a sus equivalentes de eventos de puntero para que funcionen sin problemas en cualquier tipo de puntero. Incluso puedes administrar diferentes tipos de entrada por separado si lo deseas. En el caso de las apps y los juegos que dependen en gran medida de la entrada táctil del usuario, migrar a la API de eventos de puntero marcará una gran diferencia en los dispositivos ChromeOS.
Dibujo fluido en la Web
Si compilas una app en la que los usuarios dibujan con los dedos o lápices ópticos, históricamente ha sido difícil mantener la latencia entre su entrada y tu salida lo suficientemente rápida como para que se sienta fluida. Cuando compiles este tipo de apps potenciadas por la API de Canvas para ChromeOS, te recomendamos que uses la sugerencia desynchronized para canvas.getContext() y, así, proporcionar una renderización de baja latencia. Para usar la sugerencia desynchronized en un lienzo, haz lo siguiente:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Consideraciones de diseño para el tacto
Es importante tener en cuenta la compatibilidad con el tacto y el lápiz stylus cuando diseñes tus apps web. Las interacciones que puedes dar por sentado, como la acción de colocar el cursor sobre un elemento, no funcionan bien, o no funcionan en absoluto, para otros métodos de entrada. Estas son algunas prácticas recomendadas que debes tener en cuenta cuando diseñes interfaces compatibles con el tacto y el lápiz:
- No hagas suposiciones sobre la entrada en función del tamaño de la pantalla. En su lugar, usa la detección de funciones, idealmente en el momento de la entrada, para determinar cómo responder. Recuerda que, en ChromeOS, los usuarios pueden cambiar sin problemas entre el mouse, la función táctil y la pluma stylus en una misma sesión.
- Asegúrate de que los elementos que esperas que toque el usuario tengan un tamaño objetivo mínimo lo suficientemente grande para que no se presionen accidentalmente los elementos circundantes.
- Considera el desplazamiento como una mejora progresiva y asegúrate de que la interacción se pueda realizar por otros medios para el tacto y el lápiz óptico (por ejemplo, con una presión prolongada o un toque).
- Los usuarios de dispositivos táctiles esperan poder interactuar directamente con los elementos en pantalla, por ejemplo, pellizcar para hacer zoom en los mapas en lugar de usar los botones de acercar o alejar. Agregar gestos táctiles comunes, cuando corresponda, puede ser de gran ayuda para que tu app se sienta natural.
Hazlo capaz
Si bien algunas capacidades de las AWP son conocidas, como la API de Notifications que permite que una app web reciba y publique notificaciones de la plataforma, hay varias funciones nuevas y próximas que llegarán a la Web para potenciar tus apps. El proyecto Web Capabilities de Chromium, también conocido como Proyecto Fugu 🐡, es un esfuerzo por habilitar estándares web nuevos y potentes que preserven lo que hace que la Web sea única: su seguridad centrada en el usuario, su baja fricción y su compatibilidad multiplataforma.
Nota: Estas capacidades se encuentran en diferentes estados de desarrollo, desde en consideración hasta lanzadas, y es posible que solo estén disponibles para computadoras o dispositivos móviles, no para ambos. Si bien es probable que los usuarios de ChromeOS obtengan funciones orientadas a computadoras de escritorio a medida que estén disponibles, la compatibilidad multiplataforma, incluso la compatibilidad estable en ChromeOS, a veces puede ser un proceso de varios años.