iOS端PWA为何与浏览器localStorage存储相互隔离？

问题背景 #

网站部署在https://example.org/my-app/，此前在浏览器的localStorage中存储了大量数据。升级为PWA后，使用如下manifest.json配置：

{
    "id": "foo", "name": "bar", "short_name": "baz",
    "start_url": "./",
    "scope": "./",
    "icons": ["*et al*"],
    "display": "standalone"
}

出现的异常现象：

• iOS上运行该PWA时，无法访问原浏览器中的localStorage数据，仿佛origin发生了变化，但实际origin未改变
• Lighthouse检测未发现PWA配置问题
• 本地webpack dev server根目录调试时一切正常，但该测试环境不具备参考性
• macOS版Chrome PWA可正常访问原localStorage数据

核心原因 #

这是苹果iOS平台对PWA的设计逻辑导致的：

注意
在苹果设备上，可多次安装同一PWA，每次安装都会有独立的隔离存储，会被视为不同应用。

具体细节：

• iOS上的PWA会被视为独立的原生级应用，拥有专属的隔离存储空间，和Safari浏览器标签页中的同origin网站存储完全不互通
• 哪怕是同一个origin、同一个PWA，多次安装也会生成相互独立的存储环境，彼此数据无法共享
• 这与桌面端Chrome等浏览器的PWA逻辑不同，桌面端Chrome PWA默认会和同origin的浏览器存储共享数据

可行的数据迁移方案 #

如果需要将原浏览器中的localStorage数据迁移到iOS PWA中，可参考以下思路：

• 手动导出导入：在浏览器端网站添加数据导出功能（如生成JSON文件），在PWA首次启动时提供导入选项，让用户手动完成迁移
• 后端同步：将原localStorage数据同步到后端服务器，PWA启动时从服务器拉取对应数据
• 跨上下文传递：如果用户是从浏览器标签页直接安装PWA，可尝试在安装过程中通过postMessage传递数据，但该方案受iOS的安全限制较多，稳定性不足

内容的提问来源于stack exchange，提问作者Isaaс Weisberg