ไฟล์ Manifest ของเว็บแอป

ไฟล์ Manifest ของเว็บแอปเป็นไฟล์ที่คุณสร้างซึ่งบอกเบราว์เซอร์ว่าคุณต้องการให้เนื้อหาเว็บแสดงเป็นแอปในระบบปฏิบัติการอย่างไร ไฟล์ Manifest อาจมีข้อมูลพื้นฐาน เช่น ชื่อแอป ไอคอน และสีธีม ค่ากำหนดขั้นสูง เช่น การวางแนวและทางลัดของแอปที่ต้องการ ตลอดจนข้อมูลเมตาของแคตตาล็อก เช่น ภาพหน้าจอ

PWA แต่ละรายการควรมีไฟล์ Manifest รายการเดียวต่อแอปพลิเคชัน ซึ่งโดยปกติจะฝากไว้ในโฟลเดอร์รูท และลิงก์ไว้ในหน้า HTML ทั้งหมดที่ PWA ติดตั้งได้ ส่วนขยายอย่างเป็นทางการของไฟล์นี้คือ .webmanifest คุณจึงตั้งชื่อไฟล์ Manifest เป็น app.webmanifest ได้

การเพิ่มไฟล์ Manifest ของเว็บแอปลงใน PWA

หากต้องการสร้างไฟล์ Manifest ของเว็บแอป ให้สร้างไฟล์ข้อความที่มีออบเจ็กต์ JSON ที่มีช่อง name อย่างน้อย 1 ช่องที่มีค่าสตริงดังนี้

app.webmanifest:

{
   "name": "My First Application"
}

แต่การสร้างไฟล์อย่างเดียวนั้นไม่เพียงพอ เบราว์เซอร์จำเป็นต้องทราบว่ามีไฟล์นี้อยู่เช่นกัน

การลิงก์ไปยังไฟล์ Manifest

หากต้องการให้เบราว์เซอร์ทราบถึงไฟล์ Manifest ของเว็บแอป คุณจะต้องลิงก์ไฟล์ดังกล่าวกับ PWA โดยใช้องค์ประกอบ HTML ของ <link> และแอตทริบิวต์ rel ที่ตั้งค่าเป็น manifest ในหน้า HTML ทั้งหมดของ PWA ซึ่งคล้ายกับวิธีที่คุณลิงก์สไตล์ชีต CSS กับเอกสาร

index.html:

<html lang="en">
  <title>This is my first PWA</title>
  <link rel="manifest" href="/app.webmanifest">

การแก้ไขข้อบกพร่องของไฟล์ Manifest

คุณสามารถใช้เครื่องมือตรวจสอบใน Firefox และเครื่องมือสำหรับนักพัฒนาเว็บเพื่อให้มั่นใจว่าไฟล์ Manifest ได้รับการตั้งค่าอย่างถูกต้องในทุกเบราว์เซอร์ที่มีพื้นฐานมาจาก Chromium

สำหรับเบราว์เซอร์ Chromium

ในเครื่องมือสำหรับนักพัฒนาเว็บ

  1. ในแผงด้านซ้ายใต้ Application ให้เลือก Manifest
  2. ตรวจสอบช่องของไฟล์ Manifest ตามที่เบราว์เซอร์แยกวิเคราะห์ไว้

สำหรับ Firefox

  1. เปิดเครื่องมือตรวจสอบ
  2. ไปที่แท็บแอปพลิเคชัน
  3. เลือกตัวเลือกไฟล์ Manifest ในแผงด้านซ้าย
  4. ตรวจสอบช่องของไฟล์ Manifest ตามที่เบราว์เซอร์แยกวิเคราะห์ไว้

การออกแบบการใช้งาน PWA

เมื่อ PWA เชื่อมต่อกับไฟล์ Manifest แล้ว ก็ถึงเวลากรอกข้อมูลในช่องที่เหลือเพื่อกำหนดประสบการณ์การใช้งานให้กับผู้ใช้

ช่องพื้นฐาน

ช่องชุดแรกจะแสดงข้อมูลหลักเกี่ยวกับ PWA โดยใช้ในการสร้างไอคอนและหน้าต่างของ PWA ที่ติดตั้ง รวมถึงกำหนดวิธีการเริ่มต้น ปัจจัยต่างๆ มีดังนี้

