PWA
介绍
此特性集成了 @vite-pwa/sveltekit
传递 pwa 选项给默认主题来使用 PWA，该选项与 SvelteKit PWA Plugin Options 完全一致，并新增了 darkManifest，可以用来配置夜间模式下的 manifest 文件
在 svelte.config.js 中使用从 @sveltepress/theme-default 导出的 SERVICE_WORKER_PATH 配置 files.serviceWorker
svelte.config.js
+
+
+
+
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
import { SERVICE_WORKER_PATH } from '@sveltepress/theme-default'
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions : ['.svelte', '.md'],
preprocess : [vitePreprocess ()],
kit : {
adapter : adapter (),
files : {
serviceWorker : SERVICE_WORKER_PATH ,
},
},
}
export default config ts
依赖需要
需要安装 workbox-window 来使得 PWA 功能正确工作
NPM
YARN
PNPM
BUN
npm install --save workbox-windowsh
配置示例
用此站点使用的配置来举例：
export default {
scope : '/',
base : '/',
strategies : 'generateSW',
kit : {
trailingSlash : 'always',
},
darkManifest : '/manifest-dark.webmanifest',
manifest : {
start_url : '/',
scope : '/',
name : 'Sveltepress zh-CN',
short_name : 'Sveltepress zh-CN',
icons : [
{
src : '/android-chrome-192x192.png',
sizes : '192x192',
type : 'image/png',
},
{
src : '/android-chrome-512x512.png',
sizes : '512x512',
type : 'image/png',
},
],
theme_color : '#f2f2f2',
background_color : '#f2f2f2',
display : 'standalone',
},
} as any
ts