定義圖示和主題色彩

發行項
01/16/2024

安裝在 Windows 上的 PWA 可以使用它們出現在作業系統 (OS) 的方式進行自定義。 PWA 可以定義標題列的一組圖示和主題色彩。

定義圖示

在 Windows 中，使用者可以透過其圖示辨識應用程式。圖示會出現在任務欄、[開始] 功能表中，以及其他位置，例如系統設定。

PWA 可以設定作業系統應該用來在這些不同位置顯示圖示的圖像檔。視內容而定，可以提供多個映像供操作系統選擇。

在 Web 應用程式指令清單檔案中，應用程式圖示會以 icons 成員定義：

{
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

陣列中的 icons 每個圖示應該至少 src 隨附和 sizes 屬性。圖示也可以有 type 和 purpose 屬性。

屬性	描述
`src`	圖像檔案的路徑，可以是來自應用程式根資料夾的相對路徑，或是絕對URL。
`sizes`	可使用對應影像之大小的空間分隔清單。
`type`	操作系統可快速偵測影像類型的選擇性提示。
`purpose`	選擇性提示，可協助OS根據內容選擇正確的圖示影像。值可以是 `monochrome`、 `maskable`或 `any`。

深入了解圖示成員。

圖示影像大小

透過在 Web 應用程式指令清單中提供具有特定維度的影像，可以在 Windows 上增強您的 PWA。建議您選擇下列其中一個選項：

層級 1： (基本映射支援：512x512) 這是用來產生遺漏影像的基底映射。
層級 2： (磚) 在此層級，您的 Web 應用程式指令清單包含預設 (1x) 顯示比例的磚影像。每個映像都必須是 PNG 格式，並已 any 設定目的。以下是建議的影像和大小清單。
- 44x44 - 應用程式圖示
- 71x71 - 小型磚
- 150x150 - 中型磚
- 310x150 - 寬磚
- 310x310 - 大型磚
- 50x50 - 商店標誌
- 620x300 - 啟動顯示畫面
層級 3： (具有顯示比例的磚) 在此層級，您的 Web 應用程式指令清單應該包含所有 Windows 顯示比例大小的磚影像。顯示比例是 Windows 中的使用者設定， (使用者可以移至 [設定>顯示>比例]) 來變更它。您的 Web 應用程式指令清單圖示應該包含具有這些維度的影像：
- 44x44 - 應用程式圖示
- 55x55 - 應用程式圖示 1.25x 顯示比例
- 66x66 - 應用程式圖示 1.5x 顯示比例
- 88x88 - 應用程式圖示 2x 顯示比例
- 176x176 - 應用程式圖示 4x 顯示比例
- 71x71 - 小型磚
- 89x89 - 小型磚 1.25x 顯示比例
- 107x107 - 小型磚 1.5x 顯示比例
- 142x142 - 小型磚 2x 顯示比例
- 284x284 - 小型磚 4x 顯示比例
- 150x150 - 中型磚
- 188x188 - 中型磚 1.25x 顯示比例
- 225x225 - 中型磚 1.5x 顯示比例
- 300x300 - 中型磚 2x 顯示比例
- 600x600 - 中型磚 4x 顯示比例
- 310x150 - 寬磚
- 388x188 - 寬磚 1.25x 顯示比例
- 465x225 - 寬磚 1.5x 顯示比例
- 620x300 - 寬磚 2x 顯示比例
- 1240x600 - 寬磚 4x 顯示比例
- 310x310 - 大型磚
- 388x388 - 大型磚 1.25x 顯示比例
- 465x465 - 大型磚 1.5x 顯示比例
- 620x620 - 大型磚 2x 顯示比例
- 1240x1240 - 大型磚 4x 顯示比例
- 50x50 - 存放區磚
- 63x63 - 儲存磚 1.25x 顯示比例
- 75x75 - 儲存磚 1.5x 顯示比例
- 100x100 - 儲存磚 2x 顯示比例
- 200x200 - 儲存磚 4x 顯示比例
- 620x300 - 啟動顯示畫面
- 775x375 - 啟動顯示畫面 1.25x 顯示比例
- 930x450 - 啟動顯示畫面 1.5x 顯示比例
- 1240x600 - 啟動顯示畫面 2 倍顯示比例
- 2480x1200 - 啟動顯示畫面 4x 顯示比例
層級 4 (磚、顯示縮放比例和目標大小) 在此層級，您會提供具有顯示尺規和目標大小影像的磚影像，以在 Windows 中的各種表面中顯示，包括任務欄、開始功能表、任務管理器、ALT+Tab 工作切換器等等。這可為您的使用者提供最佳體驗，但也需要開發人員投入最多心力。您的 Web 應用程式指令清單圖示應該包含具有這些維度的影像：
- 44x44 - 應用程式圖示
- 55x55 - 應用程式圖示 1.25x 顯示比例
- 66x66 - 應用程式圖示 1.5x 顯示比例
- 88x88 - 應用程式圖示 2x 顯示比例
- 176x176 - 應用程式圖示 4x 顯示比例
- 71x71 - 小型磚
- 89x89 - 小型磚 1.25x 顯示比例
- 107x107 - 小型磚 1.5x 顯示比例
- 142x142 - 小型磚 2x 顯示比例
- 284x284 - 小型磚 4x 顯示比例
- 150x150 - 中型磚
- 188x188 - 中型磚 1.25x 顯示比例
- 225x225 - 中型磚 1.5x 顯示比例
- 300x300 - 中型磚 2x 顯示比例
- 600x600 - 中型磚 4x 顯示比例
- 310x150 - 寬磚
- 388x188 - 寬磚 1.25x 顯示比例
- 465x225 - 寬磚 1.5x 顯示比例
- 620x300 - 寬磚 2x 顯示比例
- 1240x600 - 寬磚 4x 顯示比例
- 310x310 - 大型磚
- 388x388 - 大型磚 1.25x 顯示比例
- 465x465 - 大型磚 1.5x 顯示比例
- 620x620 - 大型磚 2x 顯示比例
- 1240x1240 - 大型磚 4x 顯示比例
- 50x50 - 存放區磚
- 63x63 - 儲存磚 1.25x 顯示比例
- 75x75 - 儲存磚 1.5x 顯示比例
- 100x100 - 儲存磚 2x 顯示比例
- 200x200 - 儲存磚 4x 顯示比例
- 620x300 - 啟動顯示畫面
- 775x375 - 啟動顯示畫面 1.25x 顯示比例
- 930x450 - 啟動顯示畫面 1.5x 顯示比例
- 1240x600 - 啟動顯示畫面 2 倍顯示比例
- 2480x1200 - 啟動顯示畫面 4x 顯示比例
- 16x16 - 任務欄、開始功能表、任務管理器的目標大小
- 20x20 - 任務欄、開始功能表、任務管理器的目標大小
- 24x24 - 任務欄、開始功能表、任務管理器的目標大小
- 30x30 - 任務欄、開始功能表、任務管理器的目標大小
- 32x32 - 任務欄、開始功能表、任務管理器的目標大小
- 36x36 - 任務欄、開始功能表、任務管理器的目標大小
- 40x40 - 任務欄、開始功能表、任務管理器的目標大小
- 44x44 - 任務欄、開始功能表、任務管理器的目標大小
- 48x48 - 任務欄、開始功能表、任務管理器的目標大小
- 60x60 - 任務欄、開始功能表、任務管理器的目標大小
- 64x64 - 任務欄、開始功能表、任務管理器的目標大小
- 72x72 - 任務欄、開始功能表、任務管理器的目標大小
- 80x80 - 任務欄、開始功能表、任務管理器的目標大小
- 96x96 - 任務欄、開始功能表、任務管理器的目標大小
- 256x256 - 任務欄、開始功能表、任務管理器的目標大小