HTML Academy · บทเรียน

Web App Manifest

กำหนดข้อมูลเมตา PWA ด้วยไฟล์ manifest.json

บทเรียน 1 จาก 413 ขั้นตอน

Web App Manifest เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ไฟล์กำกับเว็บแอปทำหน้าที่อะไร

ไฟล์กำกับเว็บแอปคือไฟล์ข้อมูลที่บอกเบราว์เซอร์ว่าควรติดตั้งหน้าเว็บเป็นแอปอย่างไร เช่น ควรใช้ชื่อใด แสดงไอคอนใด เปิด URL ใด ใช้ชุดสีใด และแสดงผลในโหมดใด (แยกเป็นแอป เต็มหน้าจอ หรือเบราว์เซอร์)

การเชื่อมโยงไฟล์กำกับ

อ้างอิงไฟล์กำกับจากทุกหน้าที่ควรติดตั้งได้: <link rel="manifest" href="/manifest.webmanifest"> ในส่วนหัว เบราว์เซอร์จะดึงไฟล์นี้หนึ่งครั้งแล้วเก็บไว้ในแคช การเปลี่ยนแปลงของไฟล์กำกับจะถูกนำมาใช้ในการโหลดครั้งถัดไป

<link rel="manifest" href="/manifest.webmanifest">

ช่องข้อมูลที่จำเป็นขั้นต่ำ

หากต้องการให้เบราว์เซอร์เสนอ "ติดตั้งแอป" ไฟล์กำกับต้องมีอย่างน้อย: name (ชื่อเต็ม), short_name (ป้ายกำกับบนหน้าจอหลัก ประมาณ 12 อักขระ), start_url, display (โดยทั่วไปคือ "standalone") และอาร์เรย์ icons ที่มี PNG ขนาด 192x192 และ 512x512 อย่างน้อย

{
  "name": "Coddy Learn",
  "short_name": "Coddy",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1f2937",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

URL เริ่มต้น

URL ที่เปิดเมื่อแตะไอคอนของแอปที่ติดตั้งแล้ว โดยมากใช้ / สำหรับหน้าแรก และสามารถใส่พารามิเตอร์คำค้นเพื่อการวิเคราะห์ได้: "start_url": "/?source=pwa" ซึ่งช่วยแยกเซสชันที่ติดตั้งออกจากเซสชันในเบราว์เซอร์อย่างชัดเจน

โหมดการแสดงผล

display สามารถเป็น "browser" (ส่วนควบคุมหน้าปกติ), "minimal-ui" (มีส่วนควบคุมบางส่วน), "standalone" (ไม่มีส่วนควบคุม ดูเหมือนแอป) หรือ "fullscreen" (ไม่มีแถบสถานะ) โหมดแยกเป็นแอปเป็นตัวเลือกมาตรฐานของ PWA

ไอคอนและการปรับหน้ากาก

ใส่ไอคอนสำหรับการปรับหน้ากาก เพื่อให้ Android ปรับรูปทรงไอคอนให้เข้ากับไอคอนอื่นบนหน้าจอหลัก: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" } ไอคอนประเภทนี้มีโซนปลอดภัยเพื่อให้ระบบตัดขอบได้

สีธีมและสีพื้นหลัง

theme_color กำหนดสีของแถบที่อยู่เมื่อแอปทำงานในเบราว์เซอร์ ส่วน background_color จะแสดงเป็นพื้นหลังของหน้าจอเริ่มต้นก่อนโหลดหน้าเว็บ จับคู่สีหลักของระบบการออกแบบเพื่อให้การเปิดแอปดูเรียบร้อย

การวางแนว

"orientation": "portrait" จะล็อกแอปให้อยู่ในแนวตั้งเมื่อติดตั้งแล้ว "any", "landscape" และ "portrait-primary" เป็นตัวเลือกอื่น PWA สำหรับการใช้งานทั่วไปส่วนใหญ่จะไม่กำหนดค่านี้ และปล่อยให้อุปกรณ์เลือกแนวตามการวางอุปกรณ์

เงื่อนไขการติดตั้งได้

หากต้องการให้เบราว์เซอร์แสดง "ติดตั้ง" หน้าเว็บต้องให้บริการผ่าน HTTPS ลงทะเบียนเซอร์วิสเวิร์กเกอร์ที่จัดการเหตุการณ์ fetch เชื่อมโยงไฟล์กำกับที่ถูกต้องและมีช่องข้อมูลขั้นต่ำครบถ้วน และผ่านเกณฑ์การมีส่วนร่วม (ผู้ใช้ต้องโต้ตอบกับหน้าเว็บแล้ว)

การอัปเดตไฟล์กำกับ

เบราว์เซอร์จะเก็บไฟล์กำกับไว้ในแคช หากต้องการบังคับให้รีเฟรชหลังแก้ไข ให้เปลี่ยน URL ของไอคอน (สามารถใช้พารามิเตอร์เพื่อหลีกเลี่ยงแคชได้) หรือรอ เพราะเบราว์เซอร์ส่วนใหญ่จะตรวจสอบเป็นระยะ ไม่มี API สำหรับบังคับอัปเดต จึงควรออกแบบโดยสมมติว่าผู้ใช้อาจใช้ไฟล์กำกับเวอร์ชันเก่าเล็กน้อยอยู่ระยะหนึ่ง

การทดสอบไฟล์กำกับ

แท็บแอปพลิเคชันของ Chrome DevTools จะแสดงไฟล์กำกับที่แยกวิเคราะห์แล้ว ค่าที่คำนวณได้ และข้อผิดพลาดในการตรวจสอบ การตรวจสอบ PWA ของ Lighthouse จะตรวจสอบข้อกำหนดการติดตั้งแต่ละข้อและรายงานสิ่งที่ขาดหายไป ใช้ทั้งสองอย่างระหว่างการพัฒนาเพื่อยืนยันว่าติดตั้งได้

ตรวจสอบความรู้

ค่าการแสดงผล "standalone" ในไฟล์กำกับเว็บแอปทำหน้าที่อย่างไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

ไฟล์กำกับเว็บแอป (manifest.webmanifest) บอกเบราว์เซอร์ว่าควรติดตั้งหน้าเว็บเป็นแอปอย่างไร ได้แก่ ชื่อ ชื่อแบบย่อ URL เริ่มต้น โหมดการแสดงผล สีธีม และไอคอน (ขนาด 192 และ 512 รวมถึงแบบปรับหน้ากากสำหรับ Android) เชื่อมโยงไฟล์นี้ด้วย <link rel="manifest"> ตรวจสอบให้มี HTTPS และเซอร์วิสเวิร์กเกอร์เพื่อให้ติดตั้งได้ และทดสอบด้วย Chrome DevTools และการตรวจสอบ PWA ของ Lighthouse

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Web App Manifest” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Web App Manifest” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Web App Manifest”

กำหนดข้อมูลเมตา PWA ด้วยไฟล์ manifest.json คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “Web App Manifest” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy