碎碎念

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

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

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

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

本项目托管在 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”最好填一下,否者会在当前目录输出,可能会替换掉原文件。

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

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

Comments
Write a Comment

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