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

根據預設，Create React 應用程式會納入網頁應用程式資訊清單，讓所有使用者都能在自己的裝置上安裝您的 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 建構的應用程式範例，該檔案具有修改過的資訊清單檔案：

如要確認所有屬性是否都能正常運作，請這樣做：

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

結語

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