เพิ่มไฟล์ Manifest ของเว็บแอปด้วย Create React App

ไฟล์ Manifest ของเว็บแอปจะรวมอยู่ใน Create React App โดยค่าเริ่มต้น และอนุญาตให้ทุกคนสามารถติดตั้งแอปพลิเคชัน React ของคุณบนอุปกรณ์ของตนได้

Houssein Djirdeh

Create React App (CRA) จะมีไฟล์ Manifest ของเว็บแอปโดยค่าเริ่มต้น กำลังแก้ไข จะช่วยให้คุณเปลี่ยนวิธีแสดงแอปพลิเคชันเมื่อติดตั้ง ในอุปกรณ์ของผู้ใช้

เหตุใดจึงมีประโยชน์

ไฟล์ Manifest ของเว็บแอปให้ความสามารถในการเปลี่ยนวิธีการติดตั้ง จะมีหน้าตาเหมือนในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ของผู้ใช้ โดยการแก้ไข ในไฟล์ JSON นี้คุณสามารถแก้ไขรายละเอียดต่างๆ ใน รวมถึง

• ชื่อ
• คำอธิบาย
• ไอคอนแอป
• สีธีม

เอกสาร MDN จะครอบคลุมพร็อพเพอร์ตี้ทั้งหมดที่สามารถเปลี่ยนแปลงได้โดยละเอียด

แก้ไขไฟล์ Manifest เริ่มต้น

ใน CRA ไฟล์ Manifest เริ่มต้นจะรวม /public/manifest.json ไว้โดยอัตโนมัติเมื่อมีการสร้างแอปใหม่ ดังนี้

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

ซึ่งทำให้ทุกคนสามารถติดตั้งแอปพลิเคชัน บนอุปกรณ์ของตน และเห็น รายละเอียดเริ่มต้นของแอปพลิเคชัน ไฟล์ HTML public/index.html และ มีองค์ประกอบ <link> เพื่อโหลดไฟล์ Manifest

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

ต่อไปนี้คือตัวอย่างแอปพลิเคชันที่สร้างด้วย CRA ซึ่งมีไฟล์ Manifest ที่แก้ไขแล้ว ไฟล์:

หากต้องการดูว่าพร็อพเพอร์ตี้ทั้งหมดทำงานอย่างถูกต้องในตัวอย่างนี้หรือไม่ ให้ทำดังนี้

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
• กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
• คลิกแท็บแอปพลิเคชัน
• ในแผงแอปพลิเคชัน ให้คลิกแท็บไฟล์ Manifest

บทสรุป

1. หากคุณกำลังสร้างเว็บไซต์ที่คุณคิดว่าไม่จำเป็นต้องติดตั้งในเว็บไซต์ อุปกรณ์ ให้นำไฟล์ Manifest และองค์ประกอบ <link> ในไฟล์ HTML ที่ ชี้ไปที่ข้อความ
2. ถ้าต้องการให้ผู้ใช้ติดตั้งแอปพลิเคชันในอุปกรณ์ ให้ ไฟล์ Manifest (หรือสร้างไฟล์ดังกล่าวหากคุณไม่ได้ใช้ CRA) กับ ที่พักที่คุณต้องการ เอกสาร MDN จะอธิบายแอตทริบิวต์ที่ต้องระบุและไม่บังคับทั้งหมด