UTILS.
ทำงานในเบราว์เซอร์ 100%
📱

เครื่องสร้าง Web App Manifest (PWA)

สร้าง web app manifest (manifest.json) ที่ถูกต้องสำหรับ PWA พร้อมไอคอน สีธีม และโหมดแสดงผล พร้อมแท็ก link rel=manifest ที่พร้อมวาง

— ผลลัพธ์จะแสดงที่นี่ —
— ผลลัพธ์จะแสดงที่นี่ —

เกี่ยวกับเครื่องมือนี้

เครื่องสร้าง Web App Manifest สร้าง manifest.json ที่ถูกต้องสำหรับ Progressive Web App จากฟอร์มง่าย ๆ แล้วมอบแท็ก HTML คู่กันให้คุณวางลงใน <head> ของหน้าเว็บ ทุกอย่างประกอบในเบราว์เซอร์ของคุณและไม่มีการอัปโหลด — คุณคัดลอก JSON ดาวน์โหลดเป็น manifest.json หรือคัดลอกแท็ก link และ meta ได้

web app manifest คือไฟล์ JSON ที่ทำให้เว็บไซต์ติดตั้งลงหน้าจอหลักและเปิดได้เหมือนแอปเนทีฟ เครื่องมือนี้ประกอบคีย์มาตรฐาน — name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui หรือ browser), orientation, theme_color, background_color และอาร์เรย์ icons — โดยตัดฟิลด์ที่คุณเว้นว่างออกเพื่อให้ผลลัพธ์สะอาด ขนาดไอคอนแต่ละอันที่คุณติ๊กจะกลายเป็นรายการที่มี src, sizes และ type (มาจากนามสกุลไฟล์) และ purpose ที่เลือกได้ให้คุณทำเครื่องหมายไอคอนเป็น maskable ผลลัพธ์ถูก serialize ด้วย JSON.stringify ที่การเยื้องสองช่องว่าง จึงอ่านง่ายและเป็นไปตามมาตรฐาน

ใช้ตัวแทน {size} ในเส้นทางไอคอน (เช่น /icons/icon-{size}.png) แล้วมันจะถูกแทนที่ด้วยแต่ละมิติเช่น 192x192 และ 512x512 อย่างน้อย manifest ควรมี name, start_url, โหมด display และไอคอนอย่างน้อย 192px และ 512px ซึ่งเป็นค่าเริ่มต้นที่นี่ อ้างอิงจากหน้าเว็บของคุณด้วยแท็ก <link rel="manifest"> ที่สร้างขึ้นและเพิ่ม meta theme-color สำหรับ UI ของเบราว์เซอร์

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

web app manifest คืออะไร?
เป็นไฟล์ JSON ที่อธิบาย Progressive Web App ของคุณ — ชื่อ ไอคอน สี และวิธีที่ควรเปิด — เพื่อให้เบราว์เซอร์เสนอติดตั้งลงหน้าจอหลักและเปิดในหน้าต่างแบบแอป
ฟิลด์ใดที่จำเป็น?
manifest ที่มีประโยชน์ต้องมีอย่างน้อย name (หรือ short_name), start_url, โหมด display และไอคอน 192x192 และ 512x512 เครื่องสร้างนี้ใส่ค่าเหล่านั้นเป็นค่าเริ่มต้น ฟิลด์อื่นเป็นทางเลือกและถูกตัดออกเมื่อเว้นว่าง
'maskable' หมายถึงอะไรสำหรับไอคอน?
ไอคอน maskable มีระยะขอบที่ปลอดภัยเพื่อให้แพลตฟอร์มครอบเป็นวงกลม squircle หรือสี่เหลี่ยมมุมมนได้โดยไม่ตัดโลโก้ของคุณ ตั้ง purpose เป็น 'maskable' หรือ 'any maskable' สำหรับไอคอนที่ออกแบบมาพร้อมโซนปลอดภัยนั้น
จะติดตั้ง manifest บนเว็บไซต์อย่างไร?
บันทึก JSON เป็น manifest.json อัปโหลดไปยังเว็บไซต์ แล้วเพิ่มแท็ก <link rel="manifest" href="/manifest.json"> ที่สร้างขึ้นและแท็ก meta theme-color ลงใน <head> ของทุกหน้า

เครื่องมือเพิ่มเติม