Geekly articles weekly

PWA es fácil. Hola joomla

Continuar estudiando aplicaciones web progresivas. Después de la primera parte teórica y un ejemplo práctico simple de Hello Habr, la segunda parte, intentaremos transferir el sitio web de PWA a CMS Joomla.

El tipo de marco de servidor no es importante. El propósito de este artículo es mostrar la traducción de un sitio regular a PWA como un concepto que se aplica a sitios arbitrarios en cualquier marco.



Para comenzar, descargue e instale Joomla. Durante la instalación, indicamos que es necesario llenar el sitio con datos de demostración: seleccione la opción "Blog". Llegamos aquí a tal sitio: https://tetta.nut.cc/habr/hello-joomla/original/ . Luego copie todos los archivos del sitio en el directorio https://tetta.nut.cc/habr/hello-joomla/ , ahora tenemos dos instancias de trabajo del sitio de Joomla en la misma base de datos. Dejaremos el primero como está y el segundo lo transferiremos a la versión PWA.

El código fuente de un ejemplo de este artículo se puede ver en GitHub-e

Un poco sobre la estructura de Joomla
Joomla tiene un concepto de plantilla: un conjunto de recursos web que son responsables del nivel de presentación. Las plantillas se encuentran en el directorio / templates, nuestro estándar "listo para usar" se llama protostar.

En el caso general, después de recibir una solicitud del navegador, Joomla inicia el motor, hace lo suyo y luego transfiere la ejecución de la solicitud a /templates/protostar/index.php, que ya está generando HTML para el cliente. Este archivo es un simple archivo PHP, en el que también es posible el uso de dos directivas:

<jdoc:include type="component" /> <jdoc:include type="modules" name="position-id" style="..." />

El primero inserta en su lugar el material principal correspondiente a la URL (componente) solicitada, el segundo, los módulos prescritos por el administrador para el puesto especificado. Cualquier página en Joomla consta de un componente y módulos.

Si observa la plantilla del sitio , puede ver el bloque del material principal en la parte central de la página, y no hay módulos alrededor. El menú superior es la posición 1, la columna derecha con dos módulos "Publicaciones más antiguas" y "Publicaciones más leídas" es la posición 7, y así sucesivamente.

imagen

Joomla tiene una peculiaridad: si la solicitud GET recibida tiene un parámetro tmpl con algún valor de página, Joomla no transmite la ejecución de la solicitud a index.php al archivo de plantilla, sino a somePage.php, si corresponde. Lo usamos a continuación.


Shell de aplicación


Ahora necesitamos aislarnos del shell de la aplicación del sitio: el shell de la aplicación que se está creando. Al desarrollar un sitio PWA desde cero, puede haber diferentes estrategias para esto, pero en un sitio terminado es conveniente usar la división en sus partes estáticas y dinámicas.

La estática es algo que rara vez cambia y puede ser parte del shell de la aplicación. Por ejemplo, el menú superior de nuestro sitio puede considerarse estático: solo lo cambia el administrador y puede solicitar explícitamente la actualización del shell de la aplicación en los navegadores del cliente después de editarlo.

Al mismo tiempo, el contenido en sí, así como los módulos en la posición 7 y el módulo Breadcrumbs en la posición 2, que muestran dónde se encuentra actualmente el usuario en el sitio, son dinámicos. Deben cargarse en el navegador del cliente.

1. Cambios en el servidor


Reemplace todos los bloques dinámicos con marcador de posición. En el archivo index.php de la plantilla, cambie las directivas:
 <jdoc:include type="component" />  <div id="main-content"></div> <jdoc:include type="modules" name="position-id" style="..." />  <div id="module-id"></div>

También conectamos nuestro archivo javascript hello-joomla.js en index.php además de los scripts de plantilla.

Cree el archivo main-content.php con los siguientes contenidos:
 <jdoc:include type="component" />

Archivo Module-2.php:
 <jdoc:include type="modules" name="position-2" style="none" />

Y el archivo module-7.php:
 <jdoc:include type="modules" name="position-7" style="well" />


El significado de lo que se hizo es que cuando solicite https://tetta.nut.cc/habr/hello-joomla/index.php/5-your-modules?tmpl=module-7 solo obtendremos el código de los módulos ubicados en posición- 7) Lo mismo con el contenido.

Todos estos son cambios en la parte del "servidor" del sitio. En otros marcos, estas operaciones (destacando el shell de la aplicación) probablemente serán un poco más complicadas, pero aquí tenemos suerte.

2. Lado del cliente


En hello-joomla.js, necesitamos implementar una carga dinámica de contenido y módulos. Además, debe cambiar el comportamiento de todas las etiquetas <A> para que al hacer clic en el enlace se inicie la carga dinámica de los datos de la página. Los módulos de la columna de la derecha se cargarán una vez cuando se abra el sitio en el navegador, y las migas de pan y el contenido se cargarán cada vez que haga clic en el enlace interno.
Esto también es fácil:

hola-joomla.js
 //   url  HTML  el function loadData(el, url){ url.indexOf("?") >= 0 ? url += "&" : url += "?"; url = url + 'mode=nocache&tmpl=' + el; fetch(url) .then( function(response) { if (response.status == 200) { response.text().then(function(data) { document.getElementById(el).innerHTML = data; }); } }) .catch(); return false; } //    <a>    function handleLinks() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; ++i) { links[i].removeEventListener("click", handleLink); links[i].addEventListener("click", handleLink); } } //   function handleLink(e) { e.preventDefault(); loadData("main-content", this.href); loadData("module-2", this.href); handleLinks(); return false; } //      function DOMLoaded() { loadData("main-content", location.pathname); loadData("module-2", location.pathname); loadData("module-7", location.pathname); handleLinks(); } document.addEventListener('DOMContentLoaded', DOMLoaded, true);


En este momento, hemos rehecho nuestro sitio en un SPA completo - aplicación de una sola página - aplicación. Hay pulido a la izquierda: el enlace "Volver al principio", estilos del menú superior, formulario de búsqueda, precargador animado, etc.
Una copia del sitio en modo SPA está disponible en https://tetta.nut.cc/habr/hello-joomla/spa/ .

3. SPA -> PWA


Conectamos el manifiesto y sw.js del ejemplo anterior en index.php. Para evitar que Service Worker almacene en caché las solicitudes dinámicas, agregue "mode = nocache" a la url en hello-joomla.js en la función loadData.

Eso es todo. Se puede arreglar a la pantalla de inicio.

Conclusiones


Como puede ver, para convertir un sitio web en una aplicación PWA, no se necesitan marcos ni herramientas. Todo se hace a mano, y el código permanece limpio y claro.

En el próximo artículo, en forma de consejos útiles, funcionalmente llevaremos el sitio al nivel de lanzamiento en producción. Quedan mejoras estándar de SPA: el título de la página en el navegador, Google Analitics, la verificación de que nada valioso salió para los motores de búsqueda. Realizaremos una gestión de almacenamiento en caché conveniente para Service Worker-a para actualizar rápidamente los elementos del shell de la aplicación. Además, los editores y comentaristas del sitio desean poder insertar imágenes de Internet en los materiales del sitio, incluso a través del protocolo http.

Una de las grandes características del concepto PWA es que da vida al paradigma MVC perdido en muchos marcos de servidores y navegadores. "Ver" ahora vive en el cliente, y el navegador accede al servidor para obtener los datos , no para su presentación .

Y, a diferencia de los SPA convencionales, PWA construye esta "Vista" no con frameworks javascript pesados, sino con el viejo y rápido html + css.

Source: https://habr.com/ru/post/es419879/

More articles:


All Articles