Todo sobre las aplicaciones web progresivas y su implementación en Drupal 9

Publicado: 2020-10-20

Internet se construyó por primera vez con el propósito de mejorar la comunicación para los militares y los científicos durante la década de 1960. Pronto, la Web se transformó en un fenómeno revolucionario alrededor de la década de 1990 y ha sido imparable desde entonces. Aunque el propósito de la web siguió cambiando, uno de los propósitos que permaneció constante fue la conveniencia.

La necesidad de comodidad dio lugar a muchas formas innovadoras de acceder a Internet. Las aplicaciones móviles nativas y las aplicaciones web son dos de esas tecnologías que han hecho que la navegación por Internet sea fácil y conveniente. En este artículo, hablaremos sobre las aplicaciones web progresivas y cómo puede implementarlas con Drupal utilizando el módulo de aplicaciones web progresivas de Drupal. Pero antes de sumergirnos en todo eso, veamos las características de las aplicaciones nativas y web y cómo las aplicaciones web progresivas llenan los vacíos.

Características de las aplicaciones móviles nativas

Son aplicaciones específicas de la plataforma. Esto también significa que deben reconstruirse para cada nueva plataforma (iOS, Android).
Necesita ser descargado.
Suele ser superrápido.
Rico en características y funcionalidades.
Puede integrarse perfectamente en cualquier dispositivo y sentirse parte de él.
Puede trabajar sin conexión.
Pueden acceder fácilmente a los datos del dispositivo, al hardware del dispositivo y al sistema de archivos local.
Más caro de desarrollar, mantener y actualizar.
Están preaprobados por motivos de seguridad y se pueden descargar en las tiendas de aplicaciones.
Difícil de rastrear para los motores de búsqueda.

Características de las aplicaciones web

No depende de la plataforma. Todo lo que necesita es un navegador para acceder a ellos. Es compatible con la mayoría de los navegadores modernos. No es necesario descargarlo.
No hay un SDK en particular para desarrollarlos. El frontend se desarrolla utilizando HTML, CSS, JavaScript y una LAMP o una pila MEAN para el backend.
No es necesario actualizar. Menores costos de desarrollo y mantenimiento.
Aunque necesita autenticación, la seguridad es un problema porque puede ser vulnerable al acceso no autorizado.
No funcionan sin conexión y pueden ser más lentos que las aplicaciones móviles nativas.
No aparecen en las tiendas de aplicaciones, por lo que descubrirlas puede ser más difícil.

¿Qué son las aplicaciones web progresivas y cómo llenan el vacío?

Entonces, en resumen, las aplicaciones web nativas son altamente capaces pero carecen de alcance. Mientras que las aplicaciones web tienen un alcance más amplio pero carecen de capacidades. Y ahí es donde entran en juego las aplicaciones web progresivas para cerrar las brechas.

Progressive Web Apps es una combinación ideal de los beneficios de las aplicaciones nativas y las aplicaciones web. Usando capacidades web modernas, las aplicaciones web progresivas (PWA) pueden ofrecer experiencias similares a las de una aplicación a los usuarios. Combina las funciones que ofrecen la mayoría de los navegadores modernos con los beneficios de las experiencias móviles. Puede crear aplicaciones similares a aplicaciones nativas, extremadamente complejas e instalables. Ahora que Web Assembly es compatible con la mayoría de los navegadores, los PWA se pueden crear en los idiomas que elija el desarrollador, lo que aumenta ampliamente el alcance y la flexibilidad de las funcionalidades que puede ofrecer.

Características de las aplicaciones web progresivas

Son independientes de la plataforma y el dispositivo. Funciona a la perfección en cualquier navegador.
Se cargan rápido y son extremadamente confiables (incluso con una velocidad de Internet baja). El desplazamiento es muy suave y fluido.
También puede trabajar sin conexión.
Se pueden habilitar notificaciones push nativas similares a aplicaciones.
Puede acceder al hardware y a los datos del dispositivo como aplicaciones nativas.
Se pueden agregar accesos directos en la pantalla de inicio del usuario (en lugar de descargarlos)
Sin necesidad de instalaciones complejas. Puede compartir las URL fácilmente.
Responsive en todos los dispositivos.
Son más fáciles y rápidos de desarrollar. El mantenimiento también es sencillo.

Antes de hablar sobre el módulo PWA en Drupal, veamos los requisitos mínimos para construir una PWA:

Debe ejecutarse sobre HTTPS.
Debe incluir un trabajador de servicio: el trabajador de servicio es un script (javascript) que se ejecuta en https en el navegador y proporciona acceso al navegador. Proporciona funciones nativas similares a aplicaciones como entrega de contenido fuera de línea, notificaciones push, etc.
Debe tener un manifiesto de aplicación web, que es un archivo JSON que contiene metadatos con información sobre la aplicación web, como el nombre, la descripción, el autor y más. Esto también es útil para la optimización de motores de búsqueda.

El módulo PWA Drupal: cómo crear aplicaciones web progresivas con Drupal 9 (y 8)

El módulo Drupal PWA es fácil de instalar y viene con Service Worker (para almacenamiento en caché y otras capacidades similares a aplicaciones sin conexión) y Manifest.js que puede configurar. Sin embargo, deberá asegurarse de tener SSL instalado antes de comenzar con el proceso de instalación de PWA. Si su requisito es extremadamente específico con toneladas de personalizaciones, puede desarrollar el PWA utilizando marcos frontales como Angular o React y personalizar su propio trabajador de servicio.

Instalación del módulo PWA Drupal 9

Con Drupal 7, instalar el módulo de Drupal de la aplicación web progresiva fue tan fácil como descargar y habilitar el módulo. Puede generar el archivo manifest.js a través de un formulario de configuración y validarlo. Sin embargo, en Drupal 9, no podemos integrar esta funcionalidad directamente simplemente habilitando el módulo PWA. La razón es que no le proporciona una opción para configurar el archivo manfest.js.

Instale el módulo descargando y habilitando el módulo PWA Drupal.
Para Drupal 9, aplique este parche
Una vez hecho esto, vaya a configuración -> APLICACIÓN WEB PROGRESIVA -> Configuración de PWA y agregue la información requerida.

Trabajador del servicio

URL para almacenar en caché : aquí es donde puede especificar las páginas que necesita para que estén disponibles incluso sin conexión. Las URL mencionadas aquí se almacenarán en caché; asegúrese de vaciar la caché cada vez que realice alguna actualización aquí.
URL para excluir : si tiene páginas que absolutamente necesitan funcionar solo con Internet, menciónelas aquí.
Página sin conexión : muestre una página personalizada a sus usuarios cuando se desconecten y la página no esté almacenada en caché.

Manifest.json

El archivo manifest.json de Drupal es lo que permite a los usuarios agregar la PWA a su pantalla de inicio. Contiene configuraciones que puede modificar para cambiar cómo se comportará su PWA, como el nombre, el nombre para mostrar, el color de fondo, la orientación y más.

El archivo se agregará a la etiqueta principal de su página de índice.
<link rel = "manifest" href = "/manifest.json">

La siguiente imagen muestra la opción "Agregar a la pantalla de inicio". Cuando seleccione esa opción, se creará un icono en la pantalla de inicio.