name
ชื่อเต็มของ PWA โดยจะปรากฏพร้อมกับไอคอนในหน้าจอหลัก, Launcher, แท่นชาร์จ หรือเมนูของระบบปฏิบัติการ
short_name
ไม่บังคับ เป็นชื่อที่สั้นลงของ PWA ซึ่งใช้เมื่อมีพื้นที่ไม่เพียงพอที่จะแสดงค่าทั้งหมดของช่อง name โปรดจำกัดให้มีความยาวไม่เกิน 12 อักขระเพื่อลดโอกาสในการตัดข้อความ
icons
อาร์เรย์ของออบเจ็กต์ไอคอนที่มี src, type, sizes และช่องที่ไม่บังคับ purpose ซึ่งอธิบายว่ารูปภาพใดควรแสดงถึง PWA
start_url
URL ที่ PWA ควรโหลดเมื่อผู้ใช้เริ่มต้น URL จากไอคอนที่ติดตั้งไว้ แนะนำให้ใช้เส้นทางสัมบูรณ์ หากหน้าแรกของ PWA เป็นรูทของเว็บไซต์ คุณอาจตั้งค่านี้เป็น "/" เพื่อเปิดเมื่อแอปเริ่มทำงาน หากไม่ระบุ URL เริ่มต้น เบราว์เซอร์จะใช้ URL ที่ติดตั้ง PWA เป็นจุดเริ่มต้นได้ ซึ่งอาจเป็น Deep Link เช่น รายละเอียดของผลิตภัณฑ์ แทนที่จะเป็นหน้าจอหลัก
display
หนึ่งใน fullscreen, standalone, minimal-ui หรือ browser ซึ่งอธิบายวิธีที่ระบบปฏิบัติการควรวาดหน้าต่าง PWA อ่านเพิ่มเติมเกี่ยวกับโหมดการแสดงผลต่างๆ ได้ในบทการออกแบบแอป Use Case ส่วนใหญ่ใช้ standalone
id
สตริงที่ระบุ PWA นี้ได้อย่างไม่ซ้ำกันเทียบกับรายการอื่นๆ ที่อาจโฮสต์บนต้นทางเดียวกัน หากไม่ได้ตั้งค่า ระบบจะใช้ start_url เป็นค่าสำรอง โปรดทราบว่าการเปลี่ยน start_url ในอนาคต (เช่น เมื่อเปลี่ยนค่าสตริงการค้นหา) อาจเป็นการนำความสามารถของเบราว์เซอร์ในการตรวจหาว่าติดตั้ง PWA ไว้แล้วออก

ไอคอน

ไอคอนของ PWA เป็นข้อมูลประจำตัวแบบภาพในอุปกรณ์ต่างๆ ของผู้ใช้เมื่อติดตั้งแล้ว คุณจึงต้องกำหนดอย่างน้อย 1 ไอคอน เนื่องจากพร็อพเพอร์ตี้ icons เป็นชุดออบเจ็กต์ไอคอน คุณจึงสามารถกำหนดไอคอนต่างๆ ในรูปแบบต่างๆ เพื่อมอบประสบการณ์การใช้งานไอคอนที่ดีที่สุดให้แก่ผู้ใช้ได้ แต่ละเบราว์เซอร์จะเลือกไอคอนตั้งแต่หนึ่งไอคอนขึ้นไปตามความต้องการและระบบปฏิบัติการที่ติดตั้ง และไอคอนนั้นสอดคล้องกับข้อกำหนดเฉพาะที่มากกว่า

หากต้องการเลือกไอคอนเพียงขนาดเดียว ไอคอนควรมีขนาด 512 x 512 พิกเซล อย่างไรก็ตาม เราขอแนะนำให้ใส่ขนาดเพิ่มเติม ได้แก่ รูปภาพขนาด 192 x 192, 384 x 384 และ 1024 x 1024 พิกเซลด้วยเช่นกัน

"icons": [
   {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   }
]

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

ไอคอนที่มาสก์ได้

ระบบปฏิบัติการบางระบบ เช่น Android จะปรับเปลี่ยนไอคอนตามขนาดและรูปร่างต่างๆ เช่น ใน Android 12 ผู้ผลิตหรือการตั้งค่าที่แตกต่างกันอาจเปลี่ยนรูปร่างของไอคอนจากวงกลมเป็นสี่เหลี่ยมจัตุรัสเป็นสี่เหลี่ยมมุมมนได้ หากต้องการรองรับไอคอนแบบปรับอัตโนมัติเหล่านี้ ให้ระบุไอคอนที่มาสก์ได้โดยใช้ช่อง purpose

วิธีการคือให้ไฟล์ภาพสี่เหลี่ยมจัตุรัสที่มีไอคอนหลักอยู่ใน "โซนปลอดภัย" ซึ่งเป็นวงกลมที่อยู่ตรงกลางไอคอนโดยมีรัศมี 40 เปอร์เซ็นต์ของความกว้างของไอคอน (ดูภาพด้านล่าง) อุปกรณ์ที่รองรับไอคอนที่มาสก์ได้จะมาสก์ไอคอนตามที่จำเป็น

