构建我们的离线Web应用

最新推荐文章于 2024-09-15 07:29:39 发布

lzhw1985

最新推荐文章于 2024-09-15 07:29:39 发布

阅读量110

点赞数

分类专栏： web 文章标签： Web 应用服务器 HTML5 浏览器 CSS

本文链接：https://blog.csdn.net/lzhw1985/article/details/83874328

版权

web 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

公司希望为我们的Web站点，开发一个html5版本，拓展到Pad端，给使用高级浏览器的用户一个更加完善的用户体验。其中一个重要的功能就是支持离线应用。
利用html5构建一个离线应用，主要依赖于三个新的特性
1. 离线资源缓存：
可以在一个manifest文件中指明离线应用工作所需的资源文件。缓存的文件可以在manifest文件本身发生变化的时候更新，或者检测window.applicationCache.status，然后调用window.applicationCache.update()更新缓存。
2. 在线状态检测：
html5支持通过navigator.onLine获取当前的在线状态。html5还提供在线和离线事件机制.针对在线状态，我们可以做出不同的处理
3. 本地数据存储：
html5提供了LocalStorage和WebDatabase(WebSQL/indexedDB)两种存储机制。前者提供key/value存储方式，后者提供关系数据库存储功能。
离线资源缓存
要使用离线缓存功能，需要在编写manifest文件，并指定使用的manifest.
<doctype html5>
<html manifest="demo.manifest">
...
</html>
manifest文件格式.
首行必须是 CACHE MANIFEST。其后，每一行列出一个需要缓存的资源文件名。
可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。
如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。
如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。
注释要另起一行，以 # 号开头。
文件示例
CACHE MANIFEST
demo.html
demo.css
demo.js

NETWORK:
demo.php

CACHE:
demo2.css

FALLBACK:
/files/ /default.html
在线状态检测
上面提到过，目前html5提供了两种检测是否在线的方式
检测 navigator.onLine
侦听document的online和offline事件
本地数据存储
通常我们用cookie来存储数据，但是cookie存储的数据量太小.而且每次发起http请求都要带上，增加了数据的传输量.html5新引入了两种key/value存储方式，提供比较大规模，性能更高安全性更好的存储方式。 localStorage 和 sessionStorage
sessionStorage只在本次浏览器会话中保存，浏览器关闭之后存储就被丢弃。localStoage则可以比较长期的保存。但是使用方式都一样，非常简单.
直接
localStorage.key1 = val1;
console.log( localStorage.key1 );
另一种方式是关系数据库存储，不过虽然chrome提供了websql特性。但是貌似html5工作组停止了这个标准的制定工作，转而支持另一种indexedDb的标准。但是indexedDB目前还没有浏览器实现。我的理解，前者基于Sqlite的Sql来操作数据，后者可能更像是ORM的方式,数据操作更加优雅更加对象化。所以可能暂时这个功能得不到大范围使用。
问题
利用离线资源缓存，我们就可以能够访问读到应用了。然后利用状态检测和数据存储功能，我们就可以在离线的时候，将用户的操作保存起来，等到在线的时候，再将它们发布到服务器上。做了一些demo后发现，已经能实现一些简单的应用了, 还有一些问题需要解决，包括。
manifest文件不支持通配符，因此我们的一些通过动态生成的文件，比如合并压缩的js和css文件，不太好缓存。以及很多根据ID通过ajax生成的数据也不容易缓存。
一些离线状态下的操作，比如发表的评论和执行的转发操作。即时能够通过在线的时候同步，但是也可能面对失去了时效性之类的问题。而且下次再次离线上来的时候，还没能够同步到服务器的这些离线操作内容不容易呈现出来。
如何在线上的内容更新的时候，通知客户端更新缓存。动态生成manifest文件，可能导致所有的内容都更新。
httpCache和offlineCache的内容无法共享，导致的客户端存储空间浪费。