PWA กับ React

เส้นทาง React PWA สมัยใหม่

กับ Vite และ React วิธีที่แนะนำในการเพิ่ม PWA support คือ vite-plugin-pwa โดย plugin ตัวนี้ครอบ Workbox ไว้เบื้องหลัง, สร้าง service worker ให้คุณตอน build time, ฉีด web app manifest เข้าไปใน HTML และเปิดเผย registration API ขนาดเล็กที่คุณสามารถเรียกใช้จาก code ในแอป Create React App ที่เป็นทางเลือกเก่า ปัจจุบันถูก deprecated แล้วและไม่ควรนำมาใช้กับโปรเจกต์ใหม่

โมดูลนี้ครอบคลุม 5 บทเรียนที่พาคุณจากโปรเจกต์ Vite + React เปล่า ไปสู่ PWA ที่ทำงานได้อย่างสมบูรณ์พร้อม update prompt และ integration patterns เฉพาะของ React

บทเรียนในโมดูลนี้

บทเรียน	หัวข้อ
1	PWA กับ React — ภาพรวม (หน้านี้)
2	การติดตั้ง vite-plugin-pwa
3	Manifest และ icon
4	Update Prompt UI
5	React Patterns สำหรับ PWA

Build, service worker, และ update flow

flowchart LR
  A["Vite Build"] --> B["dist/"]
  B --> C["SW registered"]
  C --> D["SW activated"]
  D --> E["Update check"]
  E --> F["New SW waiting"]
  F --> G["User prompted"]
  G --> H["Reload"]

Vite build, service worker, and update flow