Vite  

Appearance

Vite, Rollup, PWA and Workbox cookbook ​

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

You can open Excalidraw source diagram for the SVG images.

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...

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 rethrow it810 copy public/ folder content to dist/ folder

vite-plugin-pwa closeBundle hook ​

injectManifest strategy?injectionPoint?selfDestroying SW?YesYesYesNoNo6.2 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.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 to the sw precache manifest 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 optionsEndNocloseBundle hook (vite-plugin-pwa:build plugin)66.4 the service worker is in the dist/ foldercall 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.5

workbox-build injectManifest ​

6.66.6.16.6.26.6.36.6.46.6.5injectManifest (workbox-build module)create precache manifest entries array- use globDirectory option (Vite build.outDir, by default dist/) to find sw precache file entries- list files in globDirectory folder and apply globPatterns and globIgnores- include each entry in previous list in the array: - each entry will have an url and a revision - the url will be relative to the sw scope (can also apply some transformation if present, for example templatedURLs) - the revision will be the hash of the fileinclude in manifest entries array additionalManifestEntries if present- vite-pwa-plugin will use additionalManifestEntries to add entries in public/ for pwa icons for examplecall all manifestTransform callbacks with the manifest entries array- you can add or remove entries- you can transform url entries: for example, in meta frameworks like Astro or SvelteKit we can handle trailing slash heretransform the service worker source to include precache manifest entries- given the sw file (swSrc in pwa options), replace self.__WB_MANIFEST (or custom injectionPoint name) with serialized precache manifest entriessave transformed service worker to disk- save changes to the sw file (will use swDest in pwa options)- when using injectManifest strategy, vite-plugin-pwa will take care to configure properly swDest from pwa options

Released under the MIT License.

Copyright © 2021-PRESENT Anthony Fu