Desarrollo de una aplicación web Nothing Progressive en 15 minutos

Google Play tiene una aplicación desarrollada por Chilango Lab que tiene más de un millón de descargas y una calificación bastante alta. Se llama Nothing , que se puede traducir como "Nothing", y es maravilloso porque no hace absolutamente nada. Es cierto que un huevo de Pascua agradable está escondido en él, pero esto no cambia el asunto. Si analiza esta aplicación, resulta que su tamaño es de 14 MB, durante la instalación toma 19.24 MB.


El autor del material, cuya traducción publicamos hoy, dice que al mirar esta solicitud, se preguntó si podría reescribirse para que ocupe menos espacio.

El tuvo éxito. A saber, recreó la funcionalidad de Nothing usando HTML, CSS y JavaScript, convirtiéndola en una aplicación web progresiva ( PWA , Progressive Web App). Funciona sin conexión a Internet, puede llamarlo, como una aplicación normal, desde la pantalla principal. La principal diferencia entre una aplicación normal de Android y su copia PWA es el tamaño. El primero, recuerda, ocupa 19,24 MB en el dispositivo. El segundo - 205 Kb.


Aplicación normal y PWA

Crear iconos para nada

Antes de contarle sobre el código, cree un icono para PWA Nothing. Para resolver este problema, utilicé la excelente herramienta de código abierto Launcher Icon Generator .


Launcher Icon Generator

Usando el generador de iconos Launcher, pude crear un icono para mi opción Nothing literalmente al instante. El programa genera automáticamente iconos de varios tamaños.

Pwacompat

Después de completar el icono, necesitaba crear un manifiesto para la aplicación web . Gracias a él, el navegador Chrome para Android mostrará una pantalla de inicio cuando se inicie PWA. ¿Es posible hacer que tal pantalla aparezca en otros navegadores también? Sí, es posible, y para esto necesitamos la biblioteca PWACompat, que nos permite implementar exactamente lo que necesitamos. Esto, junto con el manifiesto, es suficiente para conectarse en el código PWA:

<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"    crossorigin="anonymous"></script> 

Así es como se ve la pantalla de bienvenida en Safari (iOS).


Pantalla de bienvenida de Safari

Pero esto no se limita a las capacidades de PWACompat. En particular, esta biblioteca le permite crear metaetiquetas para varios navegadores que describen cómo debe abrirse PWA, y también establece el color del tema en función del manifiesto de la aplicación web.

Agregar una aplicación a la pantalla de inicio

Una de mis funciones favoritas de PWA se llama A2HS (Agregar a la pantalla de inicio), gracias a ella puede agregar un icono para iniciar la aplicación en la pantalla principal. Sin embargo, comenzando con Chrome 68 en Android, en lugar de una gran pancarta A2HS, ahora se muestra un pequeño panel de información con una propuesta adecuada.


Adiós pancarta A2HS (Chrome 67 y versiones anteriores)

En cualquier caso, el tablero de instrumentos es una solución intermedia, una vez que esta característica se elimine de Chrome. Así que necesitaba crear una mejor interfaz A2HS para PWA Nothing.


Botón de instalación (izquierda), botón de instalación y panel A2HS (centro), cuadro de diálogo Agregar a la pantalla de inicio (derecha)

En este caso, si el navegador admite la posibilidad de agregar una aplicación a la pantalla principal, mostrará, en la parte superior de la página, el botón Instalar. Cuando el usuario hace clic en este botón, se abre el cuadro de diálogo Agregar a la pantalla de inicio.

Aquí está el código relevante.

 var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) {   event.preventDefault();   installPromptEvent = event;   btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () {   btnInstall.setAttribute('disabled', '');   installPromptEvent.prompt();   installPromptEvent.userChoice.then((choice) => {       if (choice.outcome === 'accepted') {           console.log('User accepted the A2HS prompt');       } else {           console.log('User dismissed the A2HS prompt');       }       installPromptEvent = null;   }); }); 

