Html 强制 applicationCache 重新加载缓存文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5083140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force applicationCache to reload cached files
提问by Ben Dilts
I'm using the HTML5 applicationCache to store many Javascript, CSS, image, etc. files for a page. If I update one of those files, the browser never reloads it. I have tried the following:
我正在使用 HTML5 applicationCache 为页面存储许多 Javascript、CSS、图像等文件。如果我更新这些文件之一，浏览器永远不会重新加载它。我尝试了以下方法：
- Calling applicationCache.update() on page load
- Listening for applicationCache's updateready event, and calling swapCache() and window.location.reload()
- Adding a timestamp comment to the manifest file itself to force the browser to realize the manifest has changed
- 在页面加载时调用 applicationCache.update()
- 监听 applicationCache 的 updateready 事件，并调用 swapCache() 和 window.location.reload()
- 向清单文件本身添加时间戳注释以强制浏览器意识到清单已更改
Surely this can't be this hard. How do I convince the browser to re-request some cached file?
当然，这不可能这么难。如何说服浏览器重新请求某些缓存文件？
回答by Peter Lubbers
To force any new (or changed) file to be downloaded, you must update the manifest file (add a version number comment or any change will do).
What's probably happening is that you're getting an error. The most common one is that you might not be serving the manifest with the right mime type (text/cache-manifest). Did you configure your server correctly? The easiest way to check this is to open the page in Chrome and look in the console and the resources tab under AppCache to see if there is an error (it will complain about the file being served up incorrectly. You can also test it with the curl -I command:
要强制下载任何新的（或更改的）文件，您必须更新清单文件（添加版本号注释或任何更改都可以）。可能发生的情况是您遇到错误。最常见的一种是您可能没有使用正确的 MIME 类型 ( text/cache-manifest)提供清单。您是否正确配置了您的服务器？检查这个最简单的方法是在 Chrome 中打开页面，在控制台和 AppCache 下的资源选项卡中查看是否有错误（它会抱怨文件被错误地提供。您也可以使用curl -I 命令：
curl -I $manifest_file_URL
It is also possible that your manifest file is getting cached (you can set the expires headers for it to expire rightaway). Also keep the reloading sequence in mind: your page will load from AppCache first (if it is there), then the browser checks if the manifest file is updated. If it is, download and place in the new version of the cache, but this will not automatically update the page (nor will swapCache()), you will have to refresh the page (at least) once more.
您的清单文件也有可能被缓存（您可以设置 expires 标头使其立即过期）。还要记住重新加载顺序：您的页面将首先从 AppCache 加载（如果存在），然后浏览器检查清单文件是否已更新。如果是，请下载并放入新版本的缓存中，但这不会自动更新页面（也不会swapCache()），您将不得不（至少）再次刷新页面。
See also this presentationfor more information on the topic.
另请参阅此演示文稿以获取有关该主题的更多信息。
回答by xgretsch
With Google Chrome, if you're just doing this while debugging, there's a simple workaround: use an incognito window. When you change something in your cache, close the incognito window (if you have more than one, make sure you close all of them), reopen it and go to your application. This will now download from clean, including all your changed files.
使用 Google Chrome，如果您只是在调试时执行此操作，则有一个简单的解决方法：使用隐身窗口。当您更改缓存中的某些内容时，请关闭隐身窗口（如果您有多个，请确保关闭所有窗口），重新打开它并转到您的应用程序。现在将从干净下载，包括所有更改的文件。
It's a slightly nuclear option, since it will destroy all your stored data, but it works fine for me during the process of tidying up CSS, for example.
这是一个有点核选项，因为它会破坏你所有存储的数据，但它在整理 CSS 的过程中对我来说很好，例如。
For some reason, clearing Chrome's page cache with "Clear Browsing Data" doesn't seem to work.
出于某种原因，使用“清除浏览数据”清除 Chrome 的页面缓存似乎不起作用。
回答by chulian
"you'll need to change the cache manifest file itself. This can be as simple as changing a single character" that work for me thanks!
“您需要更改缓存清单文件本身。这可以像更改单个字符一样简单”对我有用，谢谢！
回答by user2795195
I struggled with this for a while. For me the key was getting mime type and caching headers right via nginx.
我为此挣扎了一段时间。对我来说，关键是通过 nginx 获取 mime 类型和缓存标头。
in /etc/nginx/mime.types:
在 /etc/nginx/mime.types 中：
text/cache-manifest manifest appcache;
in /etc/nginx/nginx.conf:
在 /etc/nginx/nginx.conf 中：
# If the file exists as a static file serve it directly
if (-f $request_filename) {
expires -1;
break;
}
The expires -1 line causes the cache header to be set to no-cache.
expires -1 行导致缓存头设置为 no-cache。
Also, to clear the cache in Firefox 23 I used:
另外，为了清除 Firefox 23 中的缓存，我使用了：
- Firefox->Options->Options->Advanced->Network: Offline Web etc->Clear Now
- Firefox->Options->Options->Advanced->Network: Offline Web etc->Clear Now
And to see what was being fetched from the server or not:
并查看是否从服务器获取了什么：
- Firefox->Web Options->Tools->Network tab
- Firefox->Web 选项->工具->网络选项卡
回答by Nico Westerdale
for your manifest file set your HTTP header for
为您的清单文件设置您的 HTTP 标头
'Cache-Control' to 'no-store'
add a Content-Type for .manifest of
为 .manifest 添加一个 Content-Type
'text/cache-manifest'
That should do it, otherwise the browser is going to cache the manifest itself for whatever cache default you have set, so requests to check the manifest are going to retrieve a cached copy.
应该这样做，否则浏览器将为您设置的任何缓存默认值缓存清单本身，因此检查清单的请求将检索缓存的副本。
After that then change a character in the manifest file and the next request should fetch a fresh manifest.
然后更改清单文件中的一个字符，下一个请求应该获取一个新的清单。
You don't say what server you're running, but I did this for files hosted out of an S3 bucket and that did the trick, S3 normally caches for 24 hours.
你没有说你正在运行什么服务器，但我对托管在 S3 存储桶外的文件这样做了，这成功了，S3 通常缓存 24 小时。
