เพิ่มไฟล์ 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 จะอธิบายแอตทริบิวต์ที่จำเป็นและที่ไม่บังคับทั้งหมด