美文网首页
manifest(离线缓存)

manifest(离线缓存)

作者: 方豆儿 | 来源:发表于2017-10-24 20:29 被阅读0次

1、起源

H5之前,所有的网页都必须联网才能访问。PC端没问题,在移动端网络的可靠性变低

2、manifest是什么

  • manifest是一个同名后缀为manifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,将会按照manifest文件的规则进行保存数据,从而在没有网络的情况下,也可以访问
  • 当第一次正确配置app cache/manifest.manifest后,再次访问该应用时,浏览器会首先检查manifest是否有变动,如果有变动,则把相应的变化更新下来,同时改变浏览器的app cache,如果没有变动,就会直接把app cache 的资源返回

特点

1、离线浏览:用户可以在离线状态浏览网站旧数据
2、更快的速度:因为数据存储在本地,所以速度更快
3、减轻服务器的负载:浏览器指挥下载在服务器上发生改变的资源

兼容情况

所有主流浏览器都支持离线缓存,除了个性的IE

使用

a.在html标签中添加一个manifest属性,用来指定当前页面的manifest文件
b.创建一个和html同名的manifest文件,然后给index.html文件添加属性
<html manifest='index.manifest'>
c.html设置完成,后面去操作manifest文件

manifest文件的编写

典型写法
CACHE MANIFEST
  #version1.3
  index.css
  index.js
  index.html

使用注意事项

  • 浏览器器对缓存数据的容量限制可能不太一样某些浏览器限制是每个站点5MB
  • 如果manifest文件,或者内部列列举的某一个文件不能正常下载,整个更新过程将失败,继续使用老的缓存
  • 引用manifesthtml必须与manifest文件同源,在同一个域下
    -FALLBACK中的资源必须和manifest文件同源
  • 当一个资源被缓存后,该浏览器直接请求整个绝对路径也会访问缓存中的资源
  • 站点的其它页面即时没有manifest属性,请求的资源如果在缓存中也从缓存中访问
  • manifest文件发生改变的时,资源请求本身也会触发更新

相关文章

  • HTML5离线缓存相关文章

    HTML离线缓存-manifest简介有趣的HTML5: 离线存储

  • manifest(离线缓存)

    1、起源 H5之前,所有的网页都必须联网才能访问。PC端没问题,在移动端网络的可靠性变低 2、manifest是什...

  • manifest离线缓存

    1.起源: H5之前,所有网页都必须联网才能访问 PC端没问题,在移动端网络的可靠性变...

  • 离线缓存(manifest)

    Html5 引入了应用程序缓存,这意味着web应用可以进行缓存,并且可以在没有网络连接的时候进行访问。1.1 什么...

  • PWA离线缓存和浏览器缓存

    manifest_html5_离线缓存:https://yanhaijing.com/html/2014/12/2...

  • manifest 离线缓存实践

    资讯类App,每次打开一个详情页,客户端总得新建一个webview实例。使用hybird模式开发,且没有使用本地模...

  • HTML5 应用程序缓存

    使用应用程序缓存,通过创建cache manifest文件,可轻松创建Web应用的离线版本。 什么是应用程序缓存?...

  • 前端面试备考(基础题)

    Html 1. HTML5离线存储和本地缓存 离线存储 test.manifest内容 提示:在服务器上添加MIM...

  • HTML5的应用程序缓存、客户端存储数据?

    (1)应用程序缓存: 通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。所有主...

  • 缓存 manifest

    manifest 应用缓存 .appcachecache manifest缓存;network不缓存;fallba...

网友评论

      本文标题:manifest(离线缓存)

      本文链接:https://www.haomeiwen.com/subject/ohuvuxtx.html