HTML5 离线缓存manifest浅析

最新推荐文章于 2024-06-04 09:43:35 发布

昕鸿

最新推荐文章于 2024-06-04 09:43:35 发布

阅读量6.7k

点赞数 1

分类专栏： html5 文章标签： html5 缓存 manifest grunt-manifest

本文链接：https://blog.csdn.net/szs860806/article/details/70171772

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近公司项目开发app内嵌入H5应用，由于公司网络不佳，导致开发的H5应用首页加载时快时慢，体验效果不佳，和原生app相比感觉区别很大。以前学习了解H5的时候对H5的缓存有点印象，故就有了把首页缓存在客户端本地的想法，这样可以保证首页、js-lib、图片的快速加载。这才有了这篇基础文章。

1、简介

W3C官方对manifest的介绍是HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

在使用过程中我总结了几个缺点：

manifest中cache部分不能使用通配符，如果缓存页引入大量JS，图片，写起来比较麻烦，虽然可以使用grunt-manifest自动生成
如果页面是通过ajax请求拼接出来的页面中含有图片，这些图片又是从web上传的，这些图片也必须写入缓存文件，否则下次就读不出来了。大大降低了实用性

2、mainifest实例

html中写法

<!doctype html>
<html manifest="index.manifest">
<head>
<meta charset="utf-8">
<title>应用中心</title>

注意：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件可分为三个部分：

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

缓存是否成功加载可以用Chrome打开这个页面就可以在控制台中找到这个manifest的工作信息：

再次请求此页面的时候：

如果有报错的话，会有提示：

3、缓存更新

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存

开发者也可以使用 window.applicationCache 的接口更新缓存

获取缓存状态：window.applicationCache.status

为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用applicationCache.swapCache()，旧的cache就会被置换成新的。

4、自动化工具

manifest中 cache部分不能使用通配符，如果缓存页引入大量JS，图片，写起来比较麻烦，这时候就可以使用自动化工具grunt-manifest。

grunt-manifest GitHub地址

grunt搭建查看：【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

安装grunt-manifest

npm install grunt-manifest --save-dev

载入：

grunt.loadNpmTasks('grunt-manifest');

实例：

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  manifest: {
    generate: {
      options: {
        basePath: '../',
        cache: ['js/app.js', 'css/style.css'],
        network: ['http://*', 'https://*'],
        fallback: ['/ /offline.html'],
        exclude: ['js/jquery.min.js'],
        preferOnline: true,
        headcomment: " <%= pkg.name %> v<%= pkg.version %>",
        verbose: true,
        timestamp: true,
        hash: true,
        master: ['index.html'],
        process: function(path) {
          return path.substring('build/'.length);
        }
      },
      src: [
      	'build/some_files/*.html',
    	  'build/js/*.min.js',
    	  'build/css/*.css'
      ],
      dest: 'manifest.appcache'
    }
  }
});

其中options定义生成manifest的一些自定义参数，src是要生成的文件，dest是输出文件。

options下有很多参数，主要参数如下：

basePath 设置出入文件的根目录

cache 手动添加缓存文件

network 手动添加网络文件

fallback 手动添加后备文件

exclude 设置不添加到cache的文件

verbose 是否添加版权信息

timestamp是否添加时间戳

5、注意事项

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
引用manifest的html必须与manifest文件同源，在同一个域下。
FALLBACK中的资源必须和manifest文件同源。
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
当manifest文件发生改变时，资源请求本身也会触发更新。
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

昕鸿

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML5 离线缓存manifest浅析

最近公司项目开发app内嵌入H5应用，由于公司网络不佳，导致开发的H5应用首页加载时快时慢，体验效果不佳，和原生app相比感觉区别很大。以前学习了解H5的时候对H5的缓存有点印象，故就有了把首页缓存在客户端本地的想法，这样可以保证首页、js-lib、图片的快速加载。这才有了这篇基础文章。1、简介W3C官方对manifest的介绍是HTML5 引入了应用程序缓存，这意味着 web 应用可进行
复制链接

扫一扫

专栏目录