自动生成HTML5离线应用的Manifest

碎碎念

HTML5的离线应用(Offline Application)已经广为人知了。无论是用来给WebApp提供离线使用的功能,还是仅仅用来加速页面加载,离线应用都是个让人很爽的特性。

离线应用的原理什么的就不在赘述了,google一下就有很多介绍。这里主要谈下怎么生成离线应用的配置文件。离线应用需要根据服务器上的manifest配置来决定时候要离线和更新,以及判断有哪些文件需要离线。

在小型WebApp中,可以人工一个个的添加文件路径,理论上是没啥大问题。当项目大了之后,会引用很多资源、图片等,特别是图片,必须人工从css文件中找出所有url添加到manifest中。个人觉得这是件相当无聊和浪费生命的事。我自己一直在坚持着:凡是程序能自动完成的工作,绝对不人工完成。

因此,写了这个自动生成manifest的脚本 ioffline。

本项目托管在 Githup 上(https://github.com/iazrael/ioffline),感兴趣的同学可以用用。其原理很简单,根据传入的html文件,分析里面的js和css引用,并把css里面的所有图片url都提取出来,写入到manifest中。这样只要发布的时候执行一下这个脚本,就可以完成manifest的编写,还能自动生成个时间戳,让客户端去更新离线缓存。是不是很爽咧?^_^

使用方法

1. 安装

npm install ioffline

2. 配置

创建个配置文件 manifest.config.json,配置项如下:

{
	//css 文件中, 如果图片url是写了绝对路径, 也就是说 html 跟 css 或 图片不在一个域名下
	//就要设置下面这个属性
	"linkPrefix": "http://cdn.xxx.com/",//optional
	"manifestSuffix": "manifest", // optional
	"outputRoot": "./output/", //optional 默认在当前目录输出 "./", 建议填入
	"cache": { //required 必须
		"offline": [//offline 是 输出的manifest的名字,跟 manifestSuffix 组合成文件名
			"index.html"
		],
		"offline2": [
			"index.html",
			"main.html"
		]
	},
	"network": [  "*"  ],//optional
	"fallback": [ // optional
		"/ fallback.html"
	]
}

配置信息中有很多都是可选的,所以可以只用最简配置:

{
	"cache": { 
		"offline": [
			"index.html"
		],
		"offline2": [
			"index.html",
			"main.html"
		]
	}
}

PS:输出目录“outputRoot”最好填一下,否者会在当前目录输出,可能会替换掉原文件。

3. 使用

require('ioffline').generate('./manifest.config.json');
//或者
require('ioffline').generate({ /*一些配置*/ });

好了,把麻烦事抛给电脑,现在可以尽情的去玩咯。哇哈哈哈~~

一条评论
  1. [...] ioffline,生成离线应用的manifest,详见这里 [...]... imatlas.com/posts/nodejs-compiler

发表评论

请输入您的名字,邮箱帐号和评论,您的邮箱帐号会被保密,不会公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>