พื้นที่ปลอดภัยทำเครื่องหมายเป็นวงกลมมีรัศมี 40 เปอร์เซ็นต์ภายในไอคอนสี่เหลี่ยมจัตุรัส

ตัวอย่างไอคอนที่มาสก์ได้ซึ่งแสดงผลเป็นรูปทรงต่างๆ ที่ใช้กันโดยทั่วไปมีดังนี้

ในภาพต่อไปนี้ หากคุณใช้ไอคอนด้านซ้ายเป็นไอคอนที่มาสก์ได้ ผลที่ได้ในอุปกรณ์จะออกมาไม่ดีเมื่อใช้มาสก์รูปร่าง

ไอคอนที่ไม่เหมาะสำหรับไอคอนที่มาสก์ได้

รูปภาพนี้สามารถทำให้ใช้ร่วมกับระยะห่างจากขอบได้มากขึ้น

ไอคอนที่มีระยะห่างจากขอบมากกว่าจะเหมาะสำหรับมาสก์

ไอคอนที่มาสก์ได้ควรมีขนาดอย่างน้อย 512 x 512 เมื่อสร้างแล้ว คุณจะเพิ่มรายการดังกล่าวไปยังคอลเล็กชัน icons เพื่อปรับปรุงประสบการณ์การใช้งานสำหรับอุปกรณ์ที่รองรับได้ดังนี้

"icons": [
   {
      "src": "/icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "/icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   },
   {
      "src": "/icons/512-maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
   },
]

ในกรณีส่วนใหญ่ หากไอคอนที่มาสก์ได้แสดงผลได้ไม่ดีนัก คุณสามารถปรับปรุงไอคอนได้โดยการเพิ่มระยะห่างจากขอบ Maskable.app เป็นเครื่องมือออนไลน์ฟรีสำหรับการทดสอบและสร้างไอคอนเวอร์ชันที่มาสก์ได้

ช่องชุดถัดไปที่จะรวมคือช่องที่จะปรับปรุงประสบการณ์ของผู้ใช้ แม้ว่าจะไม่จำเป็นสำหรับการติดตั้งก็ตาม

theme_color
สีเริ่มต้นสำหรับแอปพลิเคชัน ซึ่งบางครั้งจะส่งผลต่อวิธีที่ระบบปฏิบัติการแสดงเว็บไซต์ (เช่น สีหน้าต่างและแถบชื่อบนเดสก์ท็อป หรือสีแถบสถานะบนอุปกรณ์เคลื่อนที่) องค์ประกอบ HTML theme-color <meta> สามารถลบล้างสีนี้ได้
background_color
สีตัวยึดตำแหน่งที่จะแสดงในพื้นหลังของแอปพลิเคชันก่อนที่จะโหลดสไตล์ชีต ปัจจุบัน Safari ใน iOS และ iPadOS และเบราว์เซอร์ในเดสก์ท็อปส่วนใหญ่ไม่สนใจช่องนี้
scope
เปลี่ยนขอบเขตการนำทางของ PWA เพื่อให้คุณกำหนดสิ่งที่แสดงและไม่แสดงในหน้าต่างของแอปที่ติดตั้งไว้ เช่น หากคุณลิงก์ไปยังหน้าที่อยู่นอกขอบเขต หน้าเว็บจะแสดงผลในเบราว์เซอร์ในแอปแทนภายในหน้าต่าง PWA อย่างไรก็ตาม การดำเนินการนี้จะไม่เปลี่ยนขอบเขตของ Service Worker

รูปภาพถัดไปแสดงวิธีใช้ช่อง theme_color สำหรับแถบชื่อในอุปกรณ์เดสก์ท็อปเมื่อคุณติดตั้ง PWA

PWA เดียวกันที่ติดตั้งบนเดสก์ท็อปที่มีสีธีมต่างกัน

เมื่อกำหนดสีในไฟล์ Manifest เช่น ภายใน theme_color และ background_color คุณควรใช้สีที่มีชื่อ CSS เช่น salmon หรือ orange, สี RGB เช่น #FF5500 หรือฟังก์ชันสีโดยไม่โปร่งใส เช่น rgb() หรือ hsl() ดูข้อมูลเพิ่มเติมได้ที่บทการออกแบบแอป

ลองเลย

หน้าจอแนะนำ

ในอุปกรณ์บางอย่าง จะมีการแสดงผลภาพนิ่งขณะโหลด PWA เพื่อให้ความคิดเห็นแก่ผู้ใช้ได้ทันที

Android ใช้ค่า theme_color, background_color และ icon เพื่อสร้างหน้าจอแนะนำ

เมื่อคุณติดตั้ง PWA ใน Android อุปกรณ์จะสร้างหน้าจอแนะนําพร้อมข้อมูลที่มาจากไฟล์ Manifest ตามที่แสดงในแผนภาพต่อไปนี้

