Mainline est un marchand de vêtements en ligne qui propose les plus grandes marques de créateurs de la mode. L'entreprise britannique fait confiance à son équipe d'experts internes, mélangée stratégiquement à des partenaires clés, afin d'offrir une expérience d'achat fluide à tous. Présence sur le marché dans plus de 100 pays via sept sites Web territoriaux personnalisés et une application, Mainline continuera à s'assurer que son offre d'e-commerce rivalise avec la concurrence.
Défi
L'objectif de Mainline Menswear était de compléter le site Web actuel optimisé pour les mobiles avec des fonctionnalités progressives conformes à sa vision "priorité au mobile", en se concentrant sur la conception et les fonctionnalités adaptées aux mobiles en tenant compte du marché croissant des smartphones.
Solution
L'objectif était de créer et de lancer une PWA complétant la version mobile adaptée du site Web de Mainline Menswear, puis de comparer les statistiques à celles de son application mobile hybride, actuellement disponible sur Android et iOS.
Une fois lancée et utilisée par une petite partie des utilisateurs de Mainline Menswear, l'application a pu déterminer la différence de statistiques clés entre les PWA, les applications et le Web.
L'approche adoptée par Mainline lors de la conversion de son site Web en PWA consistait à s'assurer que le framework qu'il avait sélectionné pour son site Web (Nuxt.js, utilisant Vue.js) serait évolutif et lui permettrait de tirer parti de la technologie Web en pleine évolution.
Résultats
139 %
Plus de pages par session dans les PWA que sur le Web
161 %
Durée des sessions plus longue dans les PWA que sur le Web
10 %
de baisse du taux de rebond dans les applications Web progressives par rapport au Web
12,5%
d'augmentation du panier moyen dans les applications Web progressives par rapport au Web
55%
Taux de conversion plus élevé dans la PWA que sur le Web
243 %
Revenus par session plus élevés dans les applications Web progressives que sur le Web.
Détails techniques
Mainline Menswear utilise le framework Nuxt.js pour empaqueter 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.
Le but de ce fork du module nuxt/pwa était de permettre à l'équipe d'ajouter davantage de personnalisations au fichier du service worker qu'elle ne pouvait pas effectuer ou avec lesquelles elle rencontrait des problèmes lors de l'utilisation de la version standard.
L'une de ces optimisations concernait la fonctionnalité hors connexion du site, comme la diffusion d'une page hors connexion par défaut et la collecte d'insights hors connexion.
Anatomie du fichier manifeste de l'application Web
L'équipe a généré un fichier manifeste contenant des icônes correspondant à 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 gêne. Pour ce faire, vous devez ajouter 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 d'exécution pour une navigation plus rapide
La mise en cache pour les applications Web est indispensable pour optimiser la vitesse de chargement des pages et offrir une meilleure expérience utilisateur aux utilisateurs connus.
Pour la mise en cache sur le Web, il existe plusieurs approches différentes. L'équipe utilise un mélange 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 mieux contrôler les éléments mis en cache, ce qui lui permet d'appliquer des stratégies complexes à chaque type de fichier. Bien que tout cela semble compliqué et difficile à configurer et à gérer, Workbox leur offre un moyen simple de déclarer de telles stratégies complexes et de faciliter la maintenance.
Mise en cache du CSS et du 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 Workbox StaleWhileRevalidate. Cette stratégie lui permet de diffuser rapidement tous les fichiers CSS et JS Nuxt, ce qui améliore considérablement les performances de son site.
Dans le même temps, les fichiers sont mis à jour en arrière-plan vers la dernière version pour la prochaine visite:
/* sw.js */
workbox.routing.registerRoute(
/\/_nuxt\/.*(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'css_js',
}),
'GET',
);
Mettre en cache les polices Google
La stratégie de mise en cache de Google Fonts dépend de deux types de fichiers :
- 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',
);
Mise en cache d'images
Pour les images, Mainline Menswear a choisi 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. Ses pages sont très riches en images. Il est donc conscient de ne pas trop utiliser l'espace de stockage de l'appareil de ses utilisateurs. Par conséquent, via Workbox, ils ont ajouté une stratégie qui met en cache les images provenant uniquement de leur CDN avec un maximum de 60 images à l'aide de ExpirationPlugin.
La 61e image (la plus récente) demandée remplace la 1re image (la plus ancienne) afin que pas plus de 60 images de produit soient mises en cache à tout moment.
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'image 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 pour l'ensemble de l'origine. Toutefois, pour plus de sécurité, le nombre de ces 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,
}),
],
}),
);
Fournir des fonctionnalités hors connexion
La page hors connexion est préchargée juste après l'installation et l'activation du service worker. Pour ce faire, ils créent une liste de toutes les dépendances hors connexion : le fichier HTML hors connexion 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échargement est ensuite transmise à Workbox, qui s'occupe de toutes les tâches lourdes d'ajout des URL au cache, de vérification des différences de révision, de mise à jour et de diffusion des fichiers préchargés avec une stratégie CacheFirst.
workbox.precaching.precacheAndRoute(PRECACHE);
Gérer les navigations hors connexion
Une fois le service worker activé et la page hors connexion préchargée, il est utilisé pour répondre aux requêtes de navigation hors connexion de l'utilisateur. Bien que l'application Web de Mainline Menswear soit une SPA, la page hors connexion ne s'affiche que lorsque la page est actualisée, que l'utilisateur ferme et rouvre l'onglet du navigateur ou que l'application Web est lancée depuis l'écran d'accueil en mode hors connexion.
Pour ce faire, Mainline Menswear a fourni un remplacement aux requêtes NavigationRoute ayant échoué avec la page hors connexion préchargée :
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émo
Signaler les installations réussies
En plus du suivi du lancement de 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');
});
Ajouter des fonctionnalités PWA à votre site Web améliorera encore l'expérience d'achat de vos clients et vous permettra de commercialiser votre application plus rapidement 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 sur leur création, 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 "Études de cas".