使用 Create React 應用程式新增網頁應用程式資訊清單

根據預設，Create React App 會納入網頁應用程式資訊清單，讓任何人都能在自己的裝置上安裝 React 應用程式。

Houssein Djirdeh

Create React App (CRA) 預設會包含網頁應用程式資訊清單。修改這個檔案後，您就能變更應用程式安裝在使用者裝置上的顯示方式。

手機主畫面上的漸進式網頁應用程式圖示

這種報表有哪些優點？

網頁應用程式資訊清單檔案的功能，可以變更已安裝的應用程式在使用者電腦或行動裝置上的外觀。您可以修改 JSON 檔案中的屬性，藉此修改應用程式中的多項詳細資料，包括：

  • 名稱
  • 說明
  • 應用程式圖示
  • 主題色彩

MDN 說明文件涵蓋所有可變更的屬性詳細資訊。

修改預設資訊清單

在 CRA 中，建立新應用程式時，系統會自動納入預設資訊清單檔案 /public/manifest.json：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

這樣一來，任何人都能在自己的裝置上安裝應用程式，並查看應用程式的部分預設詳細資料。HTML 檔案 public/index.html 也包含 <link> 元素，可用於載入資訊清單。

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

以下是使用 CRA 建構的應用程式，且具有修改的資訊清單檔案：

如要檢查這個範例中的所有屬性是否都能正常運作：

  • 如要預覽網站，請按下「View App」。然後按下「Fullscreen」圖示 全螢幕。
  • 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  • 按一下「Application」分頁標籤。
  • 在「應用程式」面板中，按一下「資訊清單」分頁標籤。

DevTool 的「資訊清單」分頁會顯示應用程式資訊清單檔案中的屬性。

結論

  1. 如果您認為建構的網站不需要在裝置上安裝，請移除資訊清單和指向資訊清單的 HTML 檔案中的 <link> 元素。
  2. 如果您希望使用者在裝置上安裝應用程式，請視需要修改資訊清單檔案 (如果您沒有使用 CRA，則可建立一個資訊清單檔案)。MDN 說明文件會說明所有必要和選用屬性。