BrowserUX Inject SW Assets

A simple and effective solution to ensure full offline support in your Vite + PWA applications.

BrowserUX Inject SW Assets is a lightweight and smart Vite plugin designed to automatically inject your static files (images, JSON, etc.) into your custom service worker. It perfectly complements the injectManifest strategy from vite-plugin-pwa by making sure all files not detected by Workbox are properly precached. It provides a complete offline experience, with no complex configuration or overlooked assets.

Download v1.0.2

Plugin for Vite
See the CHANGELOG

npm install vite-plugin-inject-sw-assets

Features

- 🗂️ Automatically scans the dist/ folder at the end of the build to detect static files
- 🖼️ Automatically includes image, icon, JSON, font files, etc., based on their extension (configurable)
- 🔍 Smartly ignores files already listed in manifest.webmanifest (e.g. PWA icons)
- 🧾 Generates a sw-assets.js file ready to be imported into a custom service worker
- 🧰 Easily customizable via extensions, distDir, output, and excludeFromManifest
- 📦 Fully compatible with any Vite + PWA workflow using injectManifest
- 🚫 Prevents offline 404 errors for images or JSON files referenced in HTML
- 🎯 Automates a commonly forgotten step in custom service worker setups
- 🧼 No HTML changes required – everything is handled at build time
- 🔄 Works seamlessly with vite-plugin-pwa, in addition to __WB_MANIFEST
- 🛠️ Works with all Vite projects: React, Vue, Svelte, Vanilla, and more