Shell UX app with streaming and service workers

Single page application (SPA) es un patrón arquitectónico en el que el browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus ejecuta código JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar plus para actualizar la página existente cuando el usuario visita una sección diferente del sitio, en lugar de cargar una página nueva completa.

This means that the web application does not perform an actual page reload. the History API se utiliza en su lugar para navegar de un lado a otro a través del historial del usuario y manipular el contentsEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, plus de la pila del historial.

The use of this type of architecture can provide a shell application UX that's fast, reliable, and generally consumes less data when browsing.

En las aplicaciones de varias páginas (MPA), cada vez que un usuario navega a una nueva UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo plus, el navegador genera progresivamente HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las plus específico para esa página. Esto significa una actualización de página completa cada vez que visita una nueva página.

While both are equally valid models to use, you may want to bring some of the benefits of the SPA UX application shell to your existing MPA site. In this article we will discuss how you can achieve a SPA-like architecture in multi-page applications by combining partials, service workers, and streams.

Production case

DEV es una comunidad donde los desarrolladores de softwareConcepto de Software¿Qué es el Software y cuál es su función?Un Software es la parte lógica, o más bien el soporte lógico, de cualquier sistema de tipo informático. Sea un PC, un teléfono teléfono celular o inclusive una tablet, es todo aquel programa que se ejecuta en él gracias a la coordinación de la parte física, es decir, el hardware, para llevar adelante alguna tarea concretamente o un recopilatorio de plus escriben artículos, participan en debates y crean sus perfiles profesionales.

Its architecture is a multi-page application based on traditional backend templates through Ruby on Rails. His team was interested in some of the benefits of an application shell model, but did not want to undertake a major architectural change or move away from its original technology stack.

This is how your solution works:

1. First, they create partials of your home page for the header and footer (shell_top.html and shell_bottom.html) y publicarlos como fragmentos de HTML independientes con un punto final. Estos activos se agregan a la cacheUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y plus en el trabajador del servicio. install eventConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando plus (lo que comúnmente se denomina almacenamiento en caché).
2. When the service worker intercepts a navigation request, he creates a response transmitted combinando el encabezado y pie de página almacenados en caché con el contenido de la página principal que acaba de llegar desde el serverLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en plus. El cuerpo es la única parte real de la página que requiere obtener datos de la red.

The key element of this solution is the use of streams, which enables incremental creations and updates de fuentes de datos. La APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene plus Streams también proporciona una interfaz para leer o escribir fragmentos de datos asincrónicos, de los cuales solo un subconjunto puede estar disponible en la memoria en un momento dado. De esta manera, el encabezado de la página se puede representar tan pronto como se selecciona de la caché, mientras que el resto del contenido se obtiene de la red. Como resultado, la experiencia de navegación es tan rápida que los usuarios no perciben una actualización de página real, solo se actualiza el nuevo contenido (el cuerpo).

The user experienceEl término experiencia de usuario (UX) se refiere a la experiencia que un usuario tiene con un producto o servicio. En cuanto a Internet, el término se usa frecuentemente al examinar la experiencia que los usuarios disponen con una web. Esto además puede ser en referencia al uso de un dispositivo smartphone (UX smartphone). Items de la experiencia del usuario La experiencia del usuario y la usabilidad se usan frecuentemente plus resultante es similar al patrón de experiencia de usuario de shell de aplicaciones de SPA, implementado en un sitio de MPA.

Implement an application shell UX architecture in MPA with Workbox

In this section, we will cover an overview of the different parts involved in implementing an application shell UX architecture in MPA. For a more detailed post on how to implement this on a real site, see Beyond SPAs: Alternative Architectures for Your PWA.

The server

Partial

The first step is to adopt a partial HTML-based site structure. These are just modular pieces of your pages that can be reused on your site and can also be delivered as separate HTML snippets.

the partial head it can contain all the logic needed to design and render the page header. the partial navigation bar can contain the logic of the navigation bar, the partial footer the code that needs to run there, and so on.

The first time the user visits the site, your server generates a response by assembling the different parts of the page:

