分享更有价值
被信任是一种快乐

初学者怎么使用Application Cache

文章页正文上

这篇文章主要介绍“初学者怎么使用Application Cache”,在日常操作中,相信很多人在初学者怎么使用Application Cache问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”初学者怎么使用Application Cache”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!对于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,可以在你的配置文件中加入如下代码:或者,如果你的应用是在Google App Engine中,那么在app.yaml文件中加入代码:MANIFEST FILE的结构一个简单的manifest文件看起来可能是下面这样的:CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js这个示例将会缓存指定使用这个manifest的页面中的四个文件。有几点是需要注意的:◆必须在***行包括 CACHE MANIFEST 字符串。◆站点所能缓存的数据上限是5MB 。但是,如果你是在为Chrome Web Store做开发的话,你可以使用unlimitedStorage 来去除这个限制。◆如果manifest文件或者是其中指定的某个资源下载失败的话,整个cache的更新都会失败。在这种情况下,浏览器将会使用老的application cache。下面来看一个更复杂的例子:以“#”开头的都是注释,这些注释还可以起到另外的作用。一个应用只有在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),这个页面将会在用户试图离线访问网站根节点时显示。它还指明了需要联网使用的其他资源(如远程站点上的资源)。注意:引用了你的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的当前状态:为了通过编程更新cache,首先调用 applicationCache.update()。这将会试图更新用户的cache(要求manifest文件已经改变)。***,当 applicationCache.status 处于 UPDATEREADY 状态时,调用applicationCache.swapCache(),旧的cache就会被置换成新的。注意:像这样使用 update()和sw免费云主机、域名apCache()并不会将更新后的资源呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新,然后下载指定的更新内容,重新填充app cache。因此,要让用户看到更新后的内容,需要两次页面下载,一次是更新app cache,一次是更新页面内容。好消息是,你可以避免两次页面下载带来的麻烦。为了让用户能看到你的站点的***版本,设置一个监听器来监听页面加载时的updateready 事件。APPCACHE事件(APPCACHE EVENTS)也许你已经想到了,还有更多事件可以反映出cache的状态。在诸如下载、app cache更新、出现错误等事件都会让浏览器触发相应事件。下面的代码片段为每一类cache event都设置了监听器:如果manifest文件或者该文件中指定的某个资源下载失败,那么整个更新都会失败。在这种情况下,浏览器会继续试用老的application cache。到此,关于“初学者怎么使用Application Cache”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: Vue如何使用Array.from快速生成数组

这篇文章给大家分享的是有关Vue如何使用Array.from快速生成数组的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用 Array.from 快速生成数组一般我们生成一个有规律的数组会使用循环插入的方法,比如使用时间选择插件时,…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册