El autor del material, cuya traducción publicamos hoy, dice que puede tener prisa, pero de lo que quiere hablar es al menos una noticia muy interesante. Estamos hablando de aplicaciones web progresivas de escritorio, que pueden desplazar significativamente la posición de las aplicaciones basadas en Electron.
Innovaciones de Chrome v70
La última versión de Chrome (v70) admite aplicaciones web progresivas de escritorio (PWA) en plataformas Linux y Windows.
Soporte de escritorio PWA en ChromeSi observa la lista de sistemas compatibles, inmediatamente se hace evidente la ausencia de MacOS en ella. Sin embargo, esto es solo hasta que se lanza Chrome v72.
Desktop PWA Support en MacOSEs importante tener en cuenta que, aunque esta función no está habilitada de forma predeterminada en MacOS, se puede activar con el indicador correspondiente. Para hacer esto, abra Chrome, vaya a
chrome: // flags y encuentre esta bandera allí. También puede ir a la bandera directamente usando el enlace
chrome: // flags / # enable-desktop-pwas .
¿Qué son las aplicaciones web progresivas?
No entraremos en detalles específicos sobre PWA aquí.
Aquí está la sección de documentación de Google donde puede leer sobre ellos. Para ver y probar PWA con sus propios ojos, abra Chrome para Android o Safari en iOS (aquí, sin embargo, no todas las funciones de PWA son compatibles) y vea
estos ejemplos. Y
aquí hay un discurso sobre este tema con Google I / O '18.
¿Qué es el electrón?
Electron es una plataforma que permite a los desarrolladores crear aplicaciones de escritorio multiplataforma usando JavaScript, HTML y CSS. Aquí también se utilizan algunas bibliotecas y marcos JavaScript excelentes. Esto facilita a los programadores web ingresar al desarrollo de aplicaciones de escritorio. Las aplicaciones basadas en electrones han ganado una inmensa popularidad en los últimos años. Como parte de proyectos como Slack, VS Code, Atom, Discord, se ha invertido un esfuerzo considerable en desarrollar aplicaciones usando Electron. Si no está familiarizado con estos proyectos, definitivamente debería mirar las aplicaciones y servicios correspondientes. Las aplicaciones de escritorio tradicionales a menudo parecían torpes, sus elementos de interfaz parecían algo anticuados. Electron definitivamente ha traído belleza y gracia al mundo de las aplicaciones de escritorio.
¿Qué tiene que ver PWA con eso?
Aunque las aplicaciones Electron son un fenómeno en crecimiento y evolución, y su implementación está cerca de la implementación de aplicaciones web, todavía tienen algunas desventajas. En primer lugar, tales aplicaciones usan sus propias instancias del navegador Chromium. Mucha gente sabe cuánta RAM se necesita para que Chrome funcione. Ahora, para evaluar la situación que surge en el sistema cuando se lanzan varias aplicaciones Electron simultáneamente, debe tomar su número y multiplicarlo por esta cantidad de memoria. Si está interesado, abra algunas aplicaciones de Electron y observe cuánta memoria consumen.
El uso excesivo de memoria no es muy bueno en sí mismo, y aquí debemos agregar que muchas aplicaciones de Electron interactúan de manera específica con Node.js, no necesariamente haciéndolo de la misma manera que las aplicaciones web correspondientes.
El uso de Electron se suma a las dificultades asociadas con el soporte de versiones anteriores de programas y la configuración del proceso de actualización de la aplicación.
Ahora hablemos de PWA de escritorio. Imagine aplicaciones que se parecen a las escritas en Electron, con las que también es conveniente trabajar, pero al mismo tiempo instalarlas es simple, también se actualizan sin problemas, durante la transferencia de materiales a un cliente desde una sola aplicación web. Parece que Chrome está estableciendo el estándar para un escenario de comportamiento similar en los PWA de escritorio. Cuando un usuario que trabaja en Chrome visita una determinada página web y la aplicación que se le presenta cumple con
este conjunto de criterios, el desarrollador de la aplicación podrá ofrecerle al usuario que instale la aplicación en su computadora. La solicitud se parece a la siguiente.
Invitación de instalación de PWAEl desarrollador puede mostrar este mensaje solo después de que el navegador
beforeinstallprompt evento
beforeinstallprompt del objeto de
beforeinstallprompt . Después de instalar la aplicación, el icono correspondiente aparece en el escritorio.
Icono de iniciador de PWADespués de iniciar dicha aplicación, se abre en una ventana del navegador que no está equipada con controles convencionales. Dicha aplicación se percibe como una aplicación de escritorio real.
Lanzado PWAEjemplo de PWA
Aquí hay un ejemplo de una PWA de escritorio cuyas capturas de pantalla se usaron como ilustraciones de arriba.
Aquí está su repositorio en GitHub. Para instalar esta aplicación, debe habilitar el indicador correspondiente en Chrome y pasar al menos 30 segundos en el sitio.
Como ya se mencionó, una aplicación web, para ser considerada una PWA de escritorio, debe cumplir un cierto conjunto de
requisitos . Si desea crear y probar su propia PWA de escritorio, puede tomar
este repositorio como base y tener en cuenta los requisitos. Si haces un breve resumen de ellos, obtienes lo siguiente:
- La aplicación debe ser servida a través de HTTPS.
- Debe tener un trabajador de servicio instalado con al menos un controlador de
fetch . - Debe contener un archivo
manifest.json formato manifest.json . - Sus páginas deben diseñarse utilizando técnicas de diseño receptivo.
Ejemplos adicionales
Si está trabajando en MacOS, entonces PWA puede considerar que no puede instalarlos y no le mostrarán una invitación para instalarlos. Si habilita los indicadores y ajustes apropiados con la consola del desarrollador, puede hacer que la PWA muestre una solicitud de instalación. Estos son algunos de los PWA existentes que se han instalado en la Mac.
▍Starbucks
Starbucks ha invertido mucho en el desarrollo de una gran PWA. Su aplicación de escritorio fue realmente impresionante.
PWA Starbucks▍Google Maps
Esta es solo una gran aplicación. Hace su trabajo y no carga particularmente el sistema, diferenciándose en trabajo rápido y diseño receptivo. Para instalar esta aplicación, debe idear y descargar el sitio móvil de Google Maps.
PWA Google Maps▍Twitter
Twitter intentó desarrollar un PWA móvil, y la versión de escritorio puede considerarse una valiosa adición a la aplicación móvil.
Twitter de PWAResumen
A pesar del hecho de que se ha generado mucho ruido en torno a los PWA de escritorio, debe tener en cuenta que esta tecnología aún está en pañales. En particular, se pueden tener en cuenta las siguientes instrucciones de desarrollo para PWAs de escritorio:
- Enlaces profundos: los enlaces abiertos desde Chrome invocan la aplicación instalada.
- Notificaciones en los íconos de aplicaciones: muestra notificaciones en los íconos de inicio de aplicaciones de escritorio, al igual que en los íconos de aplicaciones móviles
- Soporte de teclas rápidas: la capacidad de escuchar eventos de teclado para usar dentro de aplicaciones de teclas rápidas.
Una vez que las tecnologías de desarrollo de escritorio de PWA se hayan desarrollado lo suficiente, estas aplicaciones se convertirán en competidores serios de los proyectos actuales basados en Electron.
Estimados lectores! ¿Planea desarrollar PWA de escritorio?
