停止重新加载从 iPhone 主屏幕启动的 Web 应用程序答案

【问题标题】：Stop reloading of web app launched from iPhone Home Screen停止重新加载从 iPhone 主屏幕启动的 Web 应用程序
【发布时间】：2011-10-19 08:02:20
【问题描述】：

我创建了一个网络应用程序并添加到我的 iPhone 主屏幕。当我切换到另一个应用程序并返回时，iPhone 会自动重新加载我的网络应用程序。这打破了我的应用程序流程。

如何防止 iPhone 重新加载应用程序？

我启用了支持 apple-mobile-web-app 的元标记来隐藏 Safari 工具栏，但我不想将其关闭。

【问题讨论】：

所以你甚至没有碰一些可可，只是把链接保存到你的手机上？
@Tim Specht：不确定您的意思是什么，但 OP 询问的是网络应用程序，而不是本机应用程序。关于 SO 的相关问题：stackoverflow.com/questions/6686654/… - 不幸的是，这个问题也没有答案。
在这里查看我的答案：stackoverflow.com/a/40707231/473637
这是一个巨大的耻辱:-(
创建了这个小型反应模块，将这些信息保存在本地存储中，并在应用挂载时重定向到上一个路由，这个问题今天仍然存在（github.com/diogofcunha/react-persist-route）

标签： iphone ios mobile-safari iphone-standalone-web-app

【解决方案1】：

我刚刚在 SO 上找到了这个相关问题：Stop native web app from reloading itself upon opening on iOS

这似乎是 Safari 的一个限制，建议的解决方案是使用 Javascript 和 HTML5 localStorage 保持您的网络应用程序状态。当您的网络应用启动时，检查持久状态并在可用时加载它。

您可以在此处阅读有关在 Safari 中使用 localStorage 的信息：http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1

希望对您有所帮助。至少它对我有用，因为我和你有同样的问题。 :-)

【讨论】：

@Crashalot 问题一直持续到今天，暂时不会改变。
看起来不会有太大变化。然而，Android 最近通过 chrome 添加了改进的 webapp 体验，为您缓存状态。但那是一个不同的平台。
奇迹的是，这仍然是一个问题：O
我现在在 iOS 12.2 测试版中遇到了相反的行为。所以我想知道苹果是否正在调整一些东西。我发现的问题是，当您第二次启动 Web 应用程序时，没有运行任何脚本，因为它看起来好像只是显示了一个缓存视图。
@darren 那么结果是什么？现在我们有了 12.4，会发生什么？我们不能只提供缓存清单或使用某种网络工作者吗？或者这不适用于“添加到主屏幕”？您如何称呼这些应用程序“独立”？

【解决方案2】：

简短的回答是您无法控制这一点。有时 iOS 会在后台保持 Web 应用程序处于活动状态，有时它会杀死它。这完全与设备上有多少可用内存有关。

因此，您最好的方法是尽量减少此重新加载带来的问题。通过更改location.hash 或使用history.pushState()，确保您的Web 应用程序在您从一个视图移动到另一个视图时更新URL。这将允许您重新加载用户在切换应用程序之前打开的任何视图。 pagehide and pageshow events 允许您在用户离开您的应用时执行代码 - 借此机会将本地状态存储在 localStorage 和/或 IndexedDB 中，然后在重新打开 web 应用时再次获取该数据。

【讨论】：

iOS 将总是无条件地 如果您充分离开应用程序并返回到它，则终止全屏 web 应用程序。例如，按下主屏幕按钮显示主屏幕或切换到另一个应用程序将导致当您切换回全屏 Web 应用程序时重新加载。唯一不会发生这种情况的情况是，如果您打开应用程序切换器（按两次主页按钮）并重新选择您的 web 应用程序而不是切换到另一个应用程序，在您的应用程序打开时锁定屏幕并直接解锁它，显示/隐藏控制面板，下拉和上推通知中心。

【解决方案3】：

我发现了一个 hack，在 iOS 11.4.1/12.0 上测试过
打开文件上传窗口，然后切换回主屏幕。
该应用程序仍在继续工作，在我的情况下，音频正在播放并且localStorage 正在更新

证明： https://youtu.be/heehLUhGKYY

附言。注意当我们搜索时歌曲进度如何变化，这证明应用程序在后台运行

【讨论】：

【解决方案4】：

更新：因为这个答案收到了反对票，所以我添加了这个解释。

您的问题可能不是实际的重新加载，而是 Mobile Safari 在通过浏览器打开 Web 应用程序时对待用户缓存和 cookie 的方式与将其作为 Web 应用程序“安装”到主屏幕时不同。尽管此处提出的使用 localStorage 的解决方案可以工作，但如果您的服务器已经负责保持用户的会话状态，则可以避免这些工作用于客户端逻辑。 30 秒的解决方案是简单地将会话 cookie 显式设置为具有更长的生命周期。

这使您即使在设备重新启动之间也能保持状态不变，因此即使从技术上讲它不会阻止从主屏幕启动时重新加载网络应用程序，但它是一种为用户恢复状态的简单方法没有他/她注意到重新加载 - 在许多情况下我怀疑这是真正的问题。

有关此策略和代码示例的更详细讨论，请查看以下问题和我的答案：

【讨论】：

我相信这里的问题略有不同。当您加载从主屏幕启动的页面时，它相当于单击加载 url 的书签，会话无关紧要。这将导致页面重新加载并丢失状态，除非它以其他方式持久化和加载。
嗨，克里斯，就我而言，这工作得很好。除了会话 cookie，我没有使用任何其他形式的本地存储或缓存，当我关闭并重新启动设备时，状态甚至会恢复。我只使用安装到主屏幕的网络应用程序。我的解决方案不适合你吗？
不，我和 OP 有同样的问题，必须实施基于 localStorage 的解决方案。我已经使用您的解决方案来保持会话，但它对状态没有帮助，书签 URL 总是重新加载。我想知道是否可能还有其他区别？
当然 URL 总是重新加载；这只是在应用程序切换（甚至重新启动设备）期间保持会话活动的一种方式。如果您不这样做，您的站点将无法记住您之前的会话；如果你这样做，你可以保留状态服务器端并始终恢复到它。显然，如果你真的想避免做一个 http 请求，你将不得不使用某种形式的本地存储。
这不是最终的解决方案，它也只是修改 cookie...虽然有些人可能会在这里遇到变化，但很可能他们的服务器从一开始就没有设置为生产。 -1 由于缺乏或研究/理解这个问题，并认为这个答案需要放在这个页面的底部。