美文网首页
HTML5 离线缓存-manifest

HTML5 离线缓存-manifest

作者: 7天苹果 | 来源:发表于2017-08-09 17:53 被阅读106次

什么是Cache Manifest?

首先manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本地,从而在没有网络链接的情况下,也能访问页面。

Manifest的特点

  • 离线浏览: 用户可以在离线状态下浏览网站内容。
  • 更快的速度: 因为数据被存储在本地,所以速度会更快.
  • 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

使用

只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

然后cache.manifest文件的书写方式,就像下面这样:

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。

浏览器怎么解析manifest

那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。

  • 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下,浏览器就直接使用离线存储的资源。

相关文章

  • HTML5离线缓存相关文章

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

  • 扣丁学堂HTML5开发manifest离线缓存示例详解

    今天扣丁学堂HTML5培训老师给大家介绍一下关于HTML5开发manifest离线缓存示例详解,目前来说离线访问对...

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

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

  • HTML5 manifest离线缓存

    简介 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作...

  • HTML5 离线缓存-manifest

    什么是Cache Manifest? 首先manifest是一个后缀名为minifest的文件,在文件中定义那些需...

  • html5 manifest 离线缓存

    **干什么用的?**离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(...

  • manifest(离线缓存)

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

  • manifest离线缓存

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

  • 离线缓存(manifest)

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

  • 二、html5应用缓存

    HTML5离线篇收藏--- cache manifest http://www.cnblogs.com/brain...

网友评论

      本文标题:HTML5 离线缓存-manifest

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