Question

我正在关注this tutorial并在我的iPad上试用它。教程说：

您可以等待应用程序缓存自动更新或使用JavaScript触发更新。仅当清单文件更改时，应用程序缓存才会自动更新。如果清单文件中列出的资源发生更改，则不会自动更新。如果清单文件是逐字节的，那么它被认为是不变的;因此，更改清单文件的修改日期也不会触发更新。如果这对您的应用程序来说还不够，您可以使用JavaScript显式更新应用程序缓存。

因此，我一直在尝试强制更新的做法是更改清单文件中包含版本号的注释。 EG，我改变了这一行：

# Cache Manifest Version: 1.6

我的html标题如下所示：

<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
    <meta charset="UTF-8"/>
    <title>Canvas tutorial</title>

    <link rel="stylesheet" type="text/css" href="app.css">
    <meta name="viewport" content="width=640; user-scalable=no;"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

我在iPad Safari中有我的网站渲染版本，我已将其添加到我的主页。如果我做了更改，比如在html中添加一些文字到我的应用程序，那么：

我必须在safari中刷新两次以查看更改。
我必须在“添加到主页版本”中刷新两次以查看更改。
即使我在桌面上尝试使用firefox，也需要两次刷新才能看到我的更改。

为什么会这样？为什么第一次刷新不起作用？

iOS 7“添加到主页”更新

我发现这个文档不适用于iOS 7中的“添加到主页应用”。缓存决定定期刷新，据我所知，你无法控制这个（也许你用javascript做），但我没有尝试过。）

幸运的是我找到了解决方法。见这里：https://stackoverflow.com/a/19674061/61624

Answer 1

通过观察痕迹（在Chrome上）我看到浏览器不等待应用程序缓存刷新结束，以显示现有应用程序缓存中所请求的页面

然后浏览器显示以前的版本。

我想解决方案可以是：在页面中检测应用程序缓存刷新完成事件，然后以编程方式重新加载（HTML5功能）。

我发现了 http://www.html5rocks.com/en/tutorials/appcache/beginner/

以下代码可能会对您有所帮助。（代码请求刷新权限，但在您的用例中，代码可能会更新以立即重新加载。）

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

希望有帮助

为什么我的缓存webapp不会在第一次尝试时刷新更改？

iOS 7“添加到主页”更新

1 个答案: