PWA กับ Svelte: ภาพรวม

สองแนวทางสู่ SvelteKit PWA

SvelteKit มาพร้อมกับการรองรับ service worker แบบ first-class ในตัว — ไม่ต้องติดตั้งแพ็กเกจเพิ่มเติม เพียงวางไฟล์ที่ src/service-worker.js แล้ว SvelteKit จะ bundle และลงทะเบียนให้อัตโนมัติในขั้นตอน build ภายในไฟล์นั้น virtual module $service-worker จะให้รายการ asset ที่ build เสร็จแล้ว, ไฟล์ static, และ version string — ทุกอย่างที่คุณต้องการในการ precache แอปของคุณ

สำหรับทีมที่ต้องการ Workbox (ไลบรารี caching strategy ของ Google) พร้อมกับการสร้าง manifest อัตโนมัติและ update API ที่ครบครัน แพ็กเกจ @vite-pwa/sveltekit จะห่อ Workbox ไว้ใน Vite plugin ที่ผสานรวมกับ build pipeline ของ SvelteKit ได้อย่างลงตัว

ควรเลือกแนวทางใด?

	SW ในตัว (`$service-worker`)	`@vite-pwa/sveltekit`
ติดตั้งเพิ่ม	ไม่ต้อง	`npm i -D @vite-pwa/sveltekit`
Caching strategies	Manual (Cache API)	Workbox (stale-while-revalidate, cache-first, …)
Manifest	เขียนเอง	สร้างจาก config ของ plugin
Update API	Manual `updatefound` / `statechange`	`virtual:pwa-register` พร้อม store
เหมาะสำหรับ	เรียนรู้, แอปขนาดเล็ก	แอป production ที่ต้องการควบคุมละเอียด

โมดูลนี้ครอบคลุม ทั้งสองแนวทาง ใน 5 บทเรียน เพื่อให้คุณเลือกแนวทางที่เหมาะกับโปรเจกต์

วิธีที่ build เชื่อมทุกอย่างเข้าด้วยกัน

flowchart LR
  subgraph Build
    SK["SvelteKit build"] --> BF["build/ assets (hashed)"]
    SK --> ST["static/ files"]
    BF --> VER["version string"]
  end
  subgraph ServiceWorker["Service Worker (either path)"]
    VER --> CACHE["CACHE = cache-version"]
    BF --> ASSETS["ASSETS = [...build, ...files]"]
    ASSETS --> PRE["precache on install"]
  end
  subgraph Page
    REG["navigator.serviceWorker.register()"] --> SW["sw.js activated"]
    SW --> INT["intercepts fetch()"]
  end
  Build --> ServiceWorker
  ServiceWorker --> Page

SvelteKit build pipeline → service worker → page

สิ่งที่โมดูลนี้ครอบคลุม

ภาพรวม (หน้านี้) — สองแนวทาง PWA ใน SvelteKit และเมื่อไหร่ควรเลือกแนวทางใด
SvelteKit PWA setup — ติดตั้ง @vite-pwa/sveltekit, ตั้งค่า SvelteKitPWA() ใน vite.config.ts, และทำความเข้าใจ registerType, manifest, และ strategies
โมดูล $service-worker — สร้าง src/service-worker.js โดยใช้เฉพาะ SvelteKit built-ins: build, files, version, และ prerendered
Update flow — ตรวจจับ service worker ใหม่, แจ้งเตือนผู้ใช้ให้ reload, และความแตกต่างระหว่าง autoUpdate กับ prompt registration type
Svelte-specific patterns — online/offline store, install-prompt component, reactive update-available state, และ SSR/adapter notes