什麼是Manifest.json 產生器？
Manifest.json 產生器協助您為漸進式 Web 應用程式（PWA）建立完整的 Web 應用程式資訊清單。只需填入應用程式資訊，即可取得格式正確、包含所有必填和選填欄位的 manifest.json。
可設定 name、short_name、description、start_url、scope、display 模式(standalone、fullscreen、minimal-ui、browser)、orientation、主題色、背景色,以及任意數量的圖示條目(含尺寸、類型、purpose)。輸出符合 W3C Web App Manifest 規範,Chrome、Edge、Safari 在「加到主畫面」時都能識別。
使用方法
- 輸入應用程式的基本資訊：名稱、簡稱、描述、主題色和背景色。
- 設定顯示模式（獨立視窗、全螢幕、精簡 UI）、螢幕方向、啟動 URL 和作用範圍。
- 新增圖示項目並指定尺寸，然後複製或下載產生的 manifest.json 檔案到您的專案中。
何時使用
- 幫現有網頁專案加上「安裝應用程式」功能,讓它出現在系統應用清單。
- 為內部員工使用的 PWA 自訂啟動畫面顏色和圖示。
- 為沒有預設 manifest 的 Next.js 或 Vite 樣板補一份基礎清單。
結果
您正在將食譜網站轉換為 PWA。將名稱設為「我的食譜」，主題色設為品牌綠色，顯示模式選擇「獨立視窗」，然後產生資訊清單檔案放到專案根目錄即可。
常見問題
- standalone 和 minimal-ui 兩種顯示模式有什麼差別?
- standalone 會把瀏覽器導航完全隱藏,看起來像原生 App。minimal-ui 會保留頂部一小排導航按鈕(通常是返回與重新整理)。fullscreen 連狀態列都拿掉,適合遊戲。
- 到底要哪些尺寸的圖示?
- 至少要 192×192 與 512×512 兩張 PNG,Chrome 和 Edge 用來做主畫面圖示與啟動畫面。再加 144×144 相容舊版 Windows 磚塊,並做一張 512×512 且 `purpose: maskable` 的版本,Android 裁切時就不會掉細節。
- 為什麼 name 和 short_name 都要填?
- `name` 在安裝提示和應用抽屜顯示;`short_name` 顯示在主畫面圖示下方,只有約 12 個字元的空間。不填 short_name,大多數手機會把 name 截斷,看起來不好看。
- manifest.json 應該放在哪裡?
- 把檔案命名為 `manifest.json`(或 `manifest.webmanifest`)放在站點根目錄,然後在 `<head>` 內加 `<link rel='manifest' href='/manifest.json'>`。瀏覽器第一次載入頁面時就會自動抓取。
- 只放 manifest,網站就可以被安裝嗎?
- 不行。瀏覽器還要求要有處理 `fetch` 事件的 Service Worker、必須使用 HTTPS,以及至少一張 192×192 圖示。manifest 是中繼資料,Service Worker 才能證明網站能離線運作。