À propos de BrowserUX Inject SW Assets

BrowserUX Inject SW Assets est un plugin Vite conçu pour injecter automatiquement les ressources critiques (JS, CSS, images, polices, etc.) dans votre Service Worker. Il vise à améliorer la performance, l'expérience hors-ligne et la stratégie de cache sans configuration manuelle complexe.

• Code source de BrowserUX Inject SW Assets sur Github
• Site du projet BrowserUX Inject SW Assets
• Documentation de BrowserUX Inject SW Assets

Pensé comme une extension légère et réutilisable, BrowserUX Inject SW Assets permet à vos PWA et sites statiques de profiter pleinement des capacités des Service Workers sans écrire manuellement la liste des assets à pré-cacher. Il s’intègre naturellement avec Vite et les solutions comme Workbox ou les Workers personnalisés.

I. Pourquoi BrowserUX Inject SW Assets ?

Lorsqu’on utilise vite-plugin-pwa avec la stratégie injectManifest, le Service Worker est entièrement personnalisé. Cela signifie que la responsabilité de déclarer les fichiers à précacher repose intégralement sur le développeur.

Par défaut, Workbox injecte automatiquement les fichiers JS, CSS et HTML référencés dans le bundle Vite. Mais tous les assets statiques utilisés uniquement dans le HTML, comme les images, polices, ou fichiers JSON, ne sont pas inclus dans cette liste. Ce manque peut compromettre l’expérience offline ou entraîner des requêtes inutiles au chargement.

BrowserUX Inject SW Assets est né de ce constat. Il automatise l’identification et l’injection de ces fichiers souvent oubliés, en scannant les sorties Vite et en générant un fichier prêt à être importé dans votre Service Worker. Vous bénéficiez ainsi d’un pré-cache complet, fiable et toujours à jour, sans effort manuel.

II. Objectifs

• Générer automatiquement une liste d’assets à injecter dans le Service Worker à chaque build
• Supporter toutes les ressources générées par Vite : JS, CSS, images, fonts, manifestes, etc.
• S’intégrer sans friction dans un Service Worker existant (Workbox, custom, etc.)
• Éviter toute dépendance manuelle ou maintenance des listes de fichiers
• Permettre la configuration des patterns d’inclusion/exclusion
• Fournir une solution typée et compatible TypeScript

III. Fonctionnalités clés

1. Détection automatique des assets

Le plugin lit le manifeste Vite (manifest.json) et récupère tous les fichiers publics ou éligibles au pré-cache. Il peut filtrer selon des extensions, des chemins ou des règles spécifiques, configurables via options.

2. Injection directe dans le Service Worker

Le plugin écrit dans un fichier .js destiné à être importé dans votre Service Worker :

self.__INJECTED_ASSETS__ = [
    {
        "url": "/favicon.svg",
        "revision": null
    },
    {
        "url": "/favicon-dark.svg",
        "revision": null
    },
    {
        "url": "/img/logo-browserux-inject-sw-assets-300.png",
        "revision": null
    },
    {
        "url": "/img/logo-browserux-inject-sw-assets-300-dark.png",
        "revision": null
    }
];

Cela permet ensuite de les intégrer comme suit dans le SW

precacheAndRoute([
    ...self.__WB_MANIFEST,
    ...self.__INJECTED_ASSETS__ || []
]);

3. Configuration flexible

Vous pouvez contrôler ce qui est inclus ou non avec les options include, exclude, extensions, ou encore spécifier le nom du fichier de sortie.

4. Compatibilité PWA & frameworks modernes

Fonctionne parfaitement avec les stratégies PWA, le mode offline-first, ou des intégrations Workbox avancées. Compatible avec Vue, React, Svelte, Astro, etc.

IV. Une base fiable et évolutive

BrowserUX Inject SW Assets est conçu pour s’adapter aux besoins des projets modernes. Le code est modulaire, documenté, et prêt à évoluer. Il vous permet de rester concentré sur votre application, sans vous soucier de la mise à jour manuelle de votre cache.

Le projet est open-source, maintenu sur GitHub, et accueille volontiers les suggestions ou pull requests.

V. En conclusion

BrowserUX Inject SW Assets automatise une étape souvent négligée mais cruciale dans le développement de PWA et de sites performants. Il assure une gestion propre, à jour et optimisée des ressources à précacher.

Si vous cherchez un moyen simple, flexible et fiable d’alimenter automatiquement votre Service Worker, testez BrowserUX Inject SW Assets dans vos projets Vite.