打造离线使用的Mobile Web App
最近公司举办技术大赛，我和同事一起制作了一个叫做10K Hours的Mobile Web App，可以帮助你通过一万小时的努力，成为某个领域的专家。正好前段时间翻译了一本书《HTML5 Mobile Development Cookbook》，中文译本在此。其中讲到了不少移动端Web开发的Best Practices，正好就用到了10K Hours这个应用上。其中我觉得非常有用但是又让人头痛的一个功能就是AppCache：它可以让用户在访问一次网页以后，下次再来时不能访问网络的情况下，也可以使用这个Web App；但是当页面资源被缓存以后，非常难去更新它们??下面就是App Cache的详细介绍和使用技巧：
什么是AppCache
下面是来自W3C的解释：
In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP‘s coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user‘s browser to keep a copy of the files for use offline.
简单来说就是可以让开发者在网络出问题的情况下，可以部分或全部访问网站的静态资源。
可能有些朋友会疑惑AppCache与浏览器自动缓存和localStorage的区别，这里我简单讲一下：在默认设置下，浏览器会根据request header自动缓存静态文件，但是在请求该文件时还是会发出http request，而一旦被AppCache缓存住的文件就不会发送http request，除非人工触发缓存更新；localStorage也是一种缓存，但是它缓存的是数据，而AppCache缓存的是文件。
如何使用AppCache
要引入AppCache一般有三个步骤：
1. 声明manifest文件
manifest可以告诉浏览器网站的cache行为，下面是一个完整的manifest文件示例：
CACHE MANIFEST# Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)CACHE:index.htmlstylesheet.cssimages/logo.pngscripts/main.jsNETWORK:myApp/apihttp://api.twitter.comFALLBACK:images/large/ images/offline.jpg
CACHE MANIFEST表明该文件用于AppCache的配置，必须放在第一行
# Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)是一个时间戳，用于触发缓存文件的更新，这个会在后面详细讲到。
CACHE指定需要被缓存的文件。这些文件会被缓存到AppCache中，以后这些文件都会从AppCache中加载。
NETWORK指定不需要被缓存的文件。这些文件不会被缓存到AppCache中，一般用于一些动态的页面或数据。
注意：一些浏览器会给缓存容量加入上限，比如Chrome浏览器就是使用一个共有的缓存池，如果超出上限，以前缓存的文件有可能会被清除掉。
FALLBACK指定当网络不可用时的替代文件，这些文件在网络可用时不会从AppCache中读取，只有当网络不可用时才会从AppCache中读取。示例中指定当images/large/中的任意文件无法访问时，都从AppCache中读取images/offline.jpg文件。
我们一般使用.appcache作为manifest文件的后缀，这个是WHATWG的建议，同时也获得了更多浏览器的支持。
2. 在页面中引入manifest文件
引入manifest文件需要在html标签中加入manifest属性，其值为manifest文件地址，例如：
<html manifest="example.appcache">...</html>
注意：你需要在每个用到AppCache的页面都加入manifest属性，除非该页面就在缓存列表中，而拥有manifest属性的页面会自动被缓存住，不需要再加入缓存列表了。
3. 修改服务器端的mime-type
为了让服务器端可以正确的处理manifest文件，需要在mine-type中加入text/cache-manifest。比如在Apache服务器中，可以添加以下行到配置文件中：
AddType text/cache-manifest .appcache
更新缓存
完成manifest文件的配置以后，你会发现你的页面加载速度暴增，可以算是秒载，但是你也会悲催的发现，任何文件的修改将不会被反应到页面上，那么当我们有文件修改的时候应该怎么办呢？
修改manifest文件
有两种情况可以导致缓存更新：
- 用户清除缓存数据。
- manifest文件修改。
所以我们要更新缓存，其实只有一个办法，那就是修改manifest文件。这个时候我们就可以看到在上个例子中那个被注释掉的时间戳（# Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)）的作用了，每当任意一个被缓存的文件修改后，我们都应该修改manifest文件的时间戳，让浏览器知道有文件更改，应该更新缓存。
当浏览器检测到manifest文件更改以后，它会发起请求更新所有被缓存的文件，但是这时候还不会马上更新到页面中，还需要用户再次刷新页面，才能看到新的内容。也就是说，当我们有文件修改以后，需要用户刷新两次才能看到新的内容，这个对于用户来说是很奇怪的体验。这个时候我们可以利用AppCache提供的一些接口来解决这个问题。
AppCache接口
AppCache提供了以下的事件接口：
checking：客户端正在检查manifest文件的更新，或者尝试下载manifest文件时触发。注意：这个事件总是首先触发的。noupdate：客户端检查manifest文件，并且manifest文件没有更新时触发。downloading：客户端发现manifest文件需要更新并开始更新，或者开始下载manifest中列举的缓存文件时触发。progress：客户端下载manifest中列巨额的缓存文件时触发。cached：manifest中的文件被下载，并且被缓存以后触发。updateready：当新的缓存文件下载完成后触发，可以利用swapCache()来应用新的文件。
其中最重要的就是updateready这个事件，我们可以利用JavaScript绑定这个事件，在缓存更新的时候自动刷新来应用这些更新，例如：
// 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.// Swap it in and reload the page to get the new hotness.window.applicationCache.swapCache();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);
AppCache的Debug
当我们在本地调试的时候，我们如何知道AppCache是否起效果，并缓存了哪些文件呢？Chrome的开发者工具提供了这些信息，打开开发者工具，在Resource => Application Cache中就可以看到缓存了哪些文件，如下图所示：
但是在这里不能对Cache进行删除操作，也不能看到其他网站的Cache。如果想看到所有网站的AppCache信息，并且删除其中某一个的话，可以进入chrome://appcache-internals/，这个管理页面会列出所有浏览器中的AppCache信息，包括manifest地址、缓存大小、更新时间、创建时间等等??
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
