SvelteKit PWA Setup

ตั้งค่า `@vite-pwa/sveltekit`

แพ็กเกจ @vite-pwa/sveltekit ห่อ Workbox ไว้ใน Vite plugin ที่เชื่อมกับ build pipeline ของ SvelteKit โดย plugin ตัวนี้สร้าง service worker, ฉีด precache manifest, และสร้าง web app manifest — ทั้งหมดนี้จาก plugin call เดียว

การติดตั้ง

npm install -D @vite-pwa/sveltekit

เพิ่ม plugin ใน `vite.config.ts`

เปิด (หรือสร้าง) vite.config.ts ที่ root ของโปรเจกต์ และเพิ่ม SvelteKitPWA ต่อจาก sveltekit():

import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My SvelteKit App',
        short_name: 'SK App',
        description: 'An offline-capable SvelteKit PWA',
        theme_color: '#ff3e00',
        background_color: '#ffffff',
        display: 'standalone',
        start_url: '/',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),
  ],
});

ตัวเลือกหลัก

`registerType`

ควบคุมวิธีที่ service worker จัดการกับการอัปเดต:

ค่า	พฤติกรรม
`'autoUpdate'`	SW ใหม่ activate ทันทีหลัง install — ไม่มี prompt
`'prompt'`	SW ใหม่รอ; โค้ด UI ของคุณตัดสินใจว่าจะ apply การอัปเดตเมื่อใด

สำหรับแอป production ส่วนใหญ่ 'prompt' ปลอดภัยกว่า — ป้องกันการ mismatch asset ในช่วงกลาง session

`manifest`

Plugin ฉีด manifest.webmanifest เข้าไปใน build output และเพิ่ม tag <link rel="manifest"> ไปยังทุกหน้า ฟิลด์ name, icons, และ theme_color เป็นข้อกำหนดสำหรับเกณฑ์การติดตั้งของ Chrome

`strategies`

ค่า default คือ 'generateSW' — plugin สร้าง service worker ที่ขับเคลื่อนด้วย Workbox ให้โดยอัตโนมัติ เปลี่ยนเป็น 'injectManifest' เมื่อคุณต้องการเขียน SW logic เองและต้องการให้ Workbox ฉีดเฉพาะ precache list:

SvelteKitPWA({
  strategies: 'injectManifest',
  srcDir: './src',
  filename: 'my-sw.ts',
  injectManifest: {
    injectionPoint: 'self.__WB_MANIFEST',
    globPatterns: ['client/**/*.{js,css,ico,png,svg,webp}'],
  },
})

ไฟล์ SW ของคุณต้องมี injection point self.__WB_MANIFEST — Workbox จะแทนที่ด้วย precache list ที่สร้างขึ้นในขั้นตอน build

ไฟล์ manifest แบบ static

หากคุณต้องการไฟล์ static แทนการสร้างอัตโนมัติ ให้วาง manifest.webmanifest ไว้ในไดเรกทอรี static/ และข้ามตัวเลือก manifest ใน plugin SvelteKit จะคัดลอกทุกอย่างใน static/ ไปยัง build output โดยตรง

{
  "name": "My SvelteKit App",
  "short_name": "SK App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ff3e00",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/pwa-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/pwa-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
ใช้ `@vite-pwa/sveltekit`	ตั้งค่า manifest+service worker ให้พร้อมใช้ในคำสั่งเดียว เข้ากับ adapter ของ SvelteKit	ผูกกับ ecosystem เฉพาะ ต้องตามอัปเดต plugin แยกจาก SvelteKit เอง
เขียน setup เองแบบผสม `$service-worker` module ตรงๆ	ควบคุมทุกรายละเอียดโดยไม่ผ่าน plugin	ต้อง integrate กับ adapter (static/node/vercel) เองทั้งหมด เพิ่ม edge case

ข้อผิดพลาดที่พบบ่อย

ตั้งค่า plugin โดยไม่เช็คว่า adapter ที่ใช้อยู่ (adapter-static, adapter-node ฯลฯ) รองรับ service worker แบบที่ต้องการหรือไม่
ลืมเปิด devOptions.enabled: true แล้วสับสนว่าทำไม service worker ไม่ register ตอน dev
ไม่ทดสอบบน production build (vite build && vite preview) ทำให้พลาด bug ที่เกิดเฉพาะตอน build จริงเท่านั้น

💡 ตัวอย่างจากของจริง

Vite PWA ecosystem — @vite-pwa/sveltekit เป็นส่วนหนึ่งของ ecosystem เดียวกับ Elk (Mastodon client) ที่พอร์ตแนวคิดเดียวกันมาใช้กับ SvelteKit

SvelteKit community starter templates — หลายเทมเพลตใช้ plugin นี้เป็นจุดเริ่มต้นมาตรฐานสำหรับทำ SvelteKit PWA