การติดตั้ง vite-plugin-pwa

บทนำ

vite-plugin-pwa คือวิธีมาตรฐานในการเพิ่ม PWA support ให้กับแอป React ที่ใช้ Vite เพียง plugin call เดียวใน vite.config.ts ก็จัดการ service worker generation, manifest injection และ asset precaching ได้ครบ คุณกำหนดค่าทุกอย่างในที่เดียว แล้ว Workbox จะทำหนักให้คุณตอน build time

ติดตั้ง

npm install -D vite-plugin-pwa

การกำหนดค่าเบื้องต้น

เพิ่ม VitePWA เข้าไปใน Vite plugins array ของคุณใน vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'robots.txt'],
      manifest: {
        name: 'My React PWA',
        short_name: 'ReactPWA',
        description: 'A React PWA powered by vite-plugin-pwa',
        theme_color: '#ffffff',
        icons: [
          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
      devOptions: {
        enabled: true,
      },
    }),
  ],
})

registerType

option registerType ควบคุมว่า service worker จัดการ update อย่างไรเมื่อ deploy version ใหม่

'autoUpdate' — SW ใหม่เรียก skipWaiting และ clients.claim โดยอัตโนมัติ หน้าเว็บจะอัปเดตเงียบ ๆ ในพื้นหลังโดยไม่ต้องมีการโต้ตอบจากผู้ใช้ เหมาะเมื่อยอมรับได้ที่ content จะ stale ช่วงสั้น ๆ
'prompt' — SW ใหม่ติดตั้งแต่รอ code ในแอปของคุณต้องรับผิดชอบตรวจจับ waiting SW และแสดง UI element (เช่น ปุ่ม Reload) ให้ผู้ใช้ตัดสินใจว่าจะ refresh เมื่อใด

ค่า registerType	พฤติกรรม	เมื่อใดควรใช้
autoUpdate	อัปเดตแบบเงียบในพื้นหลัง	แอปที่ยอมรับ staleness ได้
prompt	SW ใหม่รอ; ผู้ใช้เห็นปุ่ม Reload	แอปที่ต้องการให้ผู้ใช้เห็นการอัปเดต

devOptions

devOptions: { enabled: true } เปิดใช้ service worker ใน Vite development server เพื่อให้คุณทดสอบ caching และ offline behavior ในเครื่องได้ กำหนดเป็น false หรือละเว้น field นี้ทั้งหมดใน production CI pipeline ที่คุณไม่ต้องการให้ SW ไปรบกวนการตรวจสอบ build output

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

ตัวเลือก	Benefit	Cost
autoUpdate registerType	ผู้ใช้ได้ version ใหม่อัตโนมัติโดยไม่ต้องกดอะไร	อาจ reload กลางที่ผู้ใช้กำลังทำงานอยู่ถ้าไม่จัดการ UX ดีๆ
prompt registerType	ผู้ใช้ควบคุมเองว่าจะอัปเดตเมื่อไหร่ ปลอดภัยกว่า	ต้องสร้าง UI แจ้งเตือนเองและผู้ใช้อาจเพิกเฉยจนติดเวอร์ชันเก่านาน

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

ลืมตั้ง devOptions.enabled: true แล้วสับสนว่าทำไม service worker ไม่ทำงานเลยตอน dev mode (ค่า default คือปิดไว้)
ทดสอบ PWA behavior บน npm run dev เพราะเข้าใจผิดว่าเหมือน production ทั้งที่ service worker ทำงานคนละแบบกัน ต้องทดสอบบน build จริง
ไม่ทำ UI สำหรับ needRefresh state ทำให้ผู้ใช้ไม่รู้เลยว่ามีเวอร์ชันใหม่พร้อมใช้งานอยู่

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

Vite PWA ecosystem — เป็น plugin มาตรฐานที่โปรเจกต์อย่าง Elk (Mastodon client) ใช้ทำ PWA เต็มรูปแบบบน Vite/React

VitePress sites — ใช้ vite-plugin-pwa setup เดียวกันนี้ทำให้ documentation site หลายพันเว็บกลายเป็น installable PWA ได้ง่าย