import { BuildOptions, Plugin, UserConfig, ResolvedConfig, InlineConfig } from 'vite'; import { ImageAssetsInstructions, IconAsset, FaviconLink, HtmlLink, AppleSplashScreenLink, HtmlLinkPreset } from '@vite-pwa/assets-generator/api'; import { BuiltInPreset, Preset } from '@vite-pwa/assets-generator/config'; import { RollupOptions, OutputBundle, PluginContext } from 'rollup'; import { GenerateSWOptions, InjectManifestOptions, ManifestEntry, RuntimeCaching } from 'workbox-build'; interface PWAHtmlLink { id?: string; rel: 'apple-touch-startup-image' | 'apple-touch-icon' | 'icon'; href: string; media?: string; sizes?: string; type?: string; } interface ColorSchemeMeta { name: string; content: string; } interface ResolvedIconAsset { path: string; mimeType: string; buffer: Promise; age: number; lastModified: number; } interface PWAHtmlAssets { links: PWAHtmlLink[]; themeColor?: ColorSchemeMeta; } interface PWAAssetsIcons { favicon: Record, 'buffer'>>; transparent: Record, 'buffer'>>; maskable: Record, 'buffer'>>; apple: Record, 'buffer'>>; appleSplashScreen: Record, 'buffer'>>; } interface PWAAssetsGenerator { generate: () => Promise; findIconAsset: (path: string) => Promise; resolveHtmlAssets: () => PWAHtmlAssets; transformIndexHtml: (html: string) => string; injectManifestIcons: () => void; instructions: () => ImageAssetsInstructions; icons: () => PWAAssetsIcons; checkHotUpdate: (path: string) => Promise; } type InjectManifestVitePlugins = string[] | ((vitePluginIds: string[]) => string[]); type CustomInjectManifestOptions = InjectManifestOptions & { /** * Configure the format to use in the Rollup build. * * @default 'es' */ rollupFormat?: 'es' | 'iife'; /** * Configure the custom Vite build target option. * * @default Vite build target option * @since v0.18.0 */ target?: BuildOptions['target']; /** * Configure the custom Vite build minify option. * * @default Vite build minify option * @since v0.18.0 */ minify?: BuildOptions['minify']; /** * Configure the custom Vite build sourcemap option. * * @default Vite build sourcemap option * @since v0.18.0 */ sourcemap?: BuildOptions['sourcemap']; /** * Should use `process.env.NODE_ENV` to remove dead code? * * If you want to keep logs from `workbox` modules, you can set this option to `true`, * the plugin will configure `process.env.NODE_ENV` to `"development"`. * * If this option is not configured, the plugin will use `process.env.NODE_ENV`. * * @default `process.env.NODE_ENV === 'production'` * @since v0.18.0 */ enableWorkboxModulesLogs?: true; /** * `Vite` plugin ids to use on `Rollup` build. * * **WARN**: this option is for advanced usage, beware, you can break your application build. * * @deprecated use `plugins` instead */ vitePlugins?: InjectManifestVitePlugins; /** * Since `v0.15.0` you can add plugins to build your service worker. * * When using `injectManifest` there are 2 builds, your application and the service worker. * If you're using custom configuration for your service worker (for example custom plugins) you can use this option to configure the service worker build. * Both configurations cannot be shared, and so you'll need to duplicate the configuration, with the exception of `define`. * * **WARN**: this option is for advanced usage, beware, you can break your application build. * * This option will be ignored if `buildPlugins.rollup` is configured. * * @deprecated use `buildPlugins` instead */ plugins?: Plugin[]; /** * Since `v0.18.0` you can add custom Rollup and/or Vite plugins to build your service worker. * * **WARN**: don't share plugins between the application and the service worker build, you need to include new plugins for each configuration. * * If you are using `plugins` option, use this option to configure the Rollup plugins or move them to `vite` option. * * **WARN**: this option is for advanced usage, beware, you can break your application build. */ buildPlugins?: { rollup?: RollupOptions['plugins']; vite?: UserConfig['plugins']; }; /** * Since `v0.15.0` you can add custom Rollup options to build your service worker: we expose the same configuration to build a worker using Vite. */ rollupOptions?: Omit; /** * Environment options. * * @since v0.19.6 */ envOptions?: { /** * Configure Vite `envDir` option. * * @default Vite `envDir`. */ envDir?: UserConfig['envDir']; /** * Configure Vite `envPrefix` option. * * @default Vite `envPrefix`. */ envPrefix?: UserConfig['envPrefix']; }; }; interface PWAIntegration { beforeBuildServiceWorker?: (options: ResolvedVitePWAOptions) => void | Promise; closeBundleOrder?: 'pre' | 'post' | null; configureOptions?: (viteOptions: ResolvedConfig, options: Partial) => void | Promise; /** * Allow integrations to configure Vite options for custom service worker build. * * @param options Vite options for custom service worker build. * @see src/vite-build.ts module * @since v0.19.6 */ configureCustomSWViteBuild?: (options: InlineConfig) => void | Promise; } /** * PWA assets generation and injection options. */ interface PWAAssetsOptions { disabled?: boolean; /** * PWA assets generation and injection. * * By default, the plugin will search for the pwa assets generator configuration file in the root directory of your project: * - pwa-assets.config.js * - pwa-assets.config.mjs * - pwa-assets.config.cjs * - pwa-assets.config.ts * - pwa-assets.config.cts * - pwa-assets.config.mts * * If using a string path, it should be relative to the root directory of your project. * * Setting to `false` will disable config resolving. * * **WARNING**: You can use only one image in the configuration file. * * @default false * @see https://vite-pwa-org.netlify.app/assets-generator/cli.html#configurations */ config?: string | boolean; /** * Preset to use. * * If the `config` option is enabled, this option will be ignored. * * Setting this option `false` will disable PWA assets generation (if the `config` option is also disabled). * * @default 'minimal-2023' */ preset?: false | BuiltInPreset | Preset; /** * Path relative to `root` folder where to find the image to use for generating PWA assets. * * Can be also relative to any of the PWA Assets configuration files. * * If the `config` option is enabled, this option will be ignored. * * @default `public/favicon.svg` */ image?: string; /** * The preset to use for head links (favicon links). * * If the `config` option is enabled, this option will be ignored. * * @see https://vite-pwa-org.netlify.app/assets-generator/#preset-minimal-2023 * @see https://vite-pwa-org.netlify.app/assets-generator/#preset-minimal * @default '2023' */ htmlPreset?: HtmlLinkPreset; /** * Should the plugin include html head links? * * @default true */ includeHtmlHeadLinks?: boolean; /** * Should the plugin override the PWA web manifest icons' entry? * * The plugin will auto-detect the icons from the manifest, if missing, then the plugin will ignore this option and will include the icons. * * @default false */ overrideManifestIcons?: boolean; /** * Should the PWA web manifest `theme_color` be injected in the html head? * * @default true */ injectThemeColor?: boolean; /** * PWA Assets integration support. * * This option should be only used by integrations, it is not meant to be used by end users. */ integration?: { /** * The base url for the PWA assets. * * @default `vite.base` */ baseUrl?: string; /** * The public directory to resolve the image: should be an absolute path. * * @default `vite.root/vite.publicDir` */ publicDir?: string; /** * The output directory: should be an absolute path. * * @default `vite.root/vite.build.outDir` */ outDir?: string; }; } interface ResolvedPWAAssetsOptions extends Required> { integration?: PWAAssetsOptions['integration']; images: string[]; } /** * Plugin options. */ interface VitePWAOptions { /** * Build mode. * * From `v0.18.0` this option is ignored when using `injectManifest` strategy: * - the new Vite build will use the same mode as the application when using `injectManifest` strategy. * - if you don't want to minify your service worker, configure `injectManifest.minify = false` in your PWA configuration. * - if you want the sourcemap only for the service worker, configure `injectManifest.sourcemap = true` in your PWA configuration. * - if you want workbox logs in your service worker when using production build, configure `injectManifest.enableWorkboxModulesLogs = true` in your PWA configuration. * - you can use `import.meta.env.MODE` to access the Vite mode inside your service worker. * - you can use `import.meta.env.DEV` or `import.meta.env.PROD` to check if the service worker is * running on development or production (equivalent to `process.env.NODE_ENV`), * check Vite [NODE_ENV and Modes](https://vitejs.dev/guide/env-and-mode#node-env-and-modes) docs. * * @see https://vitejs.dev/guide/env-and-mode#node-env-and-modes * @default process.env.NODE_ENV or "production" */ mode?: 'development' | 'production'; /** * @default 'public' */ srcDir?: string; /** * @default 'dist' */ outDir?: string; /** * @default 'sw.js' */ filename?: string; /** * @default 'manifest.webmanifest' */ manifestFilename?: string; /** * @default 'generateSW' */ strategies?: 'generateSW' | 'injectManifest'; /** * The scope to register the Service Worker * * @default same as `base` of Vite's config */ scope?: string; /** * Inject the service worker register inlined in the index.html * * With `auto` set, depends on whether you used the `import { registerSW } from 'virtual:pwa-register'` * it will do nothing or use the `script` mode * * `inline` - inject a simple register, inlined with the generated html * * `script` - inject `