Vite  

Appearance

On this page

Vite, Rollup, PWA and Workbox cookbook ​

In this page we're going to explain how vite-plugin-pwa build the service worker.

You can download Excalidraw source diagram for the SVG images and open it in Excalidraw website.

Vite Build CLI ​

Vite build CLIVite build API prepare build - load configuration and prepare environment - prepare plugins: merge internal and user plugins (Vite will apply a small sorting algorithm)1 Rollup, build the project using this configuration - Vite creates the custom Rollup configuration3 all closeBundle hooks in build plugins have been called and awaited: - call closeBundle in vite-plugin-pwa:build plugin - TIP: if you have build plugins with enforce post and closeBundle hook using object notation, move them before vite-plugin-pwa plugin - TIP: check Rollup Build Hooks5Rollup build end9Call buildEnd hook in all build plugins7 apply build pipeline, Rollup will: - call resolve and load assets plugin hooks - call transform assets plugin hooks - call transformIndexHtml plugin hooks - call other hooks... - TIP: check Rollup Output Generation Hooks4 vite-plugin-pwa:build plugin - Rollup, try to put this plugin last in the pipeline and await all build plugins to finish before calling my closeBundle hook2 vite-plugin-pwa:build plugin - transformIndexHtml hook via Rollup api context: - inject web manifest - inject registerSW script if required - generateBundle hook via Rollup api context: - create and emit registerSW script if required vite-plugin-pwa:info plugin: - resolve and load virtual:pwa-info when required vite-plugin-pwa:main plugin: - resolve and load any virtual module when required: - virtual:pwa-register - virtual:pwa-register/<fw>4' call closeBundle in vite-plugin-pwa:build plugin6 call buildEnd in vite-plugin-pwa:build hook - if any error in buildEnd hook rethow it810 copy public/ folder content to dist/ folder

Vite config file ​

Plugin 1Plugin 2Plugin NVite internal plugins{Vite has its own internal plugins:- css, json, assets, import.meta, web worker...https://rollupjs.org/plugin-development/#output-generation-hooksRollup Generation Hookshttps://rollupjs.org/plugin-development/#build-hookshttps://github.com/vitejs/vite/discussions/13175Rollup Build HooksVite config file{vite-plugin-pwa- main plugin- info plugin- build pluginUser pluginsmain:- load, prepare and resolve pwa plugin options- prepare and expose Rollup api context- resolve and load virtual modulesinfo: virtual:pwa-info- expose pwa info using Rollup api contextbuild:- inject web manifest in html entry point- build service worker in closeBundle hookPlugin 1Plugin 2Plugin Npluginsother options: css, json, build, ssr, rollup, env, worker...

closeBundle hook ​

injectManifest strategy?injectionPoint?selfDestroying SW?YesYesYesNoNo6.3 prepare custom Vite configuration for custom sw build: - add custom plugins from injectManifestRollupOptions - exclude vite-plugin-pwa plugin if present - configure Vite to avoid cleaning and copying public folder in the custom service worker build - include process.env with NODE_ENV using mode in define options (workbox modules will use it) - configure Vite to use only inline configuration (configFile: false) - configure rollup entry to use "es" (or "iife") format to build the sw inlining dependencies6.4 the service worker is in the dist/ folder6.1generate selfDestroying SW in dist/ folder6.3 call Vite build API with custom configuration - Vite build API will apply same steps calling Rollup - since the vite-plugin-pwa plugin is not present, steps 6 and 8 will not be applied6.6call injectManifest in workbox-build module- injectionPoint refers to self.__WB_MANIFEST and it is about precaching assets when the service worker is installing- at this point, Vite still hasn't copied public/ folder files to the dist/ folder, we only have there the assets and the html entry points (when using only Vite, no meta frameworks)- since pwa icons (web manifest icons , screenshots) and favicons are on public folder, workbox will not find them in the dist/ folder, and so will be missing in the service worker precache manifest- to include pwa icons and another assets in public/ folder, vite-plugin-pwa will add them via additionalManifestEntries, calculating the hash using the files from the public/ folder: will add the corresponding url and hash as revision per asset- to specify what assets should be included, you can use includeManifestIcons and includeAssets pwa plugin options call generateSW in workbox-build module- workbox will include all required workbox plugins to build the sw- the plugins will depend on your pwa options and runtimeConfig in workbox option, for example, if you're including a runtimeCaching plugin using NetWorkFirst strategy, workbox will include the corresponding module- the workbox plugins will be included in a new assets called workbox-<hash>.js 6.5EndNocloseBundle hook (vite-plugin-pwa:build plugin)6

Released under the MIT License.

Copyright © 2021-PRESENT Anthony Fu