Application Shell UX avec streaming et service workers

Obtenez une architecture de type SPA dans des applications multipages en combinant des partiels, des service Workers et des flux.

23 juin 2020
Mise à jour 20 août 2020

Il apparaît dans:
Fiabilité du réseau

Demande d'une seule page (SPA) es un patrón arquitectónico en el que el le navigateur ejecuta código JavaScript para actualizar la página existente cuando el Nom d'utilisateur visita una sección diferente del sitio, en lugar de cargar una página nueva completa.

Esto significa que la aplicación la toile no realiza una recarga de página real. los API historique se utiliza en su lugar para navegar de un lado a otro a través del historial del usuario y manipular el Contenu de la pila del historial.

L'utilisation de ce type d'architecture peut fournir un Application shell UX c'est rapide, fiable et consomme généralement moins de données lors de la navigation.

En las aplicaciones de varias páginas (MPA), cada vez que un usuario navega a una nueva URL, el navegador genera progresivamente HTML específico para esa página. Esto significa una actualización de página completa cada vez que visita una nueva página.

Bien que les deux soient des modèles tout aussi valables à utiliser, vous souhaiterez peut-être apporter certains des avantages du shell d'application SPA UX à votre site MPA existant. Dans cet article, nous verrons comment obtenir une architecture de type SPA dans des applications multipages en combinant des partiels, des service Workers et des flux.

Cas de production

DÉVELOPPEUR es una comunidad donde los desarrolladores de Logiciel escriben artículos, participan en debates y crean sus perfiles profesionales.

Son architecture est une application multipage basée sur des modèles backend traditionnels via Ruby on Rails. Son équipe était intéressée par certains des avantages d'un modèle de shell d'application, mais ne souhaitait pas entreprendre de changement architectural majeur ni s'éloigner de sa pile technologique d'origine.

Voici comment fonctionne votre solution :

1. Tout d'abord, ils créent des partiels de leur page d'accueil pour l'en-tête et le pied de page (shell_top.html y shell_bottom.html) y publicarlos como fragmentos de HTML independientes con un punto final. Estos activos se agregan a la cache en el trabajador del servicio. installer un événement (lo que comúnmente se denomina almacenamiento en caché).
2. Lorsque le service worker intercepte une requête de navigation, il crée un réponse transmise 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 serveur. El cuerpo es la única parte real de la página que requiere obtener datos de la red.

L'élément clé de cette solution est l'utilisation de courants, permettant créations et mises à jour incrémentielles de fuentes de datos. La API 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).

La expérience utilisateur resultante es similar al patrón de experiencia de usuario de shell de aplicaciones de SPA, implementado en un sitio de MPA.

Implémenter une architecture UX shell d'application dans MPA avec Workbox

Dans cette section, nous couvrirons un aperçu des différentes parties impliquées dans la mise en œuvre d'une architecture UX shell d'application dans MPA. Pour un article plus détaillé sur la façon de mettre en œuvre cela sur un site réel, voir Au-delà des SPA: architectures alternatives pour votre PWA.

Le serveur

Partiels

La première étape consiste à adopter une structure de site partiellement basée sur HTML. Ce ne sont que des éléments modulaires de vos pages qui peuvent être réutilisés sur votre site et peuvent également être livrés sous forme de fragments HTML autonomes.

Les tête partielle peut contenir toute la logique nécessaire pour styliser et afficher l'en-tête de la page. Les barre de navigation partielle peut contenir la logique de la barre de navigation, le pied de page partiel le code qui doit s'y exécuter, et ainsi de suite.

Lors de la première visite de l'utilisateur sur le site, votre serveur génère une réponse en assemblant les différentes parties de la page :

appli.get(routes.get('index'), asynchrone (req, bœuf) => {
bœuf.write(headPartial + navbarPartial);
const étiqueter = req.mettre en doute.étiqueter || DEFAULT_TAG;
const Les données = attendre requestData(…);
bœuf.write(modèles.indice(étiqueter, Les données.éléments));
bœuf.write(footPartial);
bœuf.finir();
});