PWA ในหน้าจอแนะนำของ Android ที่รับค่าแตกต่างจากไฟล์ Manifest

ในทางกลับกัน Safari ใน iOS และ iPadOS จะไม่ใช้ไฟล์ Manifest ของเว็บแอปในการสร้างหน้าจอแนะนำ แต่ใช้รูปภาพที่ลิงก์จากองค์ประกอบ <link> ที่เป็นกรรมสิทธิ์ซึ่งคล้ายกับการจัดการไอคอน ดูรายละเอียดเพิ่มเติมได้ในส่วนเนื้อหาการเพิ่มประสิทธิภาพ

ฟิลด์ที่ขยาย

ช่องชุดถัดไปจะแสดงข้อมูลเพิ่มเติมเกี่ยวกับ PWA คุณไม่จำเป็นต้องกรอกข้อมูลเหล่านี้

lang
แท็กภาษาที่ระบุภาษาหลักของค่าในไฟล์ Manifest เช่น en สำหรับภาษาอังกฤษ, pt-BR สำหรับภาษาโปรตุเกสแบบบราซิล หรือ in สำหรับฮินดี
dir
ทิศทางในการแสดงช่องไฟล์ Manifest ที่นำทางได้ (เช่น name, short_name และ description) ค่าที่ถูกต้องคือ auto, ltr (จากซ้ายไปขวา) และ rtl (ขวาไปซ้าย)
orientation
การวางแนวที่ต้องการสำหรับแอปเมื่อติดตั้งแล้ว เกมอาจตั้งค่านี้ให้ขอการวางแนวแบบแนวนอนเท่านั้น ระบบยอมรับหลายค่า แต่หากรวมไว้มักจะเป็น portrait หรือ landscape อย่างชัดเจน

ช่องโปรโมชัน

ช่องชุดที่ 4 ให้คุณระบุข้อมูลโปรโมชันเกี่ยวกับ PWA เช่น ในขั้นตอนการติดตั้ง ข้อมูล และผลการค้นหา

description
คำอธิบายสิ่งที่ PWA ทำ
screenshots
อาร์เรย์ของออบเจ็กต์ภาพหน้าจอที่มี src, type และ sizes (คล้ายกับออบเจ็กต์ icons) ที่มีจุดประสงค์เพื่อแสดง PWA โดยไม่มีข้อจำกัดด้านขนาด
categories
อาร์เรย์ของหมวดหมู่ที่ PWA ควรใช้เป็นคำแนะนำสำหรับข้อมูล (ไม่บังคับ) จากรายการหมวดหมู่ที่รู้จัก ค่าเหล่านี้มักจะเป็นตัวพิมพ์เล็ก
iarc_rating_id
รหัสการรับรองสหพันธ์การจัดประเภทตามอายุสากลสำหรับ PWA หากมี แต่ข้อมูลนี้มีไว้เพื่อระบุอายุที่ PWA เหมาะสำหรับผู้ชม

คุณดูการใช้งานช่องโปรโมชันเหล่านี้ได้แล้ววันนี้ เช่น หาก PWA ติดตั้งได้บน Android และคุณระบุค่าสำหรับช่อง description และ screenshots เป็นอย่างน้อย กล่องโต้ตอบการติดตั้งจะเปลี่ยนจากแถบข้อมูล "เพิ่มลงในหน้าจอหลัก" ที่เรียบง่าย เป็นกล่องโต้ตอบการติดตั้งที่สมบูรณ์ยิ่งขึ้นคล้ายกับกล่องโต้ตอบจาก App Store

ใน Android คุณสามารถรับ UI การติดตั้งที่ดีขึ้นหากระบุค่าสำหรับช่องโปรโมต อย่างที่เห็นในวิดีโอถัดไป

ดูการใช้งานช่องโปรโมชันต่อไปนี้

ฟิลด์ความสามารถ

สุดท้าย มีช่องจำนวนหนึ่งที่เกี่ยวข้องกับความสามารถต่างๆ ที่ PWA สามารถใช้ในเบราว์เซอร์ที่รองรับ เช่น ช่อง shortcuts, share_target และ display_overrides ตามที่เราได้พูดถึงในส่วนความสามารถ นอกจากนี้ยังมีช่องต่างๆ อย่าง related_apps และ prefer_related_apps (ดูข้อมูลเพิ่มเติมในบทการตรวจจับ) เพื่อเชื่อมต่อ PWA กับแอปที่ติดตั้งไว้ ซึ่งมักจะมาจาก App Store

ช่องใหม่ๆ จำนวนมากอาจปรากฏขึ้นในอนาคต ขณะที่เบราว์เซอร์เพิ่มความสามารถให้กับ Progressive Web App ได้มากขึ้น

แหล่งข้อมูล