Display และ Theme

การควบคุมหน้าตาแอปหลังการติดตั้ง

เมื่อผู้ใช้ติดตั้ง PWA ของคุณแล้ว ฟิลด์ใน manifest ที่กล่าวถึงในบทเรียนนี้จะกำหนดว่าแอปดูเหมือน application แท้จริงหรือยังคงแสดง UI ของ browser และวิธีที่แอปผสานกับ OS ในระดับภาพ

`display`

ฟิลด์ display ตั้งค่า display mode ที่ต้องการสำหรับหน้าต่างแอป:

ค่า	UI browser	กรณีใช้งาน
`standalone`	ไม่มีแถบที่อยู่, มี OS chrome น้อยที่สุด	แอปส่วนใหญ่ — รู้สึกเหมือนแอปแท้จริง
`fullscreen`	ไม่มี UI browser เลย	เกม, ประสบการณ์แบบดื่มด่ำ
`minimal-ui`	มีเพียงปุ่มย้อนกลับ/ไปข้างหน้า/โหลดซ้ำ	ตัวดูเนื้อหา, media player
`browser`	UI browser แบบเต็ม	Fallback — เหมือนแท็บปกติ

{ "display": "standalone" }

`display_override`

display_override คือรายการลำดับความชอบ browser เลือกค่าแรกที่รองรับแล้ว fallback ไปยัง display ใช้เพื่อขอ mode ใหม่กว่าอย่าง window-controls-overlay บน browser ที่รองรับ:

{
  "display": "standalone",
  "display_override": ["window-controls-overlay", "standalone"]
}

`theme_color` และ `background_color`

theme_color ทาสีแถบเครื่องมือของ browser และไทล์ task switcher บน Android ตั้งค่าเป็นสีหลักของแบรนด์ คุณสามารถตั้งค่าต่อหน้าด้วย <meta name="theme-color"> ได้ — meta tag จะ override manifest สำหรับหน้านั้น

background_color คือสีที่แสดงระหว่าง splash screen (ช่วงสั้น ๆ ระหว่างการแตะ icon กับการแสดงผลครั้งแรกของแอป) ตั้งค่าให้ตรงกับ background ของแอปเพื่อให้การเปลี่ยนผ่านราบรื่น

{
  "theme_color": "#5A0FC8",
  "background_color": "#ffffff"
}

ขั้นตอนการตัดสินใจ display mode

flowchart TD
  A["Browser reads display_override list"] --> B{"Supports first value?"}
  B -->|"Yes"| C["Use that display mode"]
  B -->|"No"| D{"More items in override list?"}
  D -->|"Yes"| A
  D -->|"No"| E["Fall back to display field"]
  E --> F{"display value supported?"}
  F -->|"Yes"| G["Use display value"]
  F -->|"No"| H["Use browser (default)"]

วิธีที่ browser เลือก display mode

`orientation`

orientation ล็อกการหมุนหน้าจอเมื่อ PWA กำลังทำงาน ค่าทั่วไป: "portrait", "landscape", "any", "natural" ละเว้นเพื่อให้ผู้ใช้หมุนได้อย่างอิสระ

{ "orientation": "portrait" }

`categories`

categories คืออาร์เรย์ของสตริงที่แนะนำ app directory และ OS store เกี่ยวกับประเภทของแอป ค่าทั่วไปสอดคล้องกับหมวดหมู่ Play Store: "productivity", "utilities", "games", "finance" เป็นต้น

{ "categories": ["productivity", "utilities"] }

`screenshots`

screenshots ให้รูปภาพที่แสดงใน install dialog บน browser และ OS store ที่รองรับ แต่ละรายการมี src, sizes, type และ form_factor ที่ไม่บังคับ ("narrow" สำหรับมือถือ, "wide" สำหรับเดสก์ท็อป)

{
  "screenshots": [
    {
      "src": "/screenshots/home-narrow.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Home screen on mobile"
    },
    {
      "src": "/screenshots/home-wide.png",
      "sizes": "1280x800",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Home screen on desktop"
    }
  ]
}

Chrome บนเดสก์ท็อปต้องการ screenshot อย่างน้อยหนึ่งรูปก่อนจะแสดง install dialog แบบ rich พร้อม preview panel

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

ตัวเลือก	Benefit	Cost
display: “standalone”	รู้สึกเหมือน native app เต็มตัว ไม่มี browser UI	ผู้ใช้เสีย back/forward button และ address bar ที่คุ้นเคย
display: “browser”	คงพฤติกรรม browser ปกติ ผู้ใช้งานคุ้นเคยทันที	ไม่ได้ความรู้สึก “แอป” ที่ install prompt สัญญาไว้

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

ตั้ง theme_color ใน manifest อย่างเดียว โดยไม่ตั้ง <meta name="theme-color"> คู่กัน ทำให้สีไม่ตรงกันระหว่าง browser UI กับตอนเป็น standalone
เลือก display: “fullscreen” สำหรับแอปทั่วไป ทำให้ผู้ใช้เสีย status bar และ gesture navigation จนใช้งานยาก
ไม่ทดสอบ theme บน dark mode ทำให้สี background/theme ขัดกับสีระบบของผู้ใช้

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

Spotify Web Player — ใช้ display: “standalone” คู่กับ theme_color สีดำ ให้ความรู้สึกเหมือนแอป desktop native ตั้งแต่วินาทีแรกที่เปิด

Twitter Lite — ปรับ theme_color ให้ตรงกับ brand color ทำให้ status bar กลมกลืนกับ UI ทันทีที่เปิดจาก home screen

Display และ Theme

การควบคุมหน้าตาแอปหลังการติดตั้ง

display

display_override

theme_color และ background_color