Web App Manifest: ภาพรวม

Web App Manifest คืออะไร?

Web App Manifest คือไฟล์ JSON ที่บอกให้ browser รู้ว่าเว็บแอปของคุณควรมีหน้าตาและพฤติกรรมอย่างไรเมื่อถูกติดตั้งบนอุปกรณ์ ไฟล์นี้กำหนดชื่อแอป, icon, URL เริ่มต้น, display mode, สีธีม และอื่น ๆ — ข้อมูลทุกอย่างที่ระบบปฏิบัติการต้องการเพื่อปฏิบัติต่อเว็บไซต์ของคุณเหมือน application แท้จริง

manifest คือรากฐานของการติดตั้งได้ (installability) หากไม่มีไฟล์นี้ browser จะไม่แสดงข้อความเชิญให้ผู้ใช้ “เพิ่มไปยังหน้าจอหลัก” และแอปของคุณจะไม่ปรากฏใน app launcher ของอุปกรณ์

การเชื่อมโยง manifest

เพิ่มแท็ก <link> หนึ่งอันใน <head> ของทุกหน้า HTML:

<link rel="manifest" href="/manifest.webmanifest" />

นามสกุล .webmanifest คือ MIME type อย่างเป็นทางการ (application/manifest+json) คุณอาจใช้ .json ได้เช่นกัน แต่ .webmanifest เป็นที่นิยมมากกว่าเพราะสื่อความหมายได้ชัดเจนกว่าทั้งต่อ browser และเครื่องมือต่าง ๆ

วิธีที่ browser ใช้ manifest

flowchart LR
  H["HTML page"] -->|"<link rel=manifest>"| M["manifest.webmanifest"]
  M -->|"name / icons / start_url"| OS["OS / Browser Install UI"]
  OS -->|"icon + name"| HS["Home Screen"]
  OS -->|"start_url + display"| App["Standalone App Window"]

วิธีที่ manifest เชื่อม HTML กับประสบการณ์แอปที่ติดตั้งแล้ว

เนื้อหาในโมดูลนี้

โมดูลนี้พาคุณผ่านทุกส่วนของ manifest ในห้าบทเรียน:

ภาพรวม (หน้านี้) — manifest คืออะไรและวิธีเชื่อมโยง
พื้นฐาน manifest — ฟิลด์จำเป็นที่ทุก manifest ต้องมี
Icons และ maskable icons — การเตรียม icon สำหรับทุกแพลตฟอร์มและกฎ safe zone
Display และ theme — การควบคุมหน้าตาหน้าต่างแอปหลังการติดตั้ง
Install prompt — การดักจับ install event ของ browser และสร้างปุ่มติดตั้งของคุณเอง