En utilisant le bœuf (réponse) de l'objet méthode d'écritureet en faisant référence à des modèles partiels stockés localement, la réponse peut être transmis immédiatement, sans être bloqué par aucune source de données externe. Le navigateur prend ce HTML initial et affiche immédiatement une interface significative et un message de chargement.

La partie suivante de la page utilise des données API, ce qui implique une requête réseau. L'application Web ne peut rien traiter d'autre jusqu'à ce qu'elle reçoive une réponse et la traite, mais au moins les utilisateurs ne regardent pas un écran vide pendant qu'ils attendent.

Le travailleur des services

La première fois qu'un utilisateur visite un site, l'en-tête de la page s'affichera plus rapidement, sans avoir à attendre le corps de la page. Le navigateur doit encore accéder au réseau pour trouver le reste de la page.

Après le chargement de la première page, le service worker s'enregistre, lui permettant d'obtenir les partiels des différentes parties statiques de la page (en-tête, barre de navigation, pied de page, etc.) à partir du cache.

Mise en cache des actifs statiques

La première étape consiste à mettre en cache les modèles HTML partiels afin qu'ils soient disponibles immédiatement. Avec Boîte de travail préchargée Vous pouvez stocker ces fichiers dans le installer événement de service worker et tenez-les à jour lorsque des modifications sont mises en œuvre dans l'application Web.

En fonction du processus de build, Workbox propose différentes solutions pour générer un service worker et indiquer la liste des fichiers à précharger, notamment package web y gorgée accessoires, un module nodejs générique et un interface de ligne de commande.

Pour une configuration partielle comme celle décrite ci-dessus, le fichier de service worker résultant doit contenir quelque chose de similaire à ce qui suit :

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

Transmission

Ensuite, ajoutez une logique de service worker afin que le code HTML partiel mis en cache puisse être renvoyé immédiatement à l'application Web. C’est un élément crucial pour être rapide et fiable. En utilisant le API Streams au sein de notre travailleur de service, cela est possible.
Flux de boîtes de travail résume les détails du fonctionnement de la transmission. Le package vous permet de transmettre à la bibliothèque une combinaison de sources de streaming, à la fois des caches et des données d'exécution pouvant provenir du réseau. Workbox est chargé de coordonner les sources individuelles et de les unir en une seule réponse en streaming.

Tout d’abord, configurez des stratégies dans Workbox pour gérer les différentes sources qui constitueront la réponse en streaming.

const cacheStrategy = workbox.strategies.cacheFirst({
cacheName: workbox.core.cacheNames.precache,
});
const apiStrategy = workbox.strategies.staleWhileRevalidate({
cacheName: API_CACHE_NAME,
plugins: [
new workbox.expiration.Brancher({maxEntries: 50}),
],
});

Ensuite, indiquez à Workbox comment utiliser les stratégies pour créer une réponse de streaming complète, en transmettant une série de sources sous forme de fonctions à exécuter immédiatement :

workbox.streams.strategy([
() => cacheStrategy.makeRequest({request: '/head.html'}),
() => cacheStrategy.makeRequest({request: '/navbar.html'}),
asynchrone ({un événement, URL}) => {
const étiqueter = URL.searchParams.get('tag') || DEFAULT_TAG;
const listResponse = attendre apiStrategy.makeRequest(…);
const Les données = attendre listResponse.json();
revenir modèles.indice(étiqueter, Les données.éléments);
},
() => cacheStrategy.makeRequest({request: '/foot.html'}),
]);

• Les deux premières sources sont des modèles partiels mis en cache, lus directement à partir du cache du service worker, ils seront donc toujours disponibles immédiatement.
• La fonction source suivante récupère les données du réseau et traite la réponse dans le code HTML attendu par l'application Web.
• Enfin, une copie en cache du pied de page et des balises HTML de fermeture sont transmises pour compléter la réponse.

Workbox prend le résultat de chaque source et le transmet à l'application Web, dans l'ordre, en retardant uniquement si la fonction suivante du tableau n'est pas encore terminée. En conséquence, l’utilisateur voit immédiatement la page en train d’être peinte. L'expérience est si rapide que lors de la navigation dans l'en-tête, il reste dans sa position sans que l'utilisateur ne remarque la mise à jour de toute la page. Ceci est très similaire à l’UX fourni par le modèle SPA du shell d’application.