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

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

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
js
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

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
Suggest changes to this page
Last update at: 2023/08/10 20:32:21