Sveltepress

পরিচিতি

এই ফিচারটি @vite-pwa/sveltekit থেকে নেয়া।

থিম ডিফল্টে pwa পাঠিয়ে দিয়ে pwa ব্যবহার করা যাবে। অপশঙ্গুলো হুবহু SvelteKit PWA Plugin Options এর মতই, শুধু darkManifest বাদে, যা হচ্ছে ডার্ক থিমে ব্যবহারের জন্য manifest path

এবং svelte.config.js -এ files.serviceWorker কনফিগ করতে হবে, SERVICE_WORKER_PATH ব্যবহার করুন যা @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
প্যাকেজ আবশ্যক

যদি আপনি pwa চালু করতে চান। আপনার Vite project এ dev dependency হিসেবে workbox-window যুক্ত করতে হবে

Precache (versions & i18n)

ডিফল্টভাবে Sveltepress শুধু app shell এবং homepage HTML precache করে। Shell হলো SvelteKit-এর entry মডিউল, hashed CSS / fonts, এবং root icon — প্রতি-রুট _app/immutable/nodes বা shared chunk নয়। বাকি ডকুমেন্টেশন পেজ এবং সেই hashed মডিউল ইউজার ভিজিট করলে runtime-এ cache হয় (পেজ: NetworkFirst, সর্বোচ্চ 50টি এন্ট্রি; hashed client ফাইল: CacheFirst, সর্বোচ্চ 400টি / 30 দিন)। ছবি এবং SvelteKit __data.jsonও runtime cache হয়।

অনেক পেজ, version এবং locale থাকলে এটি service worker install/update দ্রুত রাখে, তাই deploy-এর পর refresh prompt তাড়াতাড়ি দেখা যায়। সব prerendered HTML বা সব client মডিউল precache করলে Workbox প্রতিবার versions × locales × pages hash, compare এবং download করে।

প্রথম install-এ homepage hydration-এর জন্য নেটওয়ার্ক লাগতে পারে, যতক্ষণ না সেই hashed মডিউল runtime cache-এ যায়। একবার অনলাইনে ভিজিট করার পর ভিজিট করা পেজ (homepage সহ) runtime cache দিয়ে অফলাইনে খোলা যাবে।

pwa.precachePages

ValuePrecached HTML
false (default)শুধু homepage
trueসব prerendered HTML (historical version বাদ)
string[]Homepage + URL prefix

শুধু একটি locale এবং একটি version snapshot precache করতে:

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  

DefaultThemeOptions.pwa?: (SvelteKitPWAOptions & {
    darkManifest?: string;
    precachePages?: boolean | string[];
    precacheClient?: boolean;
}) | undefined
pwa: {
    precachePages?: boolean | string[] | undefined
Which prerendered HTML pages to put in the Workbox precache.


Default false only precaches the homepage so service-worker
install/update stays fast on sites with many versions and locales.


    

  • false: homepage only
    • 

  • true: all prerendered HTML (historical versions are still ignored)
    • 

  • string[]: URL prefixes, e.g. ['/zh/', '/v/2026-08-27/']
    • 

precachePages: ['/zh/', '/v/2026-08-27/'],
  },
})
ts

আগের “সব পেজ cache করো” আচরণ ফিরিয়ে আনতে:

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  

DefaultThemeOptions.pwa?: (SvelteKitPWAOptions & {
    darkManifest?: string;
    precachePages?: boolean | string[];
    precacheClient?: boolean;
}) | undefined
pwa: {
    precachePages?: boolean | string[] | undefined
Which prerendered HTML pages to put in the Workbox precache.


Default false only precaches the homepage so service-worker
install/update stays fast on sites with many versions and locales.


    

  • false: homepage only
    • 

  • true: all prerendered HTML (historical versions are still ignored)
    • 

  • string[]: URL prefixes, e.g. ['/zh/', '/v/2026-08-27/']
    • 

precachePages: true,
  },
})
ts

ভিজিট করা পেজ precache না থাকলেও runtime cache দিয়ে অফলাইনে খোলা যাবে।

App-shell client precache

pwa.precacheClient

ValuePrecached client files
false (default)শুধু app shell (entry + CSS / fonts + root icon)
trueসব matching client file

আগের “সব client JS/CSS মডিউল precache করো” আচরণ ফিরিয়ে আনতে:

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  

DefaultThemeOptions.pwa?: (SvelteKitPWAOptions & {
    darkManifest?: string;
    precachePages?: boolean | string[];
    precacheClient?: boolean;
}) | undefined
pwa: {
    precacheClient?: boolean | undefined
Which client files to put in the Workbox precache.


Default false only precaches the app shell (SvelteKit entry,
hashed CSS/fonts, and root icons) so service-worker install/update
stays fast on sites with many pages. Per-route nodes and chunks
are fetched on demand.


    

  • false: app shell only
    • 

  • true: every matching client file (the previous catch-all glob)
    • 

precacheClient: true,
  },
})
ts

precachePages এবং precacheClient আলাদা: HTML policy client glob বদলায় না, আবার উল্টোটাও না।

কনফিগের উদাহরণ

এই সাইটের কনফিগ উদাহরণ হিসেবে দেখুন:

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