เครื่องมือสร้าง PWA Manifest

สร้างไฟล์ web app manifest.json ที่ถูกต้องสำหรับ Progressive Web App กำหนดชื่อแอป โหมดการแสดงผล สีธีมและสีพื้นหลัง ทิศทาง ภาษา และไอคอน แล้วคัดลอกหรือดาวน์โหลดไฟล์

Loading tool...

เครื่องมือสร้าง PWA Manifest คืออะไร?

เครื่องมือสร้าง PWA Manifest สร้างไฟล์ web app manifest.json ที่ถูกต้องสำหรับ Progressive Web App โดยรวบรวมชื่อแอป ชื่อย่อ คำอธิบาย start URL โหมดการแสดงผล ทิศทาง สีธีมและสีพื้นหลัง ภาษา และเส้นทางไอคอน แล้วแสดงผล manifest ที่สอดคล้องกับมาตรฐานให้คัดลอกหรือดาวน์โหลด ทุกอย่างทำงานในเบราว์เซอร์พร้อมตัวอย่าง JSON แบบสด

ประโยชน์หลัก

สร้าง manifest.json ที่สมบูรณ์พร้อมใช้สำหรับ PWA ของคุณ
รองรับฟิลด์หลักครบถ้วน: name, short_name, start_url, display, orientation
ตัวเลือกสีธีม/สีพื้นหลังพร้อมโค้ด hex แบบสด
เส้นทางไอคอน 192px, 512px, maskable และ Apple touch
ทำงานในเบราว์เซอร์ 100% - ไม่มีข้อมูลหลุดออกจากเครื่อง

กรณีการใช้งาน

•สร้าง manifest สำหรับ web app ที่ติดตั้งได้ใหม่
•เตรียมไฟล์ manifest สำหรับการตรวจสอบ PWA ด้วย Lighthouse
•ตั้งค่าการสร้างแบรนด์บนหน้าจอหลักและสีหน้าจอโหลด
•สร้าง manifest ให้กับ progressive web app ที่มีอยู่แล้ว

วิธีใช้เครื่องมือสร้าง PWA Manifest

กรอกข้อมูลแอปของคุณ: พิมพ์ชื่อแอปเต็ม ชื่อย่อที่แสดงบนหน้าจอหลัก คำอธิบาย และ start URL (ปกติคือ /) ฟิลด์เหล่านี้แมปไปที่ name, short_name, description และ start_url ใน manifest โดยตรง
เลือกโหมดการแสดงผลและสี: เลือกโหมดการแสดงผล (standalone แนะนำสำหรับความรู้สึกเหมือนแอป) ทิศทาง และภาษา ใช้ตัวเลือกสีเพื่อตั้งค่าสีธีมและสีพื้นหลัง ซึ่งควบคุมแถบเครื่องมือเบราว์เซอร์และหน้าจอโหลด
กำหนดเส้นทางไอคอน: กรอกเส้นทางไอคอน 192px และ 512px เปิดไอคอน maskable (พื้นที่ปลอดภัย) และเพิ่ม Apple touch icon สำหรับ iOS JSON แบบสดจะอัปเดตทันทีเมื่อคุณแก้ไข
คัดลอกหรือดาวน์โหลด: คลิก Copy เพื่อคัดลอก manifest ไปยังคลิปบอร์ด หรือคลิก Download เพื่อบันทึกเป็น manifest.json ลิงก์ใน HTML ด้วย <link rel="manifest" href="manifest.json"> และโฮสต์ไอคอนที่ถูกต้องเพื่อให้การตั้งค่า PWA สมบูรณ์

คุณสมบัติหลัก

สร้าง manifest.json ที่สมบูรณ์และถูกต้องสำหรับ PWA ของคุณ
กำหนดชื่อแอป ชื่อย่อ คำอธิบาย และ start URL ได้
ตั้งค่าโหมดการแสดงผล ทิศทาง และภาษา
ตัวเลือกสีธีมและสีพื้นหลังพร้อมตัวอย่าง hex แบบสด
รองรับไอคอน 192px, 512px, maskable และ Apple touch
คัดลอกด้วยคลิกเดียวและดาวน์โหลดเป็น manifest.json

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

Web app manifest คืออะไร?

Web app manifest คือไฟล์ JSON ที่บอกเบราว์เซอร์ว่า Progressive Web App ของคุณควรมีลักษณะและพฤติกรรมอย่างไรเมื่อติดตั้ง กำหนดชื่อแอป ไอคอน start URL โหมดการแสดงผล สีธีมและสีพื้นหลัง และทิศทาง เป็นไฟล์สำคัญที่ทำให้เว็บไซต์ติดตั้งได้บน Android, iOS และเดสก์ท็อป

