轩枫阁

前言

本文介绍H5离线存储的应用点——利用应用程序存储实现进度加载提示。

Stackedit

上文中提到stackedit这个编辑器也运用了离线存储，以下是程序所需要加载的文件。

Chrome插件安装：https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg

直接访问：https://stackedit.io/editor 查看全文

离线Web应用

离线Web应用指的是在浏览器处于离线的状态下依然能正常打开已经进行应用程序缓存的程序。

应用点

如时钟、可离线游戏等，可以在直接在本地运行。可使用localStorage来存储应用数据，在有网络的情况下再将游戏的最高分上传至服务器，实现多设备共享数据。

有一个典型的案例，就是stackedit在线markdown编辑器（文章介绍），程序将文本使用localStorage存储起来，离线状态下照常可编辑；当在线的时候，可以将文本同步至如Google Drive，实现多设备共享，非常优秀的作品。

是否在线

为了在离线状态下可用，需要知道Web应用当前是离线还是在线状态，同时当网络连接的状态发生改变时也能感知到。通过navigator.online属性，可以检测浏览器是否在线。同时，在windows对象上注册在线和离线事件的处理程序，可以检测网络连接状态的改变。

例子解析

通过一个简单的记事本程序——PermaNote，来解释如何使用。程序将用户的文本保存到localStorage中，并且在网络连接可用的时候，将其上传到服务器，PermaNote只允许用户编辑单个笔记。

PermaNote应用包含3个文件，一个应用清单文件、一个html页面文件，一个实现逻辑的js文件。

查看全文

应用程序存储和Web应用

应用程序缓存，允许Web应用将应用程序文件本地保存到用户的浏览器中。不像localStorage和sessionStorage只是保存Web程序相关的数据，它是将应用程序自身保存起来——应用程序的所有文件（HTML、CSS、JS、图片等）。

应用程序缓存和一般的浏览器缓存不同，它不会随着用户清除浏览器缓存而被清除。同时，缓存起来的应用程序也不会像一般固定大小的缓存那样，老数据会被最近一次访问的新数据代替掉。它其实不是临时存储在缓存中：应用程序更像是被安装在那里，除非被用户“卸载”或者“删除”，否则它就会一直存在。所以，总的来说，应用程序缓存在真正意义上不是缓存，应该称之为“应用程序存储”。

Web应用能够实现“本地安装”的目的是要保证它能够在离线状态（如在飞机上或者手机没信号的时候）下依然可访问。将自己“安装”到应用程序缓存中的Web应用，在离线状态下使用localStorage来保存应用相关的数据，同时还具备一套同步机制，在再次回到在线状态的时候，能够将存储的数据传输给服务器。

应用程序缓存清单

应用程序缓存清单：包含所有应用程序所依赖的所有URL列表。

可以在应用程序主HTML页面的标签中设置manifest属性，值指向该清单文件。

清单文件写法

查看全文

概述

1. PC优化手段在Mobile侧同样适用
2. 在Mobile侧我们提出三秒种渲染完成首屏指标
3. 基于第二点，首屏加载3秒完成或使用Loading
4. 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB
5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
6. 基于第五点，要合理处理代码减少渲染损耗
7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
8. 加载完成后用户交互使用时也需注意性能

查看全文

前言

HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。

wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。

演示

显示刮卡百分比

到达一定百分比清空

查看全文