HTML5 离线文件

2022-05-15 01:11:55

离线文件应用

一、什么是离线web应用程序

　　我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。

　　为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。

二、离线应用的目的

　　离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统，并在网络畅通的情况下与服务器进行数据交互

三、离线本地存储和传统的浏览器缓存有什么不同呢？

1、浏览器缓存主要包含两类：

a.缓存协商：Last-modified,Etag

浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件。否则服务器返回新内容。

b.彻底缓存：cache-control,Expires

通过Expires设置缓存失效时间，在失效之前不需要再跟服务器请求交互。

2、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；

3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；

4、离线存储可以动态通知用户进行更新。

四、在线状态检测

　　HTML5提供了onLine方法用于检测当前网络是否在线

1 setInterval(function(){
2         if(window.navigator.onLine){
3             console.log("当前在线");
4         }
5         else{
6             console.log("当前不在线");
7         }
8     }, 1000);

五、实现离线应用的步聚

　　1、离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。

version 1.0    //最好定义版本，更新的时候只需修改版本号

CACHE manifest    // 指定缓存文件
    m.png
    test.js
    test.css

NETWORK       // 只有通过联网才能浏览的文件，*代表除了在CACHE中的文件
    *

FALLBACK       // 每行分别指定在线和离线时使用的文件
    online.html offline.html

　　2、要让manifest管理存储，还需要在html标签中定义manifest属性，如下：

 1 <!DOCTYPE HTML>
 2 <html lang="en" manifest=‘test.manifest‘>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     
 9 </body>
10 </html>

　　3、最后别忘了，这些应用需要服务器支持。

　　　　1）给http服务器加上manifest文件的MINI类型（以下方法都是针对apache服务器）
　　　　　　HTML5离线应用所需的minifest文件的MIME类型为text/cache-manifest，你需要在所使用的web服务器中添加如下文件和MIME类型的映射关系，对于apache需要　　　　　　在mime.types文件中加入如下配置：
　　　　　　　　text/cache-manifest manifest

HTML5 离线文件

码农公寓

离线文件应用

相关文章