ควรเลือกโหมดการแสดงผลแบบใด?

Standalone เป็นตัวเลือกที่พบบ่อยที่สุดเพราะเปิดแอปในหน้าต่างของตัวเองโดยไม่มีแถบที่อยู่ของเบราว์เซอร์ ให้ความรู้สึกเหมือนแอปจริง Fullscreen ซ่อน UI ของเบราว์เซอร์ทั้งหมด เหมาะกับเกมและสื่อ มินิมอล-UI เก็บแถบเครื่องมือเล็ก ๆ ไว้ ส่วนโหมด browser เปิดในแท็บเบราว์เซอร์ปกติ

ต้องใช้ไอคอนขนาดเท่าใดสำหรับ PWA?

อย่างน้อยควรมีไอคอน PNG ขนาด 192x192 และ 512x512 ไอคอน 512px จำเป็นสำหรับคำขอติดตั้งบนหลายแพลตฟอร์ม และไอคอน 192px ใช้บนหน้าจอหลักของ Android แนะนำไอคอน maskable (512x512 พร้อม padding พื้นที่ปลอดภัย) และใช้ Apple touch icon (ปกติ 180x180) บน iOS

ข้อมูล manifest ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ส่ง ทุกอย่างทำงานในเบราว์เซอร์ของคุณ manifest ถูกสร้างขึ้นฝั่ง client ด้วย JavaScript โดยสมบูรณ์ และข้อมูลที่คุณพิมพ์ไม่เคยถูกอัปโหลดหรือส่งไปที่ใด คุณจึงใช้กับแอปภายในหรือแอปที่ยังไม่เปิดตัวได้อย่างปลอดภัย

คู่มือฉบับละเอียด

PWA Manifest Generator: สร้าง Web App ที่ Install ได้ในไม่กี่นาที

อ่านคู่มือฉบับเต็ม →

เครื่องมือสร้าง PWA Manifest

ชื่อแอป

ชื่อย่อ

คำอธิบาย

Start URL

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

สีธีม

#6366f1

สีพื้นหลัง

#ffffff

ทิศทาง

ภาษา

เส้นทางไอคอน 192px

เส้นทางไอคอน 512px

Apple Touch Icon

รวมไอคอน maskable

Manifest JSON

{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "description": "A short description of my app.",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#6366f1",
  "background_color": "#ffffff",
  "lang": "en",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "apple-touch-icon": "/icons/apple-touch-icon.png"
}

บันทึกเป็น manifest.json แล้วลิงก์จาก HTML พร้อมไอคอนที่ถูกต้องเพื่อเปิดใช้งาน PWA ของคุณ

เกี่ยวกับเครื่องมือสร้าง PWA Manifest

เครื่องมือสร้าง PWA Manifest ช่วยให้คุณสร้างไฟล์ web app manifest.json ที่ถูกต้องสำหรับ Progressive Web App ของคุณ กำหนดชื่อแอป โหมดการแสดงผล สีธีมและสีพื้นหลัง ทิศทาง ภาษา และเส้นทางไอคอน จากนั้นคัดลอกหรือดาวน์โหลด manifest ที่พร้อมใช้งาน ทุกอย่างทำงานในเบราว์เซอร์ของคุณโดยไม่ส่งข้อมูลไปยังเซิร์ฟเวอร์ใด

ทำไมต้องใช้ Web App Manifest?

•ทำให้เว็บไซต์ติดตั้งได้บน Android, iOS และเดสก์ท็อป
•ควบคุมวิธีเปิดแอป: เต็มจอ แยกเป็นแอป หรือในเบราว์เซอร์
•ปรับแต่งหน้าจอโหลดด้วยสีธีมและสีพื้นหลัง
•จำเป็นสำหรับ Lighthouse PWA installability audit ผ่าน
•เพิ่มไอคอนบนหน้าจอหลักพร้อมชื่อและ purpose ที่ถูกต้อง

คุณสมบัติ

✓ฟิลด์ manifest ครบถ้วน: name, short_name, description, start_url, display, orientation
✓ตัวเลือกสีธีมและสีพื้นหลังพร้อมตัวอย่าง hex แบบสด
✓กำหนดค่าไอคอน 192px, 512px และ maskable รวมถึง Apple touch icon
✓ผลลัพธ์ JSON แบบสด คัดลอกด้วยคลิกเดียวและดาวน์โหลดเป็น manifest.json
✓ทำงานในเบราว์เซอร์ 100% ไม่ต้องสมัครหรืออัปโหลดไฟล์

Loading tool...