Si el sitio cumple con los criterios de A2HS, entonces el navegador generará el evento beforeinstallprompt .

Huevo de pascua

¡Atención, habrá un spoiler!


Hablando estrictamente, el huevo de Pascua PWA Nothing es un código Konami y un video de 10 horas en YouTube .


Llamada de huevo de Pascua (arriba, arriba, abajo, abajo, izquierda, derecha, izquierda, derecha y dos toques)

Después de que el usuario haya completado el código, PWA abrirá este video .

Para agregar soporte de código Konami a mi aplicación, utilicé la biblioteca Konami-JS . Es pequeño, fácil de trabajar y, entre otras cosas, es compatible con dispositivos móviles. Aquí radica la única diferencia entre mi PWA y la aplicación original de Android. En particular, cuando yo, al ingresar el código, necesito hacer dos toques, en la aplicación original debes usar el panel con botones.

Apague la actualización de la página mientras tira

Yo, en el proceso de trabajar en la aplicación, tuve un pequeño problema. Cuando un usuario intenta estirar una página hacia abajo en un dispositivo móvil, esto provoca una actualización de la página (pull-to-refresh). No lo necesito


Actualización de página no deseada

Afortunadamente, lidiar con este problema es fácil. Todo lo que necesitas es una línea de código CSS :

 overscroll-behavior-y: contain 

Hospedaje

Netlify fue elegido como el alojamiento de PWA Nothing. Esta es una plataforma universal para proyectos web modernos. La razón por la que decidí alojar mi aplicación en Netlify es porque todo es muy fácil de configurar aquí. Además, todo esto es gratis.


Panel de control de Netlify

Para implementar un proyecto en Netlify, puede usar uno de los tres métodos. Estamos hablando de herramientas de línea de comandos, de implementación manual y de implementación continua.

▍ Herramientas de línea de comandos de Netlify

Esta es una forma clásica de implementar proyectos web. Para usarlo, debe instalar la CLI de Netlify, iniciar sesión en su cuenta, inicializar el proyecto e implementarlo. Se ve así:

 > brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy 

▍ Despliegue manual

Este método es quizás el más fácil, la implementación de la aplicación se realiza con unos pocos movimientos del mouse.


Despliegue manual

Esta característica me gustó tanto que me gustaría que algo así apareciera en Firebase. De hecho, la implementación de un proyecto se reduce a arrastrar y soltar su carpeta en una página web.

▍ Despliegue continuo

Ahora uso este método en particular. Después de vincular mi repositorio de GitHub a Netlify, cuando envío el código allí, Netlify construye e implementa automáticamente el proyecto. Magia, no de otra manera.

▍HTTPS

Dado que los PWA deben servirse a través de HTTPS desde una fuente segura, necesitaba asegurarme de que HTTPS estaba habilitado en mi sitio. Es cierto que no tuve que hacer mucho esfuerzo en esta área, ya que Netlify proporciona HTTPS gratis para todos los dominios, incluidos sus propios dominios de usuario.


Https

Además, desde el panel de control de Netlify puede habilitar la transición forzada a HTTPS ( HSTS ). Esto proporcionará protección continua para el sitio.

Análisis de proyecto con faro

Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Con su ayuda, puede analizar cualquier página, pública o que requiera autenticación. Entre otras cosas, le permite analizar el rendimiento y la accesibilidad de las páginas, explorar aplicaciones web progresivas.


Faro

Mi aplicación logró obtener 97 puntos en términos de rendimiento y 100 puntos en otros indicadores. Aquí está el informe completo.

Resumen

Como puede ver, una aplicación web progresiva que no hace nada resulta ser mucho más pequeña que una aplicación de Android con una funcionalidad igualmente rica. Aquí puedes experimentar PWA Nothing. Y aquí puedes encontrar su código fuente.

Estimados lectores! ¿Qué crees que aplicaciones de Android te gustaría recrear en forma PWA?