PWA প্লেগ্রাউন্ডে খুলুন

পরিচিতি

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

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

এবং svelte.config.js -এ files.serviceWorker কনফিগ করতে হবে, SERVICE_WORKER_PATH ব্যবহার করুন যা @sveltepress/theme-default থেকে এক্সপোর্ট করা হয়।

import  from '@sveltejs/adapter-static'
import {  } from '@sveltejs/vite-plugin-svelte'

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

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

export default 

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

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

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

({
  : {
    : ['/zh/', '/v/2026-08-27/'],
  },
})

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

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

({
  : {
    : true,
  },
})

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

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

({
  : {
    : true,
  },
})

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

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

export default {
  : '/',
  : '/',
  : 'generateSW',
  : {
    : 'always',
  },
  : '/manifest-dark.webmanifest',
  : {
    : '/',
    : '/',
    : 'Sveltepress',
    : 'Sveltepress',
    : [
      {
        : '/android-chrome-192x192.png',
        : '192x192',
        : 'image/png',
      },
      {
        : '/android-chrome-512x512.png',
        : '512x512',
        : 'image/png',
      },
    ],
    : '#f2f2f2',
    : '#f2f2f2',
    : 'standalone',
  },
} as any