• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > H5应用缓存-Manifest的具体介绍

H5应用缓存-Manifest的具体介绍

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含H5,应用缓存,Manifest等相关知识,匿名希望在学习及工作中可以帮助到您

导读

Manifest 是 H5提供的一种应用http:///code/6719.html" target="_blank">缓存机制, 基于它web应用可以实现离线访问(offline cache). 为此, 浏览器还提供了应用缓存的api--applicationCache. 虽然manifest的技术已被web标准废弃, 但这不影响我们尝试去了解它. 也正是因为manifest的应用缓存机制如此诱人, 饿了么 和 office 365邮箱等都还在使用着它!

描述

对manifest熟悉的同学可以跳过此节.

鉴于manifest应用缓存的技术, 我们可以做到:

离线访问: 即使服务器挂了, 或者没有网络, 用户依然可以正常浏览网页内容.

访问更快: 数据存在于本地, 省去了浏览器发起http请求的时间, 因此访问更快, 移动端效果更为明显.

降低负载: 浏览器只在manifest文件改动时才去服务器下载需要缓存的资源, 大大降低了服务器负载.

manifest缓存的过程如下(来自网络):

支持性

主流浏览器都支持manifest应用缓存技术. 如下表格:

1474.png

H5标准中, Offline Web applications 部分有如下描述:

This feature is in the process of being removed from the Web platform. 
(This is a long process that takes many years.) 
Using any of the offline Web application features at this time is highly discouraged. Use service workers instead. [SW]

因此后续我将在其他文章中继续介绍 service workers, 本篇继续关注manifest.

如何开启应用缓存

manifest使用缓存清单进行管理, 缓存清单需要与html标签进行关联. 如下:

<html manifest="test.appcache">
  ...
</html>

在html标签中指定manifest文件, 便表示该网页使用manifest进行离线缓存. 该网页内需要缓存的文件列表需要在 test.appcache 文本文件中指定.

manifest缓存清单

就像写作文一样, manifest采用经典的三段式. 分别为: CACHE, NETWORK 和 FALLBACK. 如下, 先看一个栗子

以上就是H5应用缓存-Manifest的具体介绍的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
  • HTML5各种头部meta标签的功能(推荐)
  • 如何用H5实现一个触屏版的轮播器的实例
  • H5新属性audio音频和video视频的控制详解(推荐)
  • HTML5页面音视频在微信和app下自动播放的实现方法
  • H5 meta小结(前端必看篇)
  • 浅谈h5自定义audio(问题及解决)
  • h5调用摄像头的实现方法
  • HTML5单页面手势滑屏切换原理
  • Html5实现二维码扫描并解析

相关文章

  • 2018-12-03html5什么时候能爆发超过App,还是只会是一个美好的愿望?
  • 2018-12-03HTML5通讯录获取指定多个人的信息
  • 2017-08-06突袭HTML5之Javascript API扩展3—本地存储全新体验
  • 2017-08-0610个最常见的HTML5面试题 附答案
  • 2018-12-03作为一个前端,看到怎样的网页效果,你一定会停下来看看他的源码?
  • 2018-12-03HTML5 Canvas基本线条绘制的实例教程_html5教程技巧
  • 2018-12-03总结关于本地缓存的实例讲解
  • 2017-08-06html5 利用canvas实现超级玛丽简单动画
  • 2018-12-03HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法(图文)
  • 2018-12-03如何利用canvas实现按住鼠标移动绘制出轨迹

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用protractor测试canvas绘制(一)
    • HTML5 input元素类型:email及url介绍
    • HTML5桌面通知提示功能的实现
    • html5 canvas实现简单的双缓冲
    • 很酷的HTML5电子书翻页动画特效
    • html格式化json的实例代码
    • 现场活动中,有什么推荐的微信互动游戏?求赐教。
    • html5如何及时更新缓存文件(js、css或图片)_html5教程技巧
    • 如何在canvas里面基于随机点绘制一个多边形
    • HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有