digitalDot diseño webLogo Diseño Web digitalDot

Configurando Progressive Web App en Joomla

04/09/2018

Configuración progressive. digitalDotLas Progressive Web APPs (PWA) son una nueva tecnología en el mundo de las aplicaciones móviles. De momento solo está implementada en navegadores Chrome y para sistemas operativos Android.

PWA es un proyecto que brinda la mejor usabilidad de una web con la integración de una APP, permitiendo incluir un acceso directo en la pantalla de nuestro móvil, e incluso trabajar con toda la web a través de cache y de forma Offline. Es como un híbrido que aúna características de una página web con los beneficios de una APP nativa.

¿Qué es PWA, Progressive Web APP?

El imparable uso del móvil ha dado lugar a nuevas tecnologías que permiten al usuario una mejor navegación y usabilidad, en este campo, nace la PWA que aúna lo mejor de una web y lo mejor de una app nativa.
Una de las características es la posibilidad que ofrece de trabajar sin conexión. Las PWA incluyen el almacenamiento del contenido en el caché al abrir la app por primera vez, después de esta primera visita, el contenido puede estar disponible sin necesidad de conexión.

Una Progressive Web Apps solicita al usuario que instale la aplicación en la pantalla de inicio de su dispositivo lo que supone una mayor visibilidad de marca para el negocio ya que se incorporará un icono con el logo de la empresa en la pantalla del dispositivo.

Otra de las ventajas es que al abrir una PWA online se accede siempre a la versión actualizada de la aplicación y no como en el caso de las nativas que requieren de actualizaciones por parte del usuario.

PWA en Joomla

En digitalDot realizamos integraciones de Progressive Web APP sobre cualquier web corporativa o tienda online, trabajando con los mejores gestores de contenido como WordPress, Joomla o Drupal, e incluso sobre tecnologías web de Ecommerce como son Magento, Woocomerce o Prestashop.

Ahora nos toca meternos en faena y os vamos a mostrar la última adaptación que hemos realizado de una Web sobre PWA en Joomla.

Primeramente, os dejaremos un listado de puntos imprescindibles que debemos revisar en nuestra web, recomendaciones directamente de Google: Progressive Web App Checklist

Tras el análisis encontramos una web con un 58% en puntuación PWA, por lo que revisamos la implantación y la adaptación.

Puntuación PWA de una página web en Murcia

Para activar los servicios worker necesitaremos estos 3 ficheros en el root de nuestra página web.

Ficheros root para configurar Progressive en Joomla

Una vez subido debemos añadir las etiquetas siguientes antes del fin de </head> en nuestro caso en nuestro Template se encuentra en el index.php

<meta name="viewport" content="width=Device-width, user-scalable=no" />

<meta name="theme-color" content="#000"/>

<link rel="manifest" href="manifest.json" />

Configurar Progressive en Joomla

Ahora debemos incluir nuestra llamada al pwabuilder-sw.js con la siguiente sintaxis antes de la etiqueta </body> en nuestro caso también se encontraba en el fichero de estructura del Template elegido en Joomla.

<script> if (navigator.serviceWorker.controller) { console.log('[PWA Builder] active service worker found, no need to register') } else { //Register the ServiceWorker navigator.serviceWorker.register('pwabuilder-sw.js', { scope: './' }).then(function(reg) { console.log('Service worker has been registered for scope:'+ reg.scope); }); } </script>
Configurar Joomla para Progressive Web App

Ahora descargamos la librería manup.js y la copiamos a la raíz de nuestro directorio web

Y añadimos la línea a nuestro template, también justo antes de </body>

<script src="manup.js"></script>

Al volver a pasar nuestro informe de Lighthouse Report hemos aumentando nuestro rendimiento un 4%, hemos llegado a un 100% en SEO y Posicionamiento.

Informe Lighthouse Report para web corporativa

Y obtenemos un 81% de puntuación en Progressive Web APP, ahora vamos a comprobar si tenemos reconocido el manifest.json entrando con Chrome, iniciando el modo desarrollo y usando la pestaña Aplication.

Progressive Web APP para webs de Joomla

Reparando algunos errores y dando un poco de tiempo a la implantación hemos conseguido obtener un 100% de puntuación en nuestra Progressive web APP.

Mejorar la web Joomla con Progressive Web APP

La competencia en el mundo online es brutal por lo que no vale solamente con tener una web si no que hay que tenerla al día de las nuevas tecnologías que se están imponiendo, en la mayoría de los casos, para mejorar la experiencia de los usuarios.

Si tenéis una página web o tienda online y queréis seguir estando al día os invitamos a que os pongáis en contacto con el equipo de desarrollo web de digitalDot y juntos poder seguir estando presentes en el mundo online.

crossmenuchevron-down