LocalTools離線瀏覽器工具合集

分類: 開發工具

Web App Manifest 產生器

站方自行規劃沒找到想要的工具？

為可安裝的網頁應用程式產生 manifest.webmanifest

填入應用程式名稱、起始網址、顯示模式、主題與背景顏色以及圖示清單，即可取得可直接使用的 manifest.webmanifest JSON 檔案，讓網站能以 Progressive Web App 的形式安裝。全部在瀏覽器本機完成。

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

Web app manifest 是一個 JSON 檔案，告訴瀏覽器你的網站安裝後該如何運作：在主畫面上的名稱與圖示、狀態列的顏色、要以獨立視窗還是一般瀏覽器分頁開啟，以及從哪個網址啟動。沒有這個檔案，「加到主畫面」功能不是無法使用，就是退化成單純的書籤，而不是類似應用程式的體驗。

使用方式

  1. 輸入應用程式的名稱、簡稱和起始網址。
  2. 選擇顯示模式、主題顏色和背景顏色。
  3. 列出你的圖示，每行一個，格式為路徑和尺寸，例如 "/icon-192.png 192x192"。
  4. 把 JSON 複製到 manifest.webmanifest 檔案中，並在頁面 <head> 用 <link rel="manifest" href="/manifest.webmanifest"> 連結它。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

需要哪些尺寸的圖示？
至少準備 192x192 和 512x512 的 PNG，就能涵蓋多數安裝提示與應用程式圖示的使用情境；如果想在特定平台上有更清晰的圖示，可以再加入其他尺寸。
theme_color 和 background_color 有什麼差別？
theme_color 會為應用程式周圍的瀏覽器介面（例如網址列或狀態列）著色；background_color 則在應用程式載入、尚未繪製自己的內容前，短暫作為啟動畫面（splash screen）的背景色。
如果我不打算做 PWA，還需要這個檔案嗎？
即使沒有完整的離線／service worker 支援，manifest 也能改善訪客把網站加入書籤或主畫面時，圖示與名稱的顯示效果。

回到全部工具