About BrowserUX Inject SW Assets

BrowserUX Inject SW Assets is a Vite plugin designed to automatically inject critical resources (JS, CSS, images, fonts, etc.) into your Service Worker. It aims to improve performance, offline experience, and caching strategy without complex manual configuration.

• Source code of BrowserUX Inject SW Assets on GitHub
• BrowserUX Inject SW Assets project page
• BrowserUX Inject SW Assets documentation

Designed as a lightweight and reusable extension, BrowserUX Inject SW Assets allows your PWAs and static sites to fully leverage the power of Service Workers—without manually writing the list of assets to pre-cache. It integrates seamlessly with Vite and tools like Workbox or custom workers.

I. Why BrowserUX Inject SW Assets?

When using vite-plugin-pwa with the injectManifest strategy, the Service Worker is fully customized. This means the responsibility for declaring which files to pre-cache lies entirely with the developer.

By default, Workbox injects JavaScript, CSS, and HTML files referenced in the Vite bundle. However, static assets used only inside the HTML—such as images, fonts, or JSON files—are not included. This gap can degrade the offline experience or trigger unnecessary requests at load time.

BrowserUX Inject SW Assets was created to solve this. It automates the detection and injection of these often-overlooked files by scanning Vite’s build output and generating a ready-to-use file to import into your Service Worker. The result: a complete, reliable, and always up-to-date pre-cache list — with zero manual effort.

II. Goals

• Automatically generate a list of assets to inject into the Service Worker at each build
• Support all assets generated by Vite: JS, CSS, images, fonts, manifests, etc.
• Integrate seamlessly into an existing Service Worker (Workbox, custom, etc.)
• Avoid manual declarations or file list maintenance
• Allow configuration of include/exclude patterns
• Provide a typed, TypeScript-compatible solution

III. Key Features

1. Automatic asset detection

The plugin reads the Vite manifest (manifest.json) and collects all public files or assets eligible for pre-caching. You can filter them by extension, path, or custom rules using plugin options.

2. Direct injection into the Service Worker

The plugin generates a .js file that can be imported into your custom 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
    }
];

You can then integrate them in your Service Worker like this:

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

3. Flexible configuration

You can control exactly which files are included using include, exclude, and extensions options. You can also customize the name of the generated output file.

4. PWA & modern framework compatibility

Works seamlessly with PWA strategies, offline-first approaches, and advanced Workbox setups. Fully compatible with Vue, React, Svelte, Astro, and other modern frameworks.

IV. A stable and scalable foundation

BrowserUX Inject SW Assets is built to adapt to the needs of modern web projects. Its codebase is modular, well-documented, and ready to evolve. It allows you to stay focused on your application without worrying about manually maintaining your cache.

The project is open-source, actively maintained on GitHub, and welcomes suggestions and pull requests.

V. Conclusion

BrowserUX Inject SW Assets automates a step that’s often overlooked but essential when building performant PWAs and offline-ready sites. It ensures a clean, up-to-date, and optimized management of pre-cached resources.

If you're looking for a simple, flexible, and reliable way to automatically feed your Service Worker, try BrowserUX Inject SW Assets in your next Vite project.