如何自定义PWA启动屏：实现主屏幕与启动图标区分显示

要实现主屏幕显示icon-I、启动屏显示icon-II的效果，只需通过配置manifest.json的icons字段，利用purpose属性区分不同用途的图标即可，具体修改如下：

修改要点 #

• 给所有icon-I的图标添加"purpose": "maskable"，标记它们为主屏幕专用图标（浏览器会优先选择maskable图标作为桌面/主屏幕图标）。
• 添加icon-II对应尺寸的图标条目，设置"purpose": "any"，作为启动屏专用图标。
• 修正原配置中最后一个图标的路径错误（src与sizes不匹配）。

修改后的完整manifest.json #

{
  "manifest_version": 3,
  "name": "Demo School",
  "description": "",
  "version": "1.0",
  "icons": [
    // 主屏幕图标：icon-I，标记为maskable
    {
      "src": "images/icon-I-72x72.png",
      "type": "image/png",
      "sizes": "72x72",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-96x96.png",
      "type": "image/png",
      "sizes": "96x96",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-128x128.png",
      "type": "image/png",
      "sizes": "128x128",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-144x144.png",
      "type": "image/png",
      "sizes": "144x144",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-152x152.png",
      "type": "image/png",
      "sizes": "152x152",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-192x192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-384x384.png",
      "type": "image/png",
      "sizes": "384x384",
      "purpose": "maskable"
    },
    {
      "src": "images/icon-I-512x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    },
    // 启动屏图标：icon-II，标记为any
    {
      "src": "images/icon-II-72x72.png",
      "type": "image/png",
      "sizes": "72x72",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-96x96.png",
      "type": "image/png",
      "sizes": "96x96",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-128x128.png",
      "type": "image/png",
      "sizes": "128x128",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-144x144.png",
      "type": "image/png",
      "sizes": "144x144",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-152x152.png",
      "type": "image/png",
      "sizes": "152x152",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-192x192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-384x384.png",
      "type": "image/png",
      "sizes": "384x384",
      "purpose": "any"
    },
    {
      "src": "images/icon-II-512x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any"
    }
  ],
  "short_name": "D.S",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#FFE9D2",
  "theme_color": "#FFE1C4",
  "orientation": "portrait-primary"
}

说明 #

• maskable类型的图标会被浏览器识别为适合用作桌面/主屏幕图标的资源，会自动适配不同平台的图标圆角、遮罩等要求。
• any类型的图标适用于所有场景，浏览器生成启动屏时会优先选择这类图标（如果存在）。
• 确保icon-II的所有尺寸文件都已放置到对应路径下，否则会导致启动屏图标加载失败。

内容的提问来源于stack exchange，提问作者Rajeev Kumar