Manifest.json Generator PWA Manifest 產生器
快速建立符合 Progressive Web App（PWA）規範的 manifest.json。
支援完整欄位設定、圖示管理、Shortcuts、Screenshots 與即時驗證。
💡 PWA 安裝要求至少 192×192 與 512×512 的圖示；「加入標準尺寸」會一次加入 72–512 共 8 種尺寸。
Shortcuts 讓使用者長按應用程式圖示時快速跳轉至指定頁面（Android 支援）。
Screenshots 用於應用程式商店與安裝介面展示（Android 與桌面 Chrome 支援）。
{}
設定欄位後將即時驗證…
❓ 常見問題 FAQ
關於 manifest.json 與 PWA 的常見疑問
manifest.json 是什麼？
manifest.json（Web App Manifest）是一個 JSON 格式的設定檔案，描述網頁應用程式的名稱、圖示、顯示模式、起始頁面等資訊。瀏覽器讀取後，能讓您的網站以「應用程式」的方式呈現。
在 HTML 中透過一行標籤引用：<link rel="manifest" href="/manifest.json">
manifest.json 的作用包括：
- 讓使用者可將網站「安裝」到主畫面或桌面
- 定義應用程式圖示與啟動畫面
- 控制顯示模式（全螢幕、獨立視窗等）
- 設定主題色與背景色
- 宣告 Android 長按捷徑（Shortcuts）
什麼是 PWA？為什麼需要 manifest.json？
PWA（Progressive Web App） 是一種結合網頁與原生應用程式優點的技術。PWA 可被安裝、離線運作、接收通知，卻不需要透過應用程式商店發布。
一個完整的 PWA 需要三個核心要素：
- manifest.json — 宣告應用程式身份與安裝資訊（本工具產生）
- Service Worker — 提供離線快取與背景功能
- HTTPS — 安全傳輸的必要條件
💡 manifest.json 是讓瀏覽器顯示「安裝應用程式」提示的必要條件，也是 PWA 評分的重要項目。
各欄位代表什麼意思？
以下是 manifest.json 主要欄位的說明：
- name / short_name — 應用程式全名與安裝後顯示的簡稱（short_name 建議 ≤ 12 字元）
- start_url — 啟動應用程式時開啟的頁面，建議為相對路徑（如 /）
- scope — 應用程式的導覽範圍，範圍外的連結將以瀏覽器開啟
- display — 顯示模式：
standalone（獨立視窗）、fullscreen（全螢幕）、minimal-ui（精簡介面）、browser（瀏覽器） - theme_color — 工具列與系統列的顏色
- background_color — 啟動畫面與載入階段的背景色
- orientation — 建議方向：portrait、landscape、any
- icons — 應用程式圖示，包含 src、sizes、type、purpose
- shortcuts — 長按圖示時顯示的快速捷徑（Android）
- screenshots — 安裝介面展示的截圖
- categories — 應用程式分類（最大 3 個）
為什麼需要 192×192 與 512×512 的圖示？
Google 的 PWA 安裝標準明確要求 manifest 中必須包含以下兩種圖示：
192×192 — 安裝後顯示於主畫面與應用程式列表
512×512 — 安裝提示與啟動畫面使用
缺少任一種都會導致瀏覽器不顯示「安裝應用程式」的提示。完整提供 72–512 各種尺寸則能確保在所有裝置上都有最佳顯示品質。
💡 每個圖示應指定 purpose：any（一般）、maskable（可遮罩，含安全邊距）、monochrome（單色）。
manifest.json 應該放在哪裡？如何部署？
manifest.json 通常放置於網站根目錄，並在 HTML 的 <head> 中引用：
部署步驟：
- 使用本工具設定欄位並下載 manifest.json
- 上傳至網站根目錄（與圖示檔案同一目錄）
- 在 HTML head 中加入 manifest 引用標籤
- 確認
start_url與scope指向正確的相對路徑 - 使用 Chrome DevTools 的 Application 面板檢查 manifest 載入狀態
⚠️ 注意：manifest 中的圖示路徑是相對於 manifest 檔案位置，若 manifest 在根目錄，圖示路徑通常以 / 開頭。
這個工具安全嗎？支援哪些瀏覽器？
完全安全！Manifest.json Generator 是一個 100% 純前端工具：
- ✅ 所有欄位設定、JSON 產生與驗證都在您的瀏覽器中完成
- ✅ 不會將任何資料上傳至伺服器
- ✅ 不需要註冊或登入，載入後可完全離線使用
- ✅ 不會儲存您的任何設定
瀏覽器相容性：本工具相容於所有主流瀏覽器的最新版本（Chrome、Firefox、Safari、Edge、Opera）。
📖 PWA Manifest 完全指南：從零建立可安裝的網頁應用程式
深入了解 manifest.json 與 Progressive Web App
功能介紹
Manifest.json Generator 是 ToolHub 推出的免費 PWA Manifest 建立工具。透過圖形化介面設定 應用程式名稱、簡稱、描述、語言、起始頁面與作用範圍，選擇 顯示模式、方向、主題色，並管理 應用程式圖示、Shortcuts 捷徑、Screenshots 截圖與分類。右側即時產生格式化的 manifest.json，並自動驗證必填欄位、圖示完整性與顏色有效性。
manifest.json 是什麼？
Web App Manifest 是 W3C 制定的標準，以 JSON 格式描述網頁應用程式的中繼資料。瀏覽器與作業系統讀取 manifest 後，可以將網站呈現為原生應用程式：顯示於主畫面、提供獨立視窗、設定啟動畫面與圖示。
一個最簡單的 manifest.json 範例：
PWA 簡介：為什麼要讓網站「可安裝」？
PWA（Progressive Web App） 讓網頁應用程式獲得原生應用程式的使用體驗：
- 可安裝 — 直接安裝到主畫面，不需經過應用程式商店
- 可離線 — 搭配 Service Worker 提供離線存取
- 高效能 — 啟動快速、介面沉浸（全螢幕或獨立視窗）
- 低門檻 — 不需要上架審核，更新即時生效
- 跨平台 — 同一份程式碼支援 Android、Windows、iOS（部分支援）與 macOS
manifest.json 是 PWA 的「身分證」，缺少它，瀏覽器就無法將網站視為可安裝的應用程式。
欄位說明
必備欄位
name或short_name— 至少一個，應用程式名稱start_url— 啟動頁面display— 顯示模式icons— 至少一個圖示；建議包含 192×192 與 512×512
重要欄位
description— 應用程式描述lang— 主要語言（如 zh-TW、en）scope— 導覽範圍，建議與 start_url 同層或更上層orientation— 方向偏好theme_color/background_color— 主題與背景色shortcuts— Android 長按捷徑（最多 4 個建議）screenshots— 安裝介面截圖categories— 分類標籤（最多 3 個）
最佳實踐
- short_name 保持在 12 字元內，避免在主畫面被截斷
- 提供 maskable 圖示 — purpose 設為 maskable 的圖示應在四邊留有安全邊距（內容占中央 80%）
- theme_color 與網站品牌一致 — 會影響行動裝置工具列與系統列配色
- 使用相對路徑的 start_url — 避免網域更換時路徑失效
- 搭配 favicon 一起管理 — 圖示可與 favicon-generator 產出的 PWA 圖示共用
瀏覽器相容性
本工具基於現代 Web 標準開發，相容於所有主流瀏覽器的最新版本：Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edge 與 Opera。建議使用最新版本以獲得最佳體驗。
隱私權保護
ToolHub 高度重視您的資料隱私。Manifest.json Generator 採用 100% 純前端架構，所有欄位設定、JSON 產生與驗證均在您的瀏覽器中完成，不會將任何資料傳輸至外部伺服器。我們不會儲存、分析或分享您輸入的任何內容，請放心使用。