Stax
Tools

PWA Manifest Builder

Generate a complete Web App Manifest for your PWA.

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "description": "A Progressive Web Application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />

วิธีการทำงานของ PWA Manifest Builder

PWA manifest builder สร้างไฟล์ manifest.json ที่ถูกต้องสำหรับ Progressive Web Apps กรอกชื่อแอป ไอคอน สีธีม โหมดการแสดงผล และ start URL เครื่องมือจะแสดง JSON ที่สมบูรณ์พร้อม HTML link tag เพื่อเพิ่มในส่วนหัวเอกสารและรายการตรวจสอบไอคอนสำหรับ Lighthouse ครอบคลุมฟิลด์ทั้งหมดที่จำเป็นเพื่อผ่านเกณฑ์การติดตั้ง PWA ของ Chrome

ข้อกำหนด Web App Manifest ต้องการ name, short_name ไอคอน (อย่างน้อย PNG ขนาด 192×192 และ 512×512 px) start_url และโหมดการแสดงผล ฟิลด์ display รับค่า standalone (ลบ browser UI ให้เหมือนแอปมากที่สุด) minimal-ui fullscreen และ browser สำหรับประสบการณ์แบบแอปส่วนใหญ่ standalone เป็นตัวเลือกที่ถูกต้องและจำเป็นสำหรับให้ Chrome แสดงป้ายการติดตั้ง PWA

ฟิลด์ theme_color ควบคุมสีแถบเครื่องมือเบราว์เซอร์บน Android และสีแถบชื่อเรื่องในโหมด standalone ควรตรงกับสีแบรนด์หลักของแอปคุณ ฟิลด์ background_color กำหนดสีพื้นหลังหน้าจอ splash ที่ปรากฏขณะที่ service worker กำลังโหลดครั้งแรก ควรตรงกับพื้นหลังหน้าจอโหลดของแอปเพื่อหลีกเลี่ยง flash ของเนื้อหาที่ไม่มีสไตล์

อาร์เรย์ shortcuts กำหนดการดำเนินการด่วนที่ปรากฏในเมนูบริบทการกดค้างบนไอคอนหน้าจอหลัก Android แต่ละทางลัดมี name, short_name, url และอาร์เรย์ icons ที่เป็นตัวเลือก Android แสดงทางลัดได้สูงสุดสี่รายการ

ไฟล์ manifest.json เพียงอย่างเดียวไม่ทำให้ PWA ทำงานออฟไลน์ได้ service worker จัดการการแคชและการตอบสนองออฟไลน์ manifest บอกเบราว์เซอร์ว่าแอปติดตั้งได้และรองรับ PWA ตัวสร้างจะแสดง manifest และลิงก์ไปยังเอกสาร Workbox สำหรับการเพิ่ม service worker

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

What is a web app manifest?
A Web App Manifest is a JSON file that tells the browser about your Progressive Web App. It enables features like Add to Home Screen, splash screens, full-screen mode, and custom theme colors.
What is the difference between standalone and fullscreen display?
Standalone removes the browser UI (address bar, navigation buttons) so the app looks native. Fullscreen removes the status bar too. Use standalone for most apps; fullscreen for games or immersive experiences.
What icon sizes do I need for a PWA?
Minimum: 192×192 (for Add to Home Screen) and 512×512 (for splash screens). Chrome requires both. Use purpose: maskable for icons that should be cropped by the OS into different shapes.

เครื่องมือที่เกี่ยวข้อง