PWA คืออะไร?

ยินดีต้อนรับสู่คอร์ส

Progressive Web App (PWA) ไม่ใช่เทคโนโลยีแยกต่างหากหรือไฟล์ประเภทใหม่ที่ต้องส่งขึ้น app store แต่เป็นเว็บไซต์ธรรมดาที่ใช้ความสามารถสมัยใหม่ของเว็บเพื่อทำงานเหมือนแอปที่ติดตั้งแล้ว มีความน่าเชื่อถือ และรวดเร็วเหมือน native app — ทั้งหมดนี้ผ่าน URL เดียว

นิยามนั้นมีสามส่วนที่ควรทำความเข้าใจ:

Installable — ผู้ใช้สามารถเพิ่มแอปลงในหน้าจอหลักหรือ taskbar ได้ browser จัดการ install prompt เอง ไม่ต้องผ่านการตรวจสอบของ app store
Offline-capable — service worker สกัดกั้น network request และสามารถส่งคืน cached response เมื่ออุปกรณ์ออฟไลน์หรือเชื่อมต่อช้า
Fast — app shell โหลดจาก cache ทันที ขณะที่ข้อมูลแบบ dynamic ถูกดึงมาในเบื้องหลัง ขจัดหน้าจอโหลดว่างเปล่า

เนื้อหาที่คอร์สนี้ครอบคลุม

คอร์สนี้พาคุณจากโฟลเดอร์ว่างเปล่าไปสู่ PWA ที่ผ่านการตรวจสอบอย่างสมบูรณ์ แต่ละหัวข้อต่อยอดจากหัวข้อก่อนหน้า:

Introduction (หัวข้อนี้) — PWA คืออะไร, ประวัติความเป็นมา, และข้อกำหนด
Web App Manifest — ทำให้ไซต์ของคุณ installable และควบคุมการแสดงผลบนหน้าจอหลัก
Service Workers — เธรดพร็อกซีที่ขับเคลื่อน caching, offline, และ background sync
Caching Strategies — เลือก cache strategy ที่เหมาะสมสำหรับ resource แต่ละประเภท
Push Notifications — ดึงผู้ใช้กลับมาแม้ browser จะปิดอยู่
Advanced APIs — Background Sync, Periodic Background Sync, และ File System Access API
Auditing & Deployment — รัน Lighthouse, แก้คะแนน, และ deploy ผ่าน HTTPS

สี่ building blocks

PWA ทุกตัวยืนอยู่บนสี่เสา ถอดเสาใดเสาหนึ่งออกแล้วแอปจะสูญเสียความสามารถหลัก:

flowchart TD
  HTTPS["HTTPS\nSecure origin — required\nfor SW registration"]
  Manifest["Web App Manifest\nJSON file — controls install\nprompt and display mode"]
  SW["Service Worker\nBackground script — caching,\noffline, push, sync"]
  Shell["App Shell\nMinimal HTML/CSS/JS\nloaded from cache instantly"]

  HTTPS --> SW
  HTTPS --> Manifest
  Manifest --> Shell
  SW --> Shell
  Shell --> PWA["Progressive Web App"]
  Manifest --> PWA
  SW --> PWA

PWA building blocks

HTTPS

Service worker สามารถสกัดกั้น network request ทุกรายการที่หน้าเว็บทำ ดังนั้น browser จะปฏิเสธ การ register service worker บน origin ที่ไม่ปลอดภัย (ทุกอย่างนอกจาก https:// หรือ localhost) HTTPS ไม่ใช่ตัวเลือก — แต่เป็นรากฐานที่ทุกอย่างยึดอยู่

Web App Manifest

ไฟล์ JSON ที่ลิงก์จาก HTML ซึ่งบอก browser ชื่อแอป, icon, สีธีม, และวิธีที่แอปควรแสดงผลเมื่อเปิดจากหน้าจอหลัก หากไม่มี manifest ที่ถูกต้อง browser จะไม่แสดง install prompt

{
  "name": "My PWA",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#5A0FC8",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Service Worker

ไฟล์ JavaScript ที่รันใน background thread แยกจากหน้าเว็บของคุณ ทำหน้าที่เป็น network proxy ที่ตั้งโปรแกรมได้ — สกัดกั้น fetch request, ตอบสนองจาก cache, และเปิดใช้งาน push notification และ background sync บทเรียนในส่วน Service Workers จะครอบคลุมเรื่องนี้อย่างละเอียด

App Shell

HTML, CSS, และ JavaScript ขั้นต่ำที่จำเป็นต้องใช้สำหรับ render โครงร่าง UI — headers, navigation, และ layout — ก่อนที่ข้อมูลจะโหลด เมื่อ app shell ถูก cache โดย service worker โครงร่างจะปรากฏทันทีในการเยี่ยมชมซ้ำ แม้แต่ขณะออฟไลน์