在 PWA 應用程式中使用遮罩圖示（maskable icon）

Chrome 最近釋出 79 版，終於支援了遮罩圖示（看看 Android 8 都出多久了），這篇教學會教你如何使用遮罩圖示。

準備清單

已更新 Chrome 79 的 Android 手機
要修改的 PWA 應用程式

圖示製作

要製作圖示必須保留相對應的安全區域，免得要顯示的內容被裁掉。

你可以在 Maskable.app 預覽套用後的效果 file

修改 manifest.json

將 icons 中的圖示標示 "purpose": "maskable" 便可以使用遮罩了

{
  "scope": "/",
  "name": "PokaPlayer",
  "short_name": "PokaPlayer",
  "icons": [{
      "src": "./img/icons/icon.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./img/icons/icon-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#2f2b3e",
  "theme_color": "#ffffff"
}

在手機上查看套用效果

套用成功了 file 參考資料

Maskable Icons: Android Adaptive Icons for Your PWA