HTML中manifest离线缓存是什么,如何应用
Admin 2022-08-25 群英技术资�
干什么用的?
离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可以延伸到了offline领域�
应用场景
h5游戏及一些页面内容不经常会变动,相对较为固定的内容�
离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览�
HTML 5 应用程序缓存的好处:
离线浏览 � 用户可在应用离线时使用它们�
速度 � 已缓存资源加载得更快�
减少服务器负� � 浏览器将只从服务器下载更新过或更改过的资源�
浏览器支持:所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。对于移动端来说浏览器不是问题�
<!DOCTYPE html> <html manifest="demo.appcache">
manifest文件的后缀名必须为.appcache,并且和引入该manifest的页面同�
manifest 文件可分为三个部分:
CACHE MANIFEST � 在此标题下列出的文件将在首次下载后进行缓�
NETWORK � 在此标题下列出的文件需要与服务器的连接,且不会被缓�
FALLBACK � 在此标题下列出的文件规定当页面无法访问时的回退页面(比� 404 页面�
manifest文件示例�
1 CACHE MANIFEST 2 #v0.0.1.1 3 /mobile/style/zxx.css 4 /mobile/js/jquery.min.js 5 /mobile/js/jquery.lazyload.min.js 6 /mobile/js/zxx.js 7 /mobile/style/fonts/icomoon.svg 8 /mobile/style/fonts/icomoon.eot 9 /mobile/style/fonts/icomoon.ttf 10 /mobile/style/fonts/icomoon.woff
11 NETWORK: 12 *
13 FALLBACK: 14 /html5/ /404.html
manifest 解读
第一行代码CACHE MANIFEST 是必需的。紧跟着� #v0.0.1.1 可以看作是版本号,这个你可以随便写的,它的作用就是用于文件的更新。后面的就是你要设置的允许本地缓存的资源,当一些较大的,不常改动的文件设置成本地缓存资源是一种不错的选择。(缓存清单的文件列表可以使用绝对路径或绝对URL地址�
第二个代码块
NETWORK: *
这段代码的意思是除是前面设置的文件可缓存外,其它的文章都必需连网才可以访问�
最后一�
FALLBACK: /html5/ /404.html
FALLBACK � 在此标题下列出的文件规定当页面无法访问时,则� “offline.html� 替代 /html5/ 目录中的所有文�
最后一块代码FALLBACK可写可不写。但第二块代码就必需写,不写的话,除了设置了可缓存的文件可以读取外,其它文件都读取不到的�
appcache文件文件配置好后,最后一步就是在HTML文件中调用了。在你想设置缓存的页面在<html>标签引用这个文件就大功告成了�
被缓存的文件可以使用谷歌浏览器进行查�: f12 -> Application -> Application Cache
浏览器第一次读取到页面有demo.appcache文件时,在加载页面之前去检查application Cache是否有缓存,有则优先加载缓存,没有则会在其他资源加载完后再把demo.appcache文件及里面所规定的静态资源一并存� application Cache 之中。且也会把当前页面的html直接读出来存入application Cache中,其类型为master�
用户再次联网打开页面时,页面加载到manifest时,会对manifest配置文件进行脏检查,当检测到manifest文件被修改后,之前的缓存将会被弃用,转而去根据manifest文件中配置的新内容进行缓存。如果断网打开页面,会优先读取 application Cache,有缓存就直接读出来,不会提示断�
但是问题是,当前的html页面也会跟着cache直接读出来了,可能会造成即使 我们的页面更新了,但是用户还是看的老旧版本页面(因为更新mainfest的时候,页面加载已经开始了,但是缓存更新却尚未完成,浏览器还是会使用缓存的资源,当浏览器检测到了Application Cache有更新时,本次不会使用新的资源,下一次才会进行使用)�
通过添加updateready事件监听,当监听到本地缓存更新后,进行重载页面,以达到更新的目的�
applicationCache.addEventListener("updateready",function(){ applicationCache.swapCache(); // 手工更新本地缓存 location.reload(); //重新加载页面页面 },true);
要将离线缓存下线,我们只需要将服务端的manifest文件删除即可,同时也要将HTML中的 manifest="manifest.appcache" 删除(不删也可以,会在console控制台报错,但不会影响页面访问),删除后用户再第一次访问还是原来的缓存页面,还需要再刷新一次。。�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
1、不带任何提示关闭窗口的js代码1<inputtype="button"name="close"value="关闭"onclick="window.close();"/>2、自定义提示关闭1<scriptlanguage="javascript">2//这个脚本是ie6和ie7通用的脚�3functio
这篇文章主要介绍了html如何对span设置宽度,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
现在很多网页都会添加弹窗效果,很多新手好奇要如何实现这个效果,以下图展示效果为了,也就是弹窗居中且背景半透明,这应该如何实现呢?下面就分享一个使用CSS实现的代码,感兴趣的朋友就继续往下看吧�
我们知道使用CSS可以实现很多特效,这篇文章就给大家分享一个使用css做一个波动水球的特效的内容,小编觉得比较有趣,实现效果及代码如下,感兴趣的朋友就继续往下看吧�
学习css的朋友应该都有听过css选择符,css选择符就是指要修改的元素,比较常用的选择符是,标签选择符,类选择符,ID选择符等等。其实ccs选择符是有利于提高代码质量的,下面我们一起深入了解css选择符�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078