appConcepto de APP¿Qué es una APP?Una App es todo aquel programa que se ejecuta desde una interfaz teléfono celular, es decir, desde un móvil o una tablet. Consiste en la herramienta principal para cualquier usuario que tenga un teléfono teléfono celular, de todo el software que se mueve en tiendas digitales como Google Play Store o la App Store y que tanto se adentra en cualquier terminal moderno.Es un concepto plus.get(routes.get('index'), async (req, beef) => {
beef.write(headPartial + navbarPartial);
const tag = req.queryConcepto de Query¿Qué es una Query?Una query, en inglés, es una definición que significa pregunta. Trasladando este concepto al marketing digital y a internet, se traduce como el concepto que un usuario escribe en un buscador, véase Google, cuando desea realizar una búsqueda usando keywords o palabras clave. Es la serie de términos reales que se utilizan al momento de ir en busca de información en estos portales.Cuando un consumidor plus.tag || DEFAULT_TAG;
const data = await requestData(…);
beef.write(templates.indexUn index o índice es generalmente un directorio en un orden específico que se usa con fines de orientación. En términos de motores de búsqueda, un índice es la lista de páginas web que es emitido por el motor de búsqueda en respuesta a una solicitud de búsqueda del usuario. Información general La lista que se muestra posteriormente de introducir una solicitud de búsqueda específica se llama SERPs (Search Engine plus(tag, data.items));
beef.write(footPartial);
beef.end();
});

Using the beef (response) of the object writing methodand referencing locally stored partial templates, the answer can be transmitted immediately, without being blocked by any external data source. The browser takes this initial HTML and displays a meaningful interface and loading message right away.

The next part of the page uses API data, which involves a network request. The web app can't process anything else until it receives a response and processes it, but at least the users aren't staring at a blank screen while waiting.

The service worker

The first time a user visits a site, the page header will render faster, without having to wait for the page body. The browser still needs to go to the net to find the rest of the page.

After the first page is loaded, the service worker logs in, allowing him to get the partials for the different static parts of the page (header, navbar, footer, etc.) from the cache.

Static active precaching

The first step is to cache the partial HTML templates, so they are available immediately. With Preloaded work box you can store these files in the install service worker event and keep them updated when changes are made to the web application.

Depending on the build process, Workbox has different solutions to generate a service worker and indicate the list of files to preload, including web package and drink accessories, a generic nodejs module and a command line interface.

For a partial configuration like the one described above, the resulting service worker file should contain something similar to the following:

workbox.precaching.precacheAndRoute([
{
url: 'partials/about.html',
revision: '518747aad9d7e',
},
{
url: 'partials/foot.html',
revision: '69bf746a9ecc6',
},
]);

Transmission

Then add the service worker logic so that the cached partial HTML can be sent back to the web application immediately. This is a crucial part of being fast and reliable. Using the Streams API within our service worker makes it possible.
Workbox flows abstracts the details of how the transmission works. The package allows you to pass to the library a combination of streaming sources, both cache and runtime data that can come from the network. Workbox takes care of coordinating the individual sources and bringing them together into a single streaming response.

First, configure the strategies in Workbox to handle the different sources that will make up the broadcast response.

const cacheStrategy = workbox.strategies.cacheFirst({
cacheName: workbox.core.cacheNames.precache,
});
const apiStrategy = workbox.strategies.staleWhileRevalidate({
cacheName: API_CACHE_NAME,
plugins: [
new workbox.expiration.PluginConcepto de Plugin¿Qué es un Plugin?Un Plugin es un fragmento o componente de código hecho para ampliar las funciones de un programa o de una herramienta. En el ámbito del marketing digital, especialmente dentro del marketing de contenidos, es algo que se utiliza con mucha frecuencia dentro de entornos como WordPress, puesto que sirven al momento de contar con añadidos que hagan mucho más cómoda y completa la experiencia de plus({maxEntries: 50}),
],
});

Next, tell Workbox how to use the strategies to build a full stream response, passing a number of sources as functions to run right away:

workbox.streams.strategy([
() => cacheStrategy.makeRequest({request: '/head.html'}),
() => cacheStrategy.makeRequest({request: '/navbar.html'}),
async ({event, url}) => {
const tag = url.searchParams.get('tag') || DEFAULT_TAG;
const listResponse = await apiStrategy.makeRequest(…);
const data = await listResponse.json();
return templates.index(tag, data.items);
},
() => cacheStrategy.makeRequest({request: '/foot.html'}),
]);

• The first two sources are cached partial templates read directly from the service worker cache, so they will always be immediately available.
• The following source function fetches data from the network and processes the response in the HTML expected by the web application.
• Finally, a cached copy of the footer and closing HTML tags are passed to complete the response.

Workbox takes the result from each source and transmits it to the web application, in sequence, only lagging if the next function in the array has not yet completed. As a result, the user immediately sees the page being painted. The experience is so fast that when browsing the header stays in position without the user noticing the update of the entire page. This is very similar to the UX provided by the application shell SPA model.