Intro: What is a PWA?
สามเสาหลัก (capable, reliable, installable), HTTPS และ Lighthouse เริ่ม →
PWA — From Zero to Hero
คอร์ส Progressive Web App แบบ standalone ตั้งแต่ผู้เริ่มต้นจนถึงขั้นสูง เรียน manifest, service worker, caching และ offline พร้อมตัวอย่างรันได้จริงใน StackBlitz แล้วนำ PWA ไปใช้กับ React, Astro และ Svelte
สิ่งที่คุณจะได้เรียน
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียน”Web App Manifest
manifest.webmanifest, icon & maskable, display/theme, install prompt เรียน →
Service Workers
การ register, lifecycle, fetch event และการอัปเดต เจาะลึก →
Caching Strategies
Cache Storage API, cache-first/network-first, SWR, Workbox แคช →
Offline & App Shell
offline fallback, app-shell model, IndexedDB, background sync ออฟไลน์ →
Push & Advanced
Notifications, Push API, badging, share target, periodic sync เพิ่ม engagement →
PWA with React
vite-plugin-pwa, registerSW, update-prompt UI React →
PWA with Astro
@vite-pwa/astro, การตั้งค่า manifest, กลยุทธ์ SSG/SSR Astro →
PWA with Svelte
@vite-pwa/sveltekit, โมดูล $service-worker, update flow Svelte →
คอร์สนี้ทำงานยังไง
หัวข้อที่มีชื่อว่า “คอร์สนี้ทำงานยังไง”รันได้ใน StackBlitz
“Open in StackBlitz” เปิด PWA จริง — service worker + manifest ติดตั้งได้ ไม่ต้องตั้งค่าในเครื่อง
ไดอะแกรมที่อธิบายชัด
lifecycle ของ service worker, flow ของ caching และลำดับของ push เป็นไดอะแกรม Mermaid
เซสชันรายเฟรมเวิร์ก
นำทุกอย่างไปใช้จริงใน React, Astro และ Svelte ด้วยปลั๊กอิน PWA ปัจจุบัน
สองภาษา + read mode
ภาษาอังกฤษและไทย, แบบทดสอบที่บันทึกความคืบหน้า และโหมดอ่านแบบไร้สิ่งรบกวน