iOS端Chrome阅读列表离线缓存Three.js页面过期失效问题

问题根因 #

Chrome 移动端的阅读列表并未采用持久化存储机制，其缓存的资源归属到浏览器临时缓存分区，分区大小有上限，且会随系统存储清理、浏览器缓存定期回收机制被删除。包含大体积3D模型、纹理资源的Three.js页面优先级更低，数天后被清理属于机制设计导致的正常现象，无法通过常规设置延长缓存有效期。

可落地解决方案 #

• 方案1：改用Chrome下载功能存储离线页面（改造成本最低，无需修改代码） #

  直接替代阅读列表的临时缓存，存储的离线页面是本地持久化文件，除非手动删除否则不会过期，操作步骤：
  1. 联网状态下打开目标页面，点击Chrome右下角「更多」按钮（三个点图标）
  2. 选择「下载」选项，等待所有资源完成本地打包
  3. 离线使用时，打开Chrome的「下载内容」列表，找到对应页面打开即可
     注意：进入Chrome设置关闭「自动清理过期下载内容」开关，避免页面被自动清理。

• 方案2：打包为PWA应用添加到主屏幕（长期使用体验最优） #

  仅需补充少量配置即可实现类原生应用的离线使用体验，适合高频复用的展示页面：
  1. 新增manifest.json配置文件，设置应用名称、展示图标、全屏显示模式
  2. 注册Service Worker，将所有页面资源（HTML、JS脚本、3D模型、纹理素材）全部加入预缓存列表
  3. 联网状态下打开页面，选择「添加到主屏幕」，后续直接点击主屏幕图标即可离线打开，无缓存过期风险
     补充：iOS 15及以上版本已优化PWA的WebGL渲染支持，不会出现Safari直接保存损坏WebGL内容的问题，活动现场使用无需启动浏览器、无地址栏干扰，展示效果更好。

• 方案3：打包为单HTML文件存储 #

  适合小体量的展示页面，完全脱离浏览器缓存机制限制：
  使用资源内联工具将所有外部资源（脚本、模型、纹理）全部转码为Base64格式嵌入HTML文件，生成单个独立HTML文件存入iOS「文件」App，使用时直接选择用Chrome打开即可，无过期风险。

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