摘要

Application Cache是浏览器自己的一种机制，随着移动互联网时代的到来，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。不仅能提高用户体验，而且在有网络时，也能直接访问本地文件，减少网络请求，节省流量。

Manifest

manifest 属性规定文档的缓存 manifest 的位置。

例如：

<!DOCTYPE html>

<html manifest="manifest.appcache">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="js/test.js"></script>

    <link href="css/main.css" rel="stylesheet" />

</head>

<body>

    <h1>Hello world</h1>

</body>

</html>

应用程序缓存使得应用程序有三个优点：

  1. 离线浏览 - 用户可以在离线时使用应用程序
  2. 快速 - 缓存的资源可以更快地加载
  3. 减少服务器加载 - 浏览器只从服务器上下载已更新/已更改的资源

manifest 属性应该被 Web 应用程序中您想要缓存的每个页面包含。

manifest 文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。

简单语法

<html manifest="URL">

url可以是绝对路径，也可以是相对路径。

manifest文件内容，分为三部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存。
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

例如一个完整的manifest内容如下：

CACHE MANIFEST

#2018-04-16 v1.0.0

/css/main.css

/js/test.js

NETWORK:

test.html

FALLBACK:

404.html

注意：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个js，css文件，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

发布

发布站点，部署在iis上。

添加mini-type类型，类型必须为：text/cache-manifest

浏览，如果在谷歌浏览器中，我们可以通过访问chrome://appcache-internals/，查看缓存的本地的资源文件

此时没有缓存任何资源文件。

访问我们发布的站点。

也可以通过f12查看网络请求。

如果是，你需要修改页面的样式或者js文件，如果希望该文件重新缓存，那么你也必须修改mainifest文件，修改日期和版本号。

比如上面的css和js文件是一个空文件，那么现在我们添加一个函数，然后查看本地缓存的js文件是否改变

function getDate() {

    alert("2018-04-17")

};

getDate();

通过更新manifest文件中的版本号，是比较方便的一种方式，同样也可以通过js文件来控制

window.applicationCache.update();

总结

离线应用优点：1、离线浏览 。2、快速。3、减少服务器请求。

在更新文件的时候需要注意，需要更新manifest文件版本号。

如何通过js更新本地缓存，可以参考这篇文章：

https://www.cnblogs.com/PeterSpeaking/p/5912221.html

体验h5离线缓存的更多相关文章

  1. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  2. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  3. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  4. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  5. H5离线缓存技术

      HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...

  6. H5离线缓存基础系列

    1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...

  7. H5离线缓存(基础)学习指南

    离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...

  8. h5离线缓存

    离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...

  9. H5 应用程序缓存(离线缓存)

    离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该 ...

随机推荐

  1. 高通Trustzone and QSEE介绍

    http://blog.csdn.net/iamliuyanlei/article/details/52625968

  2. 四、vue语法补充

    1.自定义过滤器 格式: {{ msg | filters}} 2.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter <!DOCTYPE html> ...

  3. MongoDB：数据导入CSV文件之错误记录

    测试主机1:Windows 10,MongoDB 3.6.3,WPS 10.1,Notepad++ 7.5.3, 测试主机2:Ubuntu 16.04,MongoDB 4, 今天测试了将数据从文件—— ...

  4. Python_oldboy_自动化运维之路_线程，进程，协程（十一）

    本节内容: 线程 进程 协程 IO多路复用 自定义异步非阻塞的框架 线程和进程的介绍: 举个例子,拿甄嬛传举列线程和进程的关系: 总结:1.工作最小单元是线程,进程说白了就是提供资源的 2.一个应用程 ...

  5. 在android 5.0以上，如何判断当前应用是在前台还是后台

    今天在做项目时遇到这个问题,本来很简单的,但是在Android 5.1 的系统上运行却出错了,在网上查找答案后发现原来是在android 5.0 之后getRunningTask()方法被废弃,失效了 ...

  6. Vue零散知识点

    1.vue中的<router-view></router-view>的作用,它是和vue的路由相结合的,它的作用是将路由匹配到的组件渲染在里面.比如说你要跳转,如何没有< ...

  7. Java 接口关键字 interface

    interface这个关键字产生一个完全抽象的类,它根本就没有提供任何具体的实现,它允许创建者确定方法名.参数列表和返回类型,但没有任何方法体,接口只提供了形式,而未提供任何具体实现 一个接口表示:& ...

  8. Laravel 自定义创建时间、更新时间字段

    Model 中,如果启动了 timestamps public $timestamps = true; 默认,laravel 会操作对应数据表的 created_at, updated_at 字段. ...

  9. MediatR 中介模式

    使用MediatR完成基于内存级别的消息发布订阅 在微服务架构中领域驱动模型中处理领域事件的相关操作 在区分好领域模型后,就拿代码中来说嘛,用户领域中添加用户操作可能或存在跟用户相关的一些领域事件,在 ...

  10. 【算法】后缀自动机(SAM) 初探

    [自动机] 有限状态自动机的功能是识别字符串,自动机A能识别字符串S,就记为$A(S)$=true,否则$A(S)$=false. 自动机由$alpha$(字符集),$state$(状态集合),$in ...