我有一个带有元标记的 iPad 网络应用程序:
<meta name="apple-mobile-web-app-capable" content="yes">
当我从主页(支持网络应用程序的版本)打开应用程序或在 Mobile Safari 中输入地址时,localStorage 的内容不同。我已通过打印 location.href 确认地址相同。
在使用 Mobile Safari 时对 localStorage 所做的所有更改都会反射(reflect)在支持 Web 应用程序的版本中,但在支持 Web 应用程序的版本中所做的更改不会反射(reflect)在 Mobile Safari 版本中。
域是相同的,localStorage 应该是相同的。这到底是怎么回事?这可以修复吗?
更新 - 解决方案:根据接受的答案中的建议 #2(强制用户处于全屏模式),我添加了这段代码:
if(("standalone" in window.navigator) && !window.navigator.standalone)
window.location = "instructions.html";
因此,如果您使用的是支持独立模式的浏览器,并且您未处于独立模式,请重定向到一个页面 (instructions.html),该页面向用户展示如何将应用程序添加到主屏幕。
感谢大家的投入!
最佳答案
总结:
Safari 浏览器和全屏网络应用程序(也称为支持网络应用程序)具有单独的本地存储数据内存直写缓存。每次全屏应用程序激活时,它都会从磁盘重新加载 localStorage(允许它看到 Safari 的更改)。但是,当 Safari 激活时,它不会从磁盘重新加载 localStorage 数据,因此除非您终止 Safari 并重新启动它,否则它不会看到在全屏应用程序中所做的更改。
完整说明:
计算机科学中只有两个难题:
- 缓存失效
- 命名事物
- 差一错误
localStorage 中的错误行为是问题 #1 的结果。原因如下:
当 iOS 浏览器引擎加载时,它会从磁盘读取 localStorage 的数据并将其缓存在内存中。然后每次读取数据(例如getItem
)时,数据都是从内存中读取的,而不是从磁盘中读取的;并且在写入(例如 setItem
)时,数据被写入内存,然后(异步)刷新到磁盘。由于 localStorage 是同步的,所以这个实现是完全合理的。如果它去磁盘进行所有读写,你的 javascript 将在每次读/写时被阻塞以执行昂贵的磁盘 IO。
问题是全屏网络应用程序(让我们称之为 FSWA)使用 iOS 浏览器引擎的单独实例,尽管 FSWA 共享磁盘上的相同位置以存储 localStorage 数据,但它不会与 Safari 共享 localStorage 数据的内存缓存。
当您添加 FSWA 每次成为事件应用程序时完全重新加载(这意味着 localStorage 数据从磁盘重新加载)这一事实时,您就会得到您所看到的行为。
这是幕后...
- 用户进行更改,将数据写入 Safari 中的 localStorage
- Safari 将数据写入 Safari 的内存中 localStorage 缓存
- Safari 将 localStorage 数据从缓存刷新到磁盘
- 用户离开 safari 并启动 FSWA
- FSWA 将本地存储数据从磁盘加载并读取到内存缓存中
- 用户在 Safari 中看到更改的数据(在步骤 #1 中)
- 用户在将数据写入 localStorage 的 FSWA 中进行更改
- FSWA 将数据写入其 localStorage 缓存(Safari 的缓存未更新)
- FSWA 将其 localStorage 缓存数据刷新到磁盘
- 用户切换回 Safari
- Safari 已经在运行,它不会从磁盘重新加载 localStorage 数据
- Safari 从其现有的内存缓存中读取旧数据
- 用户看不到在第 7 步中所做的更改
为了证明这一点,你可以kill Safari在步骤#4 和步骤#10 之间。然后,当您在步骤 #11 中重新启动 Safari 时,它将从磁盘重新加载 localStorage,您将看到 FSWA 写入的数据。
关于iOS 'Web App' 的 localStorage 与 Mobile Safari 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11545149/