Sveltepress

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 function adapter(options?: AdapterOptions): Adapteradapter from '@sveltejs/adapter-static'
import { function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte'

import { const SERVICE_WORKER_PATH: stringSERVICE_WORKER_PATH } from '@sveltepress/theme-default' 

/** @type {import('@sveltejs/kit').Config} */
const 

const config: {
    extensions: string[];
    preprocess: PreprocessorGroup[];
    kit: {
        adapter: Adapter;
        files: {
            serviceWorker: string;
        };
    };
}
@type{import('@sveltejs/kit').Config}
config = {
  extensions: string[]extensions: ['.svelte', '.md'],
  preprocess: PreprocessorGroup[]preprocess: [function vitePreprocess(opts?: VitePreprocessOptions): PreprocessorGroupvitePreprocess()],
  

kit: {
    adapter: Adapter;
    files: {
        serviceWorker: string;
    };
}
kit: {
    adapter: Adapteradapter: function adapter(options?: AdapterOptions): Adapteradapter(),
    

files: {
    serviceWorker: string;
}
files: { 
      serviceWorker: stringserviceWorker: const SERVICE_WORKER_PATH: stringSERVICE_WORKER_PATH, 
    }, 
  },
}

export default 

const config: {
    extensions: string[];
    preprocess: PreprocessorGroup[];
    kit: {
        adapter: Adapter;
        files: {
            serviceWorker: string;
        };
    };
}
@type{import('@sveltejs/kit').Config}
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: stringscope: '/',
  base: stringbase: '/',
  strategies: stringstrategies: 'generateSW',
  

kit: {
    trailingSlash: string;
}
kit: {
    trailingSlash: stringtrailingSlash: 'always',
  },
  darkManifest: stringdarkManifest: '/manifest-dark.webmanifest',
  

manifest: {
    start_url: string;
    scope: string;
    name: string;
    short_name: string;
    icons: {
        src: string;
        sizes: string;
        type: string;
    }[];
    theme_color: string;
    background_color: string;
    display: string;
}
manifest: {
    start_url: stringstart_url: '/',
    scope: stringscope: '/',
    name: stringname: 'Sveltepress',
    short_name: stringshort_name: 'Sveltepress',
    

icons: {
    src: string;
    sizes: string;
    type: string;
}[]
icons: [
      {
        src: stringsrc: '/android-chrome-192x192.png',
        sizes: stringsizes: '192x192',
        type: stringtype: 'image/png',
      },
      {
        src: stringsrc: '/android-chrome-512x512.png',
        sizes: stringsizes: '512x512',
        type: stringtype: 'image/png',
      },
    ],
    theme_color: stringtheme_color: '#f2f2f2',
    background_color: stringbackground_color: '#f2f2f2',
    display: stringdisplay: 'standalone',
  },
} as any
ts
Expand code