客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
理解： 离线存储可以将站点的文件储存在本地，在没有网络的情况下还是可以访问到存储的对应的站点的页面，这些文件可以包括html，js，css，img等等文件。但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件。 什么是Manifest： Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。 Manifest 的特点：
Manifest的使用： 创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可： <html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest"> manifest 的引入可以使绝对路径也可以是相对路径，如果你使用的是绝对路径，你的manifest文件必须和你的站点挂在同一个域名下。 <html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache"> 在服务器上部署时需要在服务器上添加相应的mie-type。 manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。 Manifest文件结构： manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。 而第一行CACHE MANIFEST为固定格式，必须写在前面。 以#号开头的是注释，可以是版本号，时间戳等等。一般会在这写个版本号，用来在缓存的文件更新时，更改manifest的作用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了 更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。
CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
1、第一行是CACHE MANIFEST 这是必须需要的。 2、CACHE（必须） 标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。这里列举出来的文件，当第一次加载下来时，会被浏览器缓存在本地。 3、NETWORk 这一部分是要绕过缓存直接读取的文件，可以使用通配符 ，大多数网站使用 * 。 当使用 时 表示出 CACHE指定文件外，其它所有页面都需要联网访问。 4、FALLBACK （可选） 当资源无法访问时，浏览器使用后备资源去替代。第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。 下面的例子中，如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。 FALLBACK: 下面的例子中，当任何页面无法访问时跳转到 “404.html”页。 FALLBACK: 注意： 1 必须在第一行 2、3、4 直接的顺序是随意的，并且在同一个manifest文件中可以出现多次，多次和一次效果一样。 如何更新缓存
给manifest添加或删除文件，都可更新缓存，如果我们更改了js，而没有新增或删除，前面例子中注释中的版本号，可以很好的用来更新manifest文件。 window.applicationCache.update(); 如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。 我们可以使用代码手动更新manifest缓存，一旦webapp源码更新，会自动更新本地manifest缓存，使用户始终访问到最新的源码。
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
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);
到此这篇关于H5离线存储Manifest原理及使用的文章就介绍到这了,更多相关H5离线存储Manifest内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！ |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论