ไฟล์ Manifest ของเว็บแอปจะรวมอยู่ใน Create React App โดยค่าเริ่มต้น และอนุญาตให้ทุกคนสามารถติดตั้งแอปพลิเคชัน React ของคุณบนอุปกรณ์ของตนได้
Create React App (CRA) จะมีไฟล์ Manifest ของเว็บแอปโดยค่าเริ่มต้น กำลังแก้ไข จะช่วยให้คุณเปลี่ยนวิธีแสดงแอปพลิเคชันเมื่อติดตั้ง ในอุปกรณ์ของผู้ใช้
![ไอคอน Progressive Web App บนหน้าจอหลักของโทรศัพท์มือถือ](https://web.dev/static/articles/add-manifest-react/image/a-progressive-web-app-ico-1aeca055d20a7.png?authuser=6&hl=th)
เหตุใดจึงมีประโยชน์
ไฟล์ 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
บทสรุป
- หากคุณกำลังสร้างเว็บไซต์ที่คุณคิดว่าไม่จำเป็นต้องติดตั้งในเว็บไซต์
อุปกรณ์ ให้นำไฟล์ Manifest และองค์ประกอบ
<link>
ในไฟล์ HTML ที่ ชี้ไปที่ข้อความ - ถ้าต้องการให้ผู้ใช้ติดตั้งแอปพลิเคชันในอุปกรณ์ ให้ ไฟล์ Manifest (หรือสร้างไฟล์ดังกล่าวหากคุณไม่ได้ใช้ CRA) กับ ที่พักที่คุณต้องการ เอกสาร MDN จะอธิบายแอตทริบิวต์ที่ต้องระบุและไม่บังคับทั้งหมด