พื้นฐาน Manifest

ฟิลด์จำเป็นใน manifest

manifest ขั้นต่ำต้องมีข้อมูลเพียงพอสำหรับ browser เพื่อติดตั้งแอปและแสดงผลได้อย่างถูกต้อง ตารางด้านล่างแสดงฟิลด์ที่สำคัญที่สุด:

ฟิลด์	จำเป็น	วัตถุประสงค์
`name`	ใช่	ชื่อแอปแบบเต็มที่แสดงใน install prompt และ app launcher
`short_name`	แนะนำ	ชื่อย่อสำหรับหน้าจอที่มีพื้นที่จำกัด
`start_url`	ใช่	URL ที่แอปเปิดเมื่อเปิดจากหน้าจอหลัก
`scope`	แนะนำ	prefix URL ที่กำหนดว่าหน้าใดอยู่ “ภายใน” แอป
`id`	แนะนำ	identifier ที่คงที่ ป้องกันการติดตั้งซ้ำเมื่อ URL เปลี่ยน
`description`	แนะนำ	คำอธิบายสั้น ๆ ที่แสดงใน app store และ install UI
`lang`	แนะนำ	ภาษาหลักของเนื้อหา manifest เช่น `"en"`, `"th"`
`dir`	แนะนำ	ทิศทางข้อความ: `"ltr"`, `"rtl"` หรือ `"auto"`

ตัวอย่างครบถ้วน

{
  "name": "My Awesome PWA",
  "short_name": "AwesomePWA",
  "id": "/",
  "start_url": "/",
  "scope": "/",
  "description": "A fast, offline-capable progressive web app.",
  "lang": "en",
  "dir": "ltr",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#5A0FC8",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

รายละเอียดแต่ละฟิลด์

name vs short_name — name แสดงในกล่องโต้ตอบการติดตั้งและ splash screen ส่วน short_name ใช้บนหน้าจอหลักที่พื้นที่จำกัด (Android มักตัดที่ประมาณ 12 ตัวอักษร) หากไม่ระบุ short_name browser จะใช้ name แทน

start_url — นี่คือที่ที่แอปไปเมื่อผู้ใช้แตะ icon คุณอาจเพิ่ม query param เพื่อติดตามการติดตั้งได้ เช่น "/?source=pwa"

scope — หากผู้ใช้ไปยัง URL ที่อยู่นอก scope browser จะเปิดแท็บปกติแทนที่จะอยู่ในหน้าต่าง standalone ตั้งค่าเป็น "/" สำหรับแอปที่ใช้ origin เดียว

id — สตริงที่ระบุแอปได้อย่างไม่ซ้ำ หาก start_url เปลี่ยนในภายหลัง browser จะไม่สร้างการติดตั้งซ้ำตราบใดที่ id ยังเหมือนเดิม

lang และ dir — บอก assistive technology และระบบปฏิบัติการถึงภาษาและทิศทางข้อความสำหรับชื่อและคำอธิบายของแอป

ลองใช้งานจริง

playground ด้านล่างให้บริการ manifest ขั้นต่ำ เปิดใน StackBlitz และตรวจสอบแผง DevTools Application → Manifest เพื่อยืนยันว่าทุกฟิลด์ถูกอ่านอย่างถูกต้อง

Runs a real service worker + manifest in your browser.

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

ตัวเลือก	Benefit	Cost
กรอก field ที่จำเป็นครบตามสเปก (name, icons, start_url, display)	ผ่านเกณฑ์ installability ของทุก browser ทันที	ต้องเตรียม icon หลายขนาดและทดสอบให้ครบก่อน ship
กรอกเฉพาะ field ขั้นต่ำที่ทำให้ build ผ่าน	เริ่มต้นได้เร็ว ไม่บล็อก development	Lighthouse อาจไม่ให้ผ่านเกณฑ์ installable เต็มรูปแบบ ต้องกลับมาแก้ทีหลัง

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

ตั้ง start_url เป็น relative path ที่ไม่ resolve จาก root ทำให้เปิดแอปจาก home screen แล้วพาไปหน้าอื่นที่ไม่ตั้งใจ
ลืมใส่ short_name ทำให้ label ใต้ icon บน home screen ถูกตัดจนอ่านไม่รู้เรื่อง
ลิงก์ manifest ผิด MIME type หรือ path ทำให้ browser หา manifest.json ไม่เจอและไม่ถือว่า installable

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

Squoosh — เขียน manifest ที่ครบทุก field จำเป็นตั้งแต่ต้น ทำให้ผ่าน Lighthouse PWA checklist แบบเต็มคะแนนโดยไม่ต้องแก้ทีหลัง

Google I/O web app — ใช้ manifest.json ที่มี short_name แยกจาก name ชัดเจน เพื่อให้อ่านง่ายบน home screen ของมือถือจอเล็ก