iPhone端PWA图标非首页不生效问题及竞态条件解决方案

DevOps 小满

2026-8-3

iPhone PWA 图标间歇性被页面截图替代的竞态条件问题

问题核心

iPhone 添加 PWA 时存在竞态条件 Bug：系统会同时加载 Web 应用图标和当前页面截图，最后加载完成的资源会被用作桌面图标。

实际现象：

从首页添加 PWA 时能正常显示图标，从其他页面添加则会显示页面截图
问题呈间歇性：多次关闭重开标签页尝试添加，有时显示图标，有时显示截图；清空缓存后，若图标加载耗时更长，就会被正常使用

已尝试的配置方案

按照苹果官方文档设置图标，两种方式都试过：

在 index.html 中添加带尺寸的苹果触摸图标：

<link rel="apple-touch-icon" sizes="180x180" href="ream4.png">

移除 sizes 属性简化配置：

<link rel="apple-touch-icon" href="ream4.png">

当前使用的 manifest.json 配置如下：

{
    "name": "Ream",
    "short_name": "Ream",
    "display": "standalone",
    "orientation": "portrait",
    "start_url": "/",
    "icons": [
        {
            "src": "assets/ream6.png",
            "sizes": "64x64 180x180",
            "type": "image/png"
        }
    ],
    "background_color": "#f8f7fa",
    "categories": ["books", "stories", "memberships"],
    "homepage_url": "https://reamstories.com"
}