Mainline est une boutique de vêtements en ligne qui propose les plus grandes marques de créateurs de mode. Cette entreprise basée au Royaume-Uni fait confiance à son équipe interne d'experts, collaborant de manière stratégique avec des partenaires clés, afin d'offrir une expérience d'achat fluide à tous. Fort d'une présence dans plus de 100 pays via sept sites Web territoriaux personnalisés et une application, Mainline continuera de veiller à ce que son offre d'e-commerce rivalise avec la concurrence.
Défi
L'objectif de Mainline Menswear était de compléter le site Web actuellement optimisé pour les mobiles avec des fonctionnalités progressives qui correspondent à sa vision du "mobile first", en se concentrant sur un design et des fonctionnalités adaptés aux mobiles, le marché des smartphones étant en pleine croissance.
Solution
L'objectif était de créer et de lancer une PWA en complément de la version d'origine adaptée aux mobiles du site Web de Mainline pour hommes, puis de comparer les statistiques avec celles de son application mobile hybride, actuellement disponible sur Android et iOS.
Une fois l'application lancée et utilisée par un petit groupe d'utilisateurs de Mainline Menswear, l'équipe a pu déterminer la différence de statistiques clés entre la PWA, l'application et le Web.
Lors de la conversion de son site Web en PWA, l'approche adoptée par Mainline consistait à s'assurer que le framework qu'elle avait choisi pour son site Web (Nuxt.js, utilisant Vue.js) serait pérenne et lui permettrait de bénéficier d'une technologie Web en rapide évolution.
Résultats
139%
de pages par session en plus dans les PWA par rapport au Web
161%
Les sessions sont plus longues dans les PWA que sur le Web.
10 %
de diminution du taux de rebond dans les PWA par rapport au Web
12,5 %
d'augmentation de la valeur moyenne de la commande dans les PWA par rapport au Web
55%
d'augmentation du taux de conversion dans les PWA par rapport au Web
243%
d'augmentation des revenus par session dans les PWA par rapport au Web
Détails techniques
Mainline Menswear utilise le framework Nuxt.js pour regrouper et afficher son site, qui est une application monopage (SPA).
Générer un fichier de service worker
Pour générer le service worker, Mainline Menswear a ajouté une configuration via une implémentation personnalisée du module Workbox nuxt/pwa.
La raison pour laquelle elle a dupliqué le module nuxt/pwa était de permettre à l'équipe d'ajouter d'autres personnalisations au fichier de service worker qu'elle n'a pas pu obtenir ou avec lesquelles elle a rencontré des problèmes lors de l'utilisation de la version standard.
L'une de ces optimisations concernait la fonctionnalité hors connexion du site, par exemple la diffusion d'une page hors connexion par défaut et la collecte de données analytiques en mode hors connexion.
Anatomie du fichier manifeste de l'application Web
L'équipe a généré un fichier manifeste avec des icônes pour différentes tailles d'icônes d'applications mobiles et d'autres informations sur l'application Web, telles que name, description et theme_color:
{
"name": "Mainline Menswear",
"short_name": "MMW",
"description": "Shop mens designer clothes with Mainline Menswear. Famous brands including Hugo Boss, Adidas, and Emporio Armani.",
"icons": [
{
"src": "/_nuxt/icons/icon_512.c2336e.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#107cbb"
}
Une fois installée, l'application Web peut être lancée depuis l'écran d'accueil sans que le navigateur ne vous perturbe. Pour ce faire, ajoutez le paramètre display dans le fichier manifeste de l'application Web:
{
"display": "standalone"
}
Enfin, l'entreprise peut désormais suivre facilement le nombre d'utilisateurs qui accèdent à son application Web depuis l'écran d'accueil en ajoutant simplement un paramètre utm_source dans le champ start_url du fichier manifeste:
{
"start_url": "/?utm_source=pwa"
}
Mise en cache de l'environnement d'exécution pour des navigations plus rapides
La mise en cache pour les applications Web est essentielle pour optimiser la vitesse des pages et offrir une meilleure expérience aux utilisateurs connus.
Pour la mise en cache sur le Web, il existe plusieurs approches différentes. L'équipe utilise une combinaison du cache HTTP et de l'API Cache pour mettre en cache les éléments côté client.
L'API Cache permet à Mainline Menswear de contrôler plus précisément les éléments mis en cache, ce qui lui permet d'appliquer des stratégies complexes à chaque type de fichier. Même si tout cela semble compliqué et difficile à configurer et à gérer, Workbox leur permet de déclarer facilement des stratégies aussi complexes et facilite la maintenance.
Mise en cache CSS et JS
Pour les fichiers CSS et JS, l'équipe a choisi de les mettre en cache et de les diffuser via le cache à l'aide de la stratégie de boîte de travail StaleWhileRevalidate. Cette stratégie leur permet de diffuser rapidement tous les fichiers CSS et JS Nuxt, ce qui augmente considérablement les performances de leur site.
Parallèlement, les fichiers sont mis à jour en arrière-plan vers la dernière version en vue de la prochaine visite:
/* sw.js */
workbox.routing.registerRoute(
/\/_nuxt\/.*(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'css_js',
}),
'GET',
);
Mise en cache des polices Google
La stratégie de mise en cache de Google Fonts dépend des deux types de fichiers suivants:
- Feuille de style contenant les déclarations
@font-face. - Les fichiers de police sous-jacents (demandés dans la feuille de style mentionnée ci-dessus)
// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
/https:\/\/fonts\.googleapis\.com\/*/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google_fonts_stylesheets',
}),
'GET',
);
// Cache the underlying font files with a cache-first strategy for 1 year.
workbox.routing.registerRoute(
/https:\/\/fonts\.gstatic\.com\/*/,
new workbox.strategies.CacheFirst({
cacheName: 'google_fonts_webfonts',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
maxEntries: 30,
}),
],
}),
'GET',
);
Mettre en cache des images
En ce qui concerne les images, Mainline Menswear a décidé d'opter pour deux stratégies. La première stratégie s'applique à toutes les images provenant de leur CDN, qui sont généralement des images de produits. Leurs pages comportent beaucoup d'images. Ils sont donc conscients de ne pas occuper trop d'espace de stockage sur l'appareil de leurs utilisateurs. Ainsi, via Workbox, l'entreprise a ajouté une stratégie qui consiste à mettre en cache les images provenant uniquement de son CDN avec un maximum de 60 images à l'aide de ExpirationPlugin.
La 61e (la plus récente) image demandée remplace la 1re (la plus ancienne) afin qu'un maximum de 60 images de produits soient mises en cache à un moment donné.
workbox.routing.registerRoute(
({ url, request }) =>
url.origin === 'https://mainline-menswear-res.cloudinary.com' &&
request.destination === 'image',
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'product_images',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache 60 images.
maxEntries: 60,
purgeOnQuotaError: true,
}),
],
}),
);
La deuxième stratégie d'images gère le reste des images demandées par l'origine. Ces images sont généralement très peu nombreuses et de petite taille sur l'ensemble de l'origine. Toutefois, par précaution, le nombre d'images mises en cache est également limité à 60.
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg|webp)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'images',
plugins: [
new workbox.expiration.ExpirationPlugin({
// Only cache 60 images.
maxEntries: 60,
purgeOnQuotaError: true,
}),
],
}),
);
Activer la fonctionnalité hors connexion
La page hors connexion est mise en pré-cache juste après l'installation et l'activation du service worker. Pour ce faire, il crée une liste de toutes les dépendances hors connexion: le fichier HTML et une icône SVG hors connexion.
const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
{ url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
{ url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];
La liste de pré-cache est ensuite transmise à Workbox, qui se charge de l'ajout des URL au cache, de la vérification de toute incohérence au niveau des révisions, de la mise à jour et de la diffusion des fichiers en pré-cache avec une stratégie CacheFirst.
workbox.precaching.precacheAndRoute(PRECACHE);
Gérer les navigations hors connexion
Une fois que le service worker est activé et que la page hors connexion est mise en pré-cache, elle est utilisée pour répondre aux requêtes de navigation hors connexion de l'utilisateur. Bien que l'application Web de Mainline Menswear soit une application Web monopage, la page hors connexion ne s'affiche qu'une fois la page actualisée, que l'utilisateur ferme et rouvre l'onglet du navigateur, ou lorsque l'application Web est lancée depuis l'écran d'accueil en mode hors connexion.
Pour ce faire, Mainline Menswear a fourni une solution de secours aux requêtes NavigationRoute ayant échoué avec la page hors connexion mise en pré-cache:
const htmlHandler = new workbox.strategies.NetworkOnly();
const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
const request = event.request;
// A NavigationRoute matches navigation requests in the browser, i.e. requests for HTML
return htmlHandler.handle({ event, request }).catch(() => caches.match(OFFLINE_HTML, {
ignoreSearch: true
}));
});
workbox.routing.registerRoute(navigationRoute);
Démonstration
Signaler les installations réussies
Outre le suivi du lancement sur l'écran d'accueil (avec "start_url": "/?utm_source=pwa" dans le fichier manifeste de l'application Web), l'application Web signale également les installations d'applications réussies en écoutant l'événement appinstalled sur window:
window.addEventListener('appinstalled', (evt) => {
ga('send', 'event', 'Install', 'Success');
});
L'ajout de fonctionnalités de PWA à votre site Web améliorera encore davantage l'expérience d'achat de vos clients. De plus, sa mise sur le marché sera plus rapide qu'une application [spécifique à la plate-forme].
Andy Hoyle, responsable du développement
Conclusion
Pour en savoir plus sur les progressive web apps et comment les créer, consultez la section Progressive web apps sur web.dev.
Pour lire d'autres études de cas sur les progressive web apps, accédez à la section dédiée aux études de cas.