iOS Web App - 如何处理过度的应用缓存？

Posted 2023-03-14

【中文标题】iOS Web App - 如何处理过度的应用缓存？

【英文标题】：iOS Web App - how to deal with overzealous app caching?

【发布时间】：2013-07-08 16:52:40

【问题描述】：

在过去的一个月里，我一直在开发一个相当复杂的 html5 网络应用程序。昨晚我的iPhone 突然决定缓存所有的 JS、CSS 和图像并且不加载任何更新的副本。这也发生在我合作伙伴的iPhone 上，所以我假设它会影响我们应用的所有用户。

不用说，清除浏览器缓存、删除网络应用、重启手机和重启无线连接都无法解决问题。

删除<meta name="apple-mobile-web-app-capable" content="yes"> 可以解决问题，但会产生一个新问题，因为我们需要应用像...一样运行。

我们也不打算将旧技巧?number 附加到我们所有脚本、样式表和图像的末尾。这是荒谬的。另外——如果我们要实现这样的东西，它必须是某种动态的 JS 实现。我们的应用程序是一个加载大多数脚本的 HTML 页面，并且附加页面是 AJAX 的，附加数据也是通过 AJAX 获得的。我想这可以做到，但我希望有一个更优雅的解决方案。你知道，我觉得我不应该做任何事情，因为这一切都顺利进行了整整一个月。

使用cache-control、expires 和pragma <meta> 标签对我们也没有任何好处，因为这纯粹是一个ios Web 应用程序问题。缓存在移动 Safari、移动 Chrome 和所有桌面浏览器中正常工作。 iOS 似乎为用户无法清除的应用程序（包括 Web 应用程序）设置了单独的缓存。

似乎很多SO用户都遇到过这个问题，但是我找不到任何满意的解决方案。有没有遇到类似情况的人解决了这个问题？我可以使用清单文件指定 not 来缓存多个文件吗？似乎清单文件被用来做相反的事情。

【问题讨论】：

确认在 iOS7 中仍然是一个（巨大的）问题

你在使用HTML Application Cache吗？如果没有，您可以通过创建包含您需要更新的文件的 appcache 清单来“欺骗”iOS Web 应用缓存转储缓存。然后，当您需要进行更改并测试更改时，通过更改 Web 服务器上清单文件的名称来禁用清单。这会使存储的清单和缓存文件无效，因为无法找到服务器上的清单。

不使用应用程序缓存，也不使用清单。该网络应用程序用于“生产”环境。不可能在现有安装中的某处更新我们的系统并更改文件名以欺骗缓存。在我的开发环境中，我可以轻松地在文件名中添加一些数字进行测试，但正如 OP 所说，这在生产环境中是不可能的

我也有这个，如果我在 Safari 中打开 URL，它会加载最新的 JS。一旦我将它作为 Web 应用程序添加到主屏幕，它就会再次开始使用旧的 JS。太可怕了。

【参考方案1】：

对于它的价值，它不是一个完美的解决方案，我们不得不通过附加查询字符串来解决。我编写了一个 shell 脚本来使这个和其他一些任务更加自动化，你可以在GitHub 上查看源代码。一些细节：

它是为 JS 设计的，但也可以轻松编辑以处理 CSS。 它获取script_order.txt 中列出的所有文件并使用 Google 的 Closure Compiler 编译它们 尽可能将它们分组到 25kb 以下的块中（iPhone 不会缓存超过 25kb 的 pre-gzip 内容，但显然这仅适用于浏览器，而不适用于独立的 web 应用程序） 输出带有<script> 标记的php 文件，该标记在脚本文件名后附加了?v=timestamp。如果您使用的是静态 HTML 并且无法包含 PHP 文件，则可以重写输出以将脚本标签附加到您的 index.html 文件中。

另一个非常老套的解决方案是将您的 JS/CSS 保存为 .php 文件扩展名，并在这些文件中将标题设置为如下所示：

<?php
header("content-type: application/javascript");
header('Cache-Control: no-cache');
header('Pragma: no-cache');
?>
window.alert('hello world');

编辑：

将日期设置为未来 2、3 或 4 天，从主屏幕启动应用程序，然后将日期设置为正常也可以。

【讨论】：

您确定您的回答与问题有关吗？我不知道 OP 但我没有 PHP 网络服务器。可以使用 javascript 轻松地将时间戳添加到文件名中。问题清楚地写着We're not going to go around appending the old trick ?number to the end of all our scripts, stylesheets, and images either. That's ridiculous.

@bart-s 我是 OP。就像我说的那样，即使我不想，我们也必须解决查询字符串。当然，用 JS 添加时间戳很容易，但 shell 脚本至少可以帮助跨许多开发系统和登台/生产环境自动化部署过程。这里不需要 PHP。只是把我的解决方案扔在那里，以防你从中挑选有用的部分，但显然情况并非如此。相信我，我能感受到你的痛苦。

我一定忽略了你是 OP。缓存是荒谬的。即使您能够在浏览器中正常工作，保存到主屏幕仍会从缓存中获取内容。我发现了另一个将日期设置为未来的技巧。添加到您的答案中以允许我删除 -1

别担心，伙计。真是太可惜了——我们不应该求助于聪明的小变通方法来让如此标准的东西在这样的标准设备上工作。感谢您分享您的技巧，我会尝试一下。

将日期设置为未来然后再次返回对我来说是一种享受，谢谢你 bart s :)