体验h5离线缓存

摘要

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上。

体验h5离线缓存

添加mini-type类型,类型必须为:text/cache-manifest

体验h5离线缓存

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

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

体验h5离线缓存

访问我们发布的站点。

体验h5离线缓存

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

体验h5离线缓存

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

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

function getDate() {
alert("2018-04-17")
};
getDate();

体验h5离线缓存

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

window.applicationCache.update();

总结

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

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

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

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

上一篇:python3学习笔记(9)_closure


下一篇:小白从零开始阿里云部署react项目+node服务接口(三:部署到服务器)