PWA
Introduction
This feature integrated @vite-pwa/sveltekit
Pass pwa option to theme default to use pwa. The options are exactly the same as SvelteKit PWA Plugin Options except for darkManifest, which is the manifest path that would used for dark theme
And the svelte.config.js need to config files.serviceWorker, use the SERVICE_WORKER_PATH exported from @sveltepress/theme-default
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
package required
If you want to enable pwa.
You will need to add workbox-window as a dev dependency to your Vite project.
Example config
Take the config this site use for example:
export default {
scope : '/',
base : '/',
strategies : 'injectManifest',
kit : {
trailingSlash : 'always',
},
darkManifest : '/manifest-dark.webmanifest',
manifest : {
start_url : '/',
scope : '/',
name : 'Sveltepress',
short_name : 'Sveltepress',
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
On this page