PWA Manifest Generator: สร้าง Web App ที่ Install ได้ในไม่กี่นาที
สร้างไฟล์ manifest.json สำหรับ Progressive Web App ครบทุก field ตั้งแต่ theme color, display mode, icons ไปจนถึง shortcuts — ไม่ต้องนั่งพิมพ์เอง
เครื่องมือออนไลน์ฟรี
เครื่องมือสร้าง PWA Manifest
สร้างไฟล์ web app manifest.json สำหรับ Progressive Web App กำหนดสีธีม โหมดการแสดงผล ไอคอน ทิศทาง และอื่น ๆ
Table of Contents
Progressive Web App (PWA) กลายเป็นมาตรฐานกลางของเว็บสมัยใหม่ไปแล้ว — ผู้ใช้สามารถกด "Add to Home Screen" แล้วเปิดเว็บของคุณเหมือนแอป native ทั่วๆ ไป ไม่ต้องผ่าน App Store ไม่ต้อง build แยก แต่หัวใจสำคัญที่ทำให้ทั้งหมดนี้ทำงานได้คือไฟล์เล็กๆ ไฟล์เดียวชื่อ manifest.json
ลองใช้ PWA Manifest Generator แล้วคุณจะพบว่าไฟล์ที่ดูเหมือน JSON ธรรมดาๆ ตัวนี้ส่งผลต่อทั้งชื่อแอป สีของ status bar ไอคอนบนหน้าจอ ทิศทางการแสดงผล และแม้แต่ shortcut ที่ผู้ใช้เห็นตอน long-press ไอคอน ถ้าเขียนผิดแม้แต่ field เดียว browser ก็ไม่ยอมให้ install — และนั่นคือเหตุผลที่เราสร้างเครื่องมือนี้ขึ้นมา
บทความนี้จะพาไปดูว่า manifest.json ทำอะไรได้บ้าง ทำไมคุณควร generate แทนการนั่งเขียนเอง และวิธีใช้งาน PWA Manifest Generator แบบ step-by-step
ทำไมต้องใช้ PWA Manifest Generator?
- ลดข้อผิดพลาดจากการพิมพ์เอง — field อย่าง theme_color ต้องเป็น hex 7 ตัว, icons ต้องมี sizes และ type ครบ, short_name ต้องไม่เกิน 12 ตัวอักษร เครื่องมือนี้ validate ทุกค่าให้อัตโนมัติ
- เร็วกว่าเปิด docs — ไม่ต้องสลับ tab ไปอ่าน W3C spec, ไม่ต้องจำว่า display มีค่าอะไรบ้าง เลือก dropdown แล้วได้ JSON ที่ schema-correct ทันที
- รองรับ edge cases — maskable icon, apple-touch-icon, shortcuts, scope — ทุก field ที่ browser สมัยใหม่ต้องการ รวมอยู่ใน UI เดียว
- JSON ไม่มี comment แต่ manifest ก็ไม่ต้อง — output ที่ได้คือ valid JSON พร้อมวางใน root ของเว็บได้เลย
- ทำงานร่วมกับ Lighthouse ได้ทันที — เมื่อ manifest ผ่านเกณฑ์ "Installable Progressive Web App" audit จะขึ้นเป็นสีเขียว ทำให้ SEO และ performance score ดีขึ้น
- แชร์ config ระวมทีมได้ — copy JSON ไปวางใน PR หรือ Slack channel เพื่อให้ designer/PM ตรวจสอบ theme color ก่อน merge
ฟีเจอร์หลักของ PWA Manifest Generator
| Field | ค่าที่รองรับ | ความสำคัญ |
|---|---|---|
| name / short_name | ข้อความอิสระ | Required — ชื่อแอปที่ผู้ใช้เห็นบน Home Screen |
| start_url / scope | path เริ่มต้น | Required — จุดเริ่มต้นเมื่อเปิด PWA |
| display | fullscreen, standalone, minimal-ui, browser | Required — กำหนด chrome ของ browser |
| orientation | any, portrait, landscape | Optional — ล็อกทิศทางหน้าจอ |
| theme_color / background_color | hex color | Required — สี status bar และ splash screen |
| icons | 192px, 512px, maskable | Required — ไอคอนทุกขนาดที่ Android/iOS ต้องการ |
| shortcuts | array ของ name + url | Optional — quick action ตอน long-press ไอคอน |
| apple-touch-icon | path | Optional — สำหรับ iOS "Add to Home Screen" |
- Maskable icon toggle — Chrome บน Android ตัดขอบไอคอนเป็นวงกลม ไอคอนแบบ maskable จะมี safe zone เผื่อพื้นที่ตัด
- Live preview — เห็น JSON ที่ generate ออกมาแบบเรียลไทม์ เปลี่ยน field ปุ๊บ JSON เปลี่ยนปั๊บ
- Copy / download — copy ไปวางใน public/manifest.json หรือ download เป็นไฟล์ได้ทันที
วิธีใช้งาน PWA Manifest Generator
- เปิดเครื่องมือ — ไปที่ PWA Manifest Generator แล้วกรอก name (เช่น "My Awesome App") และ short_name (เช่น "MyApp")
- ตั้งค่า theme — เลือก theme_color (สี status bar), background_color (สี splash screen), และ display mode ที่ต้องการ (แนะนำ standalone สำหรับ PWA ส่วนใหญ่)
- ใส่ icon paths — ระบุ path ของ 192x192 และ 512x512 icons ถ้ามี maskable icon ให้ติ๊ก toggle ด้วย
- เพิ่ม shortcuts (ถ้ามี) — ใส่ quick action เช่น "Dashboard" → /dashboard หรือ "New Note" → /notes/new
- Copy JSON ไปวาง — copy output ไปสร้างไฟล์ public/manifest.json แล้วเพิ่ม <link rel="manifest" href="/manifest.json"> ใน <head> ของทุกหน้า
เข้าใจ Web App Manifest Spec
Web App Manifest ถูกกำหนดโดย W3C เป็น JSON file ที่บอก browser ว่าเว็บของคุณ "ทำตัวเป็นแอป" ยังไง browser จะอ่านไฟล์นี้ตอนผู้ใช้ trigger install prompt และใช้ข้อมูลเหล่านี้สร้าง icon บน Home Screen, splash screen ตอนเปิดแอป, และ window chrome
Required fields ที่ Chrome จะปฏิเสธถ้าขาด:
- name หรือ short_name (ต้องมีอย่างน้อย 1)
- start_url
- display (ค่า default คือ browser ซึ่งไม่นับเป็น PWA)
- icons อย่างน้อย 1 อันที่มี sizes ≥ 192x192
Optional fields ที่เพิ่ม UX:
- theme_color — สี status bar บน Android, address bar บน iOS Safari 15+
- background_color — สีที่เห็นก่อน CSS โหลดเสร็จ ป้องกัน flash สีขาว
- scope — จำกัด path ที่ PWA ควบคุม ถ้า user navigate ออกนอก scope จะกลับเป็น browser tab
- shortcuts — เห็นเมื่อ long-press ไอคอนบน Android และคลิกขวาบน desktop Chrome
- orientation — บังคับ portrait/landscape สำหรับเกมหรือแอปที่ออกแบบมาเฉพาะทิศทาง
หลายคนสับสนระหว่าง theme_color กับ background_color — จริงๆ คนละจุดประสงค์ ตัวแรกคือ UI accent ส่วนตัวหลังคือ splash background เลือกให้เข้ากันก็พอ
Use Case จริง
ร้านค้า E-commerce
Shop ออนไลน์ที่อยากให้ลูกค้ากดไอคอนแล้วเข้าถึง cart ได้เร็วๆ — ตั้ง display: standalone, theme_color เป็นสีแบรนด์, ใส่ shortcut "Cart" → /cart และ "Track Order" → /orders เพื่อให้ Android แสดง quick actions ตอน long-press
แอปอ่านข่าว
นิตยสารออนไลน์ที่อยากให้ผู้อ่านเปิดแอปแล้วเจอ content ทันที — display: standalone, orientation: portrait, background_color เป็นสีขาวเพื่อให้ splash screen ไม่กระตุก ใส่ shortcut "Today's Headlines" → /today
Internal SaaS Dashboard
เครื่องมือภายในที่อยากให้พนักงาน pin ไว้บน taskbar — เพิ่ม shortcuts สำหรับ "Reports", "Inbox", "Team" และตั้ง scope: "/app" เพื่อให้ logout link ออกไปทำงานใน browser ปกติ ไม่หลุดออกนอก PWA
ระบบสั่งอาหาร
ร้านอาหารที่ผู้ใช้ต้องสั่งบ่อยๆ — theme_color เป็นสีแดงส้มของแบรนด์, เพิ่ม shortcut "Order Again" → /reorder (ดึง order ล่าสุดมาให้ทันที) และ "Menu" → /menu ลด friction ของการสั่งซ้ำ
Best Practices
- ใช้ short_name ≤ 12 ตัวอักษร — Android จะ truncate ถ้ายาวเกิน และ iOS แสดงผลแย่ลงเมื่อ icon label ยาวเกินไป
- Maskable icon ต้องมี safe zone 80% — ใช้ Maskable.app preview ดูว่าไอคอนถูกตัดขอบแล้วยังอ่านออก
- Cache manifest ด้วย service worker — ไม่งั้นผู้ใช้ install แล้วได้เวอร์ชันเก่า ใช้ workbox หรือ sw-precache จัดการ versioning
- Test บนเครื่องจริง — Chrome DevTools > Application > Manifest แสดงข้อผิดพลาดทั้งหมด แต่ install flow จริงต้องทดสอบบน Android เพราะ iOS ยังมี quirk หลายอย่าง
- อัปเดต start_url เมื่อ refactor routing — ถ้าเปลี่ยน /home เป็น /dashboard แต่ลืมแก้ manifest, PWA เก่าที่ user install ไว้จะเปิดเข้าหน้า 404
- ใช้ absolute URL สำหรับ scope และ start_url — relative path ใช้ได้ใน Chrome แต่ Safari และ Edge บางเวอร์ชันมีปัญหา
เริ่มสร้าง PWA ของคุณวันนี้
ไม่ต้องเปิด JSON editor, ไม่ต้องจำ field, ไม่ต้อง validate เอง — เปิด PWA Manifest Generator กรอกข้อมูล 5 นาทีก็ได้ manifest.json ที่ผ่านมาตรฐาน W3C และพร้อมให้ผู้ใช้ install ลง Home Screen ได้ทันที
Related Tools You Might Like:
- Favicon Generator — สร้าง favicon ครบทุกขนาดสำหรับเบราว์เซอร์และ bookmark
- Robots.txt Generator — กำหนดว่า bot ตัวไหนเข้าถึงเว็บคุณได้บ้าง
- AssetLinks JSON Generator — สร้าง Digital Asset Links สำหรับ Android App Links
ขอให้ ship สนุกครับ!