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 {  } from '@sveltejs/vite-plugin-svelte'
import  from '@sveltejs/adapter-static'

import {  } from '@sveltepress/theme-default' 

/** @type {import('@sveltejs/kit').Config} */
const  = {
  : ['.svelte', '.md'],
  : [()],
  : {
    : (),
    : { 
      : , 
    }, 
  },
}

export default
ts
依赖需要

需要安装 workbox-window 来使得 PWA 功能正确工作

npm install --save workbox-window
sh

配置示例

用此站点使用的配置来举例：

export default {
  : '/',
  : '/',
  : 'injectManifest',
  : {
    : 'always',
  },
  : '/manifest-dark.webmanifest',
  : {
    : '/',
    : '/',
    : 'Sveltepress zh-CN',
    : 'Sveltepress zh-CN',
    : [
      {
        : '/android-chrome-192x192.png',
        : '192x192',
        : 'image/png',
      },
      {
        : '/android-chrome-512x512.png',
        : '512x512',
        : 'image/png',
      },
    ],
    : '#f2f2f2',
    : '#f2f2f2',
    : 'standalone',
  },
} as any
ts
在 Github 上编辑此页
最后更新于： 2024/02/24 03:37:18