初学者怎么使用ApplicationCache

这篇文章主要介绍“初学者怎么使用Application Cache”，在日常操作中，相信很多人在初学者怎么使用Application Cache问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”初学者怎么使用Application Cache”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联从2013年创立，先为晋宁等服务建站，晋宁等地企业，进行企业商务咨询服务。为晋宁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

对于web  app来说，离线应用功能已经越来越重要。诚然，浏览器本身就有缓存机制，但是，这些缓存机制不够可靠，可能并不会按你所想要的方式运行。HTML5则通过ApplicationCache接口处理了离线应用中的一些问题。

使用这个接口让你的应用拥有三方面的优势：

◆ 离线浏览——用户在不能联网的时候依然能浏览整个站点

◆ 高速——缓存资源是存储在本地的，因此能更快加载。

◆ 更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可，相同资源不需要重复下载。

Application Cache(或  AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时，即使他们按了刷新按钮，你的应用也能正确加载和工作。

CACHE MANIFEST 文件

cache manifest文件是一个简单的文本文件，其中列出了浏览器需要缓存的资源。

引用一个MANIFEST文件

为了让一个应用能启用application cache，需要在文档的html标签中包含manifest属性，如下所示：

    …  

你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有  manifest属性，它将不会被缓存(除非在manifest文件中显式指定了这个页面)。这意味着只要用户访问的页面包含manifest属性，它都将会被加入application  cache中。这样，就不用在manifest文件中指定需要缓存哪些页面了。

Manifest属性可以指定一个绝对URL或是一个相对路径，但是，一个绝对URL需要和web  app是同源的。一个manifest文件可以是任何扩展文件类型，但必须有正确的mime-type。如下所示：

   … 

一个manifest文件需要正确的mime-type，即text/cache-manifest。你可以在你的web服务器中加入一个定制文件类型(a  custom file type)，或者加入一个 .htaccess 配置。

例如，为了在Apache中能够解析这种mime-type，可以在你的配置文件中加入如下代码：

AddType text/cache-manifest .appcache

或者，如果你的应用是在Google App Engine中，那么在app.yaml文件中加入代码：

- url: /mystaticdir/(.*\.appcache)   static_files: mystaticdir/\1   mime_type: text/cache-manifest   upload: mystaticdir/(.*\.appcache)

MANIFEST FILE的结构

一个简单的manifest文件看起来可能是下面这样的：

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

这个示例将会缓存指定使用这个manifest的页面中的四个文件。

有几点是需要注意的：

◆ 必须在***行包括 CACHE MANIFEST 字符串。

◆ 站点所能缓存的数据上限是5MB 。但是，如果你是在为Chrome Web Store做开发的话，你可以使用unlimitedStorage  来去除这个限制。

◆ 如果manifest文件或者是其中指定的某个资源下载失败的话，整个cache的更新都会失败。在这种情况下，浏览器将会使用老的application  cache。

下面来看一个更复杂的例子：

CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached ‘master entries’. CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html

以“#”开头的都是注释，这些注释还可以起到另外的作用。一个应用只有在manifest文件发生变化时才会更新cache。例如，如果你编辑了图像或是改写了一个Javascript函数，cache并不会发生更新。你必须改写manifest文件本身来通知浏览器需要更新cache文件了。通过在manifest文件中添加一行注释，在其中写上版本号，或者文件hash值，或者时间戳，你都可以确保用户拥有你的软件的***版本。如果有新版本出现，你同样可以以编程的方式更新cache，就跟在Updating  the cache 中所讨论的那样。

一个manifest文件可能包括三个部分：CACHE, NETWORK 以及 FALLBACK.

CACHE:

这是默认部分，列在这个条目下的文件(或者紧跟在CACHE MANIFEST字符串之后的)都会在***次被下载后进入cache。

NETWORK:

这一部分中所列出的资源都是需要联网使用的资源。它们都不会进入cache中，即使用户处于离线状态。这部分可能会使用Wildcards。

FALLBACK:

可选部分，指定了如果资源获取失败，将会呈现怎样的页面。***个URL是资源，第二个就是fallback页面。两个URL都必须是相对地址，并且由同一个manifest文件指定。可以使用Wildcards。

注意：这三部分可以以任何顺序在manifest文件中出现，并且每部分都可以在一个manifest文件中出现多次。

下面的manifest文件定义了一个“catch-all”页面(offline.html)，这个页面将会在用户试图离线访问网站根节点时显示。它还指明了需要联网使用的其他资源(如远程站点上的资源)。

CACHE MANIFEST # 2010-06-18:v3 # Explicitly cached entries index.html css/style.css # offline.html will be displayed if the user is offline FALLBACK: / /offline.html # All other resources (e.g. sites) require the user to be online. NETWORK: * # Additional resources to cache CACHE: images/logo1.png images/logo2.png images/logo3.png

注意：引用了你的manifest文件的HTML文件都会自动被缓存，因此，没有必要在你的manifest文件中再指定这个文件，但是，在manifest文件中指定这个文件是一种更好的做法。

注意：页面上基于SSL的HTTP cache headers以及caching restrictions都会被cache  manifests重写。因此，基于https的页面也能离线工作。

更新缓存(CACHE)

如果一个应用是在离线情况下，那么它会保持它的缓存状态，除非有以下事件发生：

◆ 用户清除了浏览器中存储有你的站点的数据。

◆ manifest file  被修改了。注意：修改了在manifest文件中列出的某个文件并不会让浏览器重新缓存资源。必须是manifest文件本身改变了，才会重新进行缓存。

◆ app cache通过编程更新了。

缓存状态CACHE STATUS

在程序中，你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status  属性来获取cache的当前状态：

var appCache = window.applicationCache; switch (appCache.status) {   case appCache.UNCACHED: // UNCACHED == 0     return ‘UNCACHED’;     break;   case appCache.IDLE: // IDLE == 1      return ‘IDLE’;     break;   case appCache.CHECKING: // CHECKING == 2     return ‘CHECKING’;     break;  case appCache.DOWNLOADING: // DOWNLOADING == 3     return ‘DOWNLOADING’;     break;   case appCache.UPDATEREADY:  // UPDATEREADY == 4     return ‘UPDATEREADY’;     break;   case appCache.OBSOLETE: // OBSOLETE == 5     return ‘OBSOLETE’;     break;   default:     return ‘UKNOWN CACHE STATUS’;     break; };

为了通过编程更新cache，首先调用  applicationCache.update()。这将会试图更新用户的cache(要求manifest文件已经改变)。***，当  applicationCache.status 处于 UPDATEREADY  状态时，调用applicationCache.swapCache()，旧的cache就会被置换成新的。

var appCache = window.applicationCache; appCache.update(); // Attempt to update the user’s cache. … if (appCache.status == window.applicationCache.UPDATEREADY) {   appCache.swapCache();  // The fetch was successful, swap in the new cache. }

注意：像这样使用  update()和swapCache()并不会将更新后的资源呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app  cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。

好消息是，你可以避免两次页面下载带来的麻烦。为了让用户能看到你的站点的***版本，设置一个监听器来监听页面加载时的updateready 事件。

// 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事件(APPCACHE EVENTS)

也许你已经想到了，还有更多事件可以反映出cache的状态。在诸如下载、app  cache更新、出现错误等事件都会让浏览器触发相应事件。下面的代码片段为每一类cache event都设置了监听器：

function handleCacheEvent(e) {   //… } function handleCacheError(e) {  alert(‘Error: Cache failed to update!’); }; // Fired after the first cache of the manifest. appCache.addEventListener(‘cached’, handleCacheEvent, false); // Checking for an update. Always the first event fired in the sequence. appCache.addEventListener(‘checking’, handleCacheEvent, false); // An update was found. The browser is fetching resources. appCache.addEventListener(‘downloading’, handleCacheEvent, false); // The manifest returns 404 or 410, the download failed, // or the manifest changed while the download was in progress. appCache.addEventListener(‘error’, handleCacheError, false); // Fired after the first download of the manifest. appCache.addEventListener(‘noupdate’, handleCacheEvent, false); // Fired if the manifest file returns a 404 or 410. // This results in the application cache being deleted. appCache.addEventListener(‘obsolete’, handleCacheEvent, false); // Fired for each resource listed in the manifest as it is being fetched. appCache.addEventListener(‘progress’, handleCacheEvent, false); // Fired when the manifest resources have been newly redownloaded. appCache.addEventListener(‘updateready’, handleCacheEvent, false);

如果manifest文件或者该文件中指定的某个资源下载失败，那么整个更新都会失败。在这种情况下，浏览器会继续试用老的application  cache。

到此，关于“初学者怎么使用Application Cache”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！