高级程序设计——离线应用

最新推荐文章于 2019-09-28 17:41:10 发布

new_life1207

最新推荐文章于 2019-09-28 17:41:10 发布

阅读量206

点赞数

分类专栏： javascript 文章标签： javascript web应用

本文链接：https://blog.csdn.net/new_life1207/article/details/78911375

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

前言
离线检测
应用缓存

前言

开发离线Web应用需要的步骤：
- 确保应用知道设备是否能上网
- 应用还必须能访问一定的资源（图像、JavaScript、css等）
- 必须有一块本地空间用于保存数据，无论能否上网都不妨碍读写

离线检测

navigator.onLine属性。
- 值为true表示设备能上网，false表示不能上网
- 在不同浏览器间有差异，单独使用这个属性不能确定网络是否连通。即便如此，在请求发生错误的情况下，检测这个属性仍然是管用的。
两个事件：
- online：当网络从离线变为在线时触发
- offline：从在线变为离线时触发
- 在window对象上触发
为了检测应用是否离线，在页面加载后，最好先通过navigator.onLine取得初始的状态。然后通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化

应用缓存

Appcache：是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件，列出要下载和缓存的资源
```
CACHE MANIFEST

#Comment


file.js
file.css
```
在最简单的情况下，描述文件中列出的都是需要下载的资源，以备离线时使用
要将描述文件与页面关联起来，可以在<html>中的mainfest属性中指定这个文件的路径
<html mainfest="/offline.mainfest">
- 告诉页面，/offline.mainfest中包含着描述文件
- 这个文件的MIME类型必须是text/cache-mainfest
applicationCache对象：
- 有一个status属性，属性的值是常量，表示应用缓存的如下当前状态
  - 0：无缓存
  - 1：闲置，即应用缓存未得到更新
  - 2：检查中
  - 3：下载中
  - 4：更新完毕。可以通过swapCache()来使用了
  - 5：废弃。
- 事件，表示其状态的改变
  - checking：在浏览器为应用缓存查找更新时触发
  - error：在检查更新或下载资源期间发生错误时触发
  - noupdate：在检查描述文件发现文件无变化时触发
  - downloading：在开始下载应用缓存资源时触发
  - progress：在文件下载应用缓存的过程中持续不断的触发
  - updateready：在页面新的应用缓存下载完毕且可以通过swapCache使用时触发
  - cached：在应用缓存完整可用时触发
- 一般来说，上述事件会随着页面加载按上述顺序依次触发。不过调用update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件。update()一经调用，应用缓存就会去检查描述文件是否更新（触发checking事件），然后就像页面刚刚加载一样，继续执行后续操作。
- 如果触发了cached事件，就说明应用缓存已经准备就绪，不会再发生其他操作了
- 如果触发了updateready事件，则说明新版本的应用缓存已经可用，而此时需要调用swapCache()来启用新应用缓存

new_life1207

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高级程序设计——离线应用

前言离线检测应用缓存前言开发离线Web应用需要的步骤：确保应用知道设备是否能上网应用还必须能访问一定的资源（图像、JavaScript、css等）必须有一块本地空间用于保存数据，无论能否上网都不妨碍读写离线检测navigator.onLine属性。值为true表示设备能上网，false表示不能上网在不同浏览器间有差异，单独使用这个属性不能确定网络是否连通。即便如此，在请求发生错
复制链接

扫一扫