0Pricing
Vue Academy · บทเรียน

การตั้งค่า vite-plugin-pwa

การกำหนดค่าปลั๊กอิน ตัวเลือก manifest ไอคอน ภาพหน้าจอ โหมดการแสดงผล และขอบเขต

การตั้งค่า vite-plugin-pwa เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

PWA คืออะไร

Progressive Web App เพิ่มความสามารถในการติดตั้ง การรองรับการทำงานแบบออฟไลน์ และฟีเจอร์ที่คล้ายแอปเนทีฟให้เว็บแอปผ่าน service worker และเว็บแอปแมนนิเฟสต์ vite-plugin-pwa ช่วยทำให้การเชื่อมต่อทั้งสองส่วนเข้ากับบิลด์ Vue + Vite เป็นแบบอัตโนมัติ

ติดตั้งปลั๊กอิน

ติดตั้ง vite-plugin-pwa เป็นดีเพนเดนซีสำหรับการพัฒนา โดยปลั๊กอินนี้ใช้ Workbox อยู่เบื้องหลังเพื่อสร้าง service worker

npm install -D vite-plugin-pwa

เพิ่ม VitePWA ในปลั๊กอิน

นำเข้า VitePWA และเพิ่มลงในอาร์เรย์ปลั๊กอินของ Vite ตัวเลือกต่าง ๆ จะถูกส่งให้การเรียกฟังก์ชันเพียงครั้งเดียวของปลั๊กอิน

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [vue(), VitePWA({ /* options */ })]
});

registerType

registerType ควบคุมลักษณะการอัปเดต "autoUpdate" จะเปิดใช้งาน service worker ใหม่ทันที ส่วน "prompt" จะให้คุณถามผู้ใช้ก่อนโหลดใหม่

VitePWA({
  registerType: "autoUpdate"
});

ตัวเลือก manifest

ออบเจ็กต์ manifest จะกลายเป็นเว็บแอปแมนนิเฟสต์ ฟิลด์สำคัญคือ name, short_name, theme_color และ icons

VitePWA({
  manifest: {
    name: "My Vue App",
    short_name: "VueApp",
    theme_color: "#42b883"
  }
});

อาร์เรย์ไอคอน

เตรียมไอคอนหลายขนาดเพื่อให้ OS เลือกขนาดที่เหมาะสมสำหรับหน้าจอหลักและหน้าจอเริ่มต้น รวมไอคอนแบบ maskable เพื่อรองรับรูปทรงที่ปรับตามระบบ

manifest: {
  icons: [
    { src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
    { src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
    { src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
  ]
}

การกำหนดค่า Workbox

ตัวเลือก workbox ใช้กำหนดค่า service worker ที่สร้างขึ้น เช่น ไฟล์ที่จะเก็บไว้ล่วงหน้าและกฎการแคชขณะทำงาน

VitePWA({
  workbox: {
    globPatterns: ["**/*.{js,css,html,png,svg}"]
  }
});

injectRegister auto

injectRegister: "auto" จะแทรกโค้ดสำหรับลงทะเบียน service worker โดยอัตโนมัติ คุณจึงไม่ต้องเขียนตรรกะการลงทะเบียนด้วยตนเอง

VitePWA({
  registerType: "autoUpdate",
  injectRegister: "auto"
});

ใช้โมดูลลงทะเบียนเสมือน

สำหรับการอัปเดตที่ต้องขออนุมัติ ให้นำเข้าโมดูลเสมือน registerSW ในไฟล์เริ่มต้น และเชื่อมต่อกับฟังก์ชันเรียกกลับของโมดูล

import { registerSW } from "virtual:pwa-register";

const updateSW = registerSW({
  onNeedRefresh() { /* show update toast */ },
  onOfflineReady() { /* show ready toast */ }
});

เปิดใช้งานในการพัฒนา

ตามค่าเริ่มต้น service worker จะทำงานเฉพาะในโหมดการผลิต ให้เปิดใช้ devOptions เพื่อทดสอบการทำงานของ PWA ระหว่างการพัฒนา

VitePWA({
  devOptions: { enabled: true }
});

ตรวจสอบการติดตั้ง

หลังจากบิลด์และเปิดให้บริการแล้ว ให้เปิดแท็บ Application ใน Chrome DevTools คุณควรเห็นแมนนิเฟสต์ที่วิเคราะห์แล้ว service worker ที่กำลังทำงาน และข้อความขอให้ติดตั้งในแถบที่อยู่

ตรวจสอบอย่างรวดเร็ว

injectRegister: "auto" ทำอะไร

สรุปทบทวน

เพิ่ม VitePWA ลงในอาร์เรย์ปลั๊กอินของ Vite พร้อมด้วย registerType (autoUpdate หรือ prompt), manifest (name, short_name, theme_color และอาร์เรย์ icons) และตัวเลือก workbox ใช้ injectRegister: "auto" เพื่อลงทะเบียน service worker โดยอัตโนมัติ หรือใช้โมดูล virtual:pwa-register สำหรับการอัปเดตที่ต้องขออนุมัติ

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า vite-plugin-pwa” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า vite-plugin-pwa” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า vite-plugin-pwa”

การกำหนดค่าปลั๊กอิน ตัวเลือก manifest ไอคอน ภาพหน้าจอ โหมดการแสดงผล และขอบเขต คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่า vite-plugin-pwa” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า vite-plugin-pwa
  2. กลยุทธ์ Service Worker
  3. การรองรับออฟไลน์และการซิงค์เบื้องหลัง
  4. การแจ้งเตือนแบบพุชใน Vue PWA
← กลับไปที่ Vue Academy