ไฟล์ 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 และเครื่องมือสำหรับนักพัฒนาเว็บในเบราว์เซอร์แบบ Chromium ทั้งหมดเพื่อให้แน่ใจว่าไฟล์ Manifest ได้รับการตั้งค่าอย่างถูกต้อง

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

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

  1. ในแผงด้านซ้าย ภายใต้แอปพลิเคชัน ให้เลือกไฟล์ 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 ควรโหลดเมื่อผู้ใช้เริ่มใช้งานจากไอคอนที่ติดตั้งไว้ แนะนำให้ใช้เส้นทางสัมบูรณ์ ดังนั้นหากหน้าแรกของ PWA เป็นรูทของเว็บไซต์ คุณก็ตั้งค่านี้เป็น "/" เพื่อเปิดเมื่อแอปเริ่มทำงาน หากไม่ได้ระบุ URL เริ่มต้น เบราว์เซอร์จะใช้ URL ที่มีการติดตั้ง PWA เป็นจุดเริ่มต้นได้ อาจเป็น Deep Link เช่น รายละเอียดของผลิตภัณฑ์ ไม่ใช่หน้าจอหลัก
display
หนึ่งใน fullscreen, standalone, minimal-ui หรือ browser กำลังอธิบายว่าระบบปฏิบัติการควรวาดหน้าต่าง PWA อย่างไร อ่านเพิ่มเติมเกี่ยวกับโหมดการแสดงผลต่างๆ ได้ในส่วนเนื้อหาการออกแบบแอป กรณีการใช้งานส่วนใหญ่ใช้ standalone
id
สตริงที่ระบุ PWA นี้โดยไม่ซ้ำกันกับสตริงอื่นๆ ที่อาจโฮสต์ในต้นทางเดียวกัน หากไม่ได้ตั้งค่า ระบบจะใช้ start_url เป็นค่าสำรอง โปรดทราบว่าการเปลี่ยน start_url ในอนาคต (เช่น เมื่อเปลี่ยนค่าสตริงการค้นหา) อาจทำให้เบราว์เซอร์ตรวจพบว่ามีการติดตั้ง PWA แล้วไม่ได้อีกต่อไป

ไอคอน

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

หากคุณต้องการเลือกไอคอนเพียงขนาดเดียว ไอคอนควรมีขนาด 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() ดูข้อมูลเพิ่มเติมได้ที่ส่วนการออกแบบแอป

ลองใช้

หน้าจอเริ่มต้น (Splash Screen)

ในอุปกรณ์บางรุ่น ภาพนิ่งจะแสดงขึ้นมาขณะที่ 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
รหัสการรับรอง International Age Rating Coalition สำหรับ PWA หากมี มีไว้เพื่อใช้กำหนดว่า PWA ของคุณเหมาะกับช่วงอายุใด

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

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

ดูการใช้งานจริงของช่องโปรโมชันเหล่านี้

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

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

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

แหล่งข้อมูล