前端用h5做离线app

一、什么是离线App

离线App是指完全可以在离线状态（即没有网络连接）使用的应用程序，就像原生应用一样运行。

二、为什么要用H5做离线App

使用H5做离线App主要有以下几个原因：

1.简单易用。

2.省去了安装、升级等麻烦的过程。

3.不依赖操作系统，可以跨平台使用。

4.支持离线部署，即便在没有网络的情况下也可以使用。

三、如何用H5做离线App

1.离线缓存

离线缓存可以将应用程序的所有必需文件缓存到本地，使得应用程序可以在离线状态下运行。

在HTML5中，可以使用manifest文件来指定哪些文件需要被缓存，如下图所示：

```

CACHE MANIFEST

#Version 1.0

CACHE:

index.html

style.css

main.js

logo.png

NETWORK:

api.server.com

```

其中，CACHE和NETWORK分别代表需要缓存和需要从网络请求的文件，而#Version 1.0则代表manifest文件的版本号，发生变化时浏览器会更新缓存。

在HTML文档中，需要添加manifest属性来指定manifest文件的路径，如下图所示：

```

// ...

```

当浏览器第一次访问该网页时，会自动下载并缓存manifest中指定的文件，之后就可以在离线状态下使用应用程序了。

2.indexedDB

indexedDB是HTML5中新引入的客户端存储API，可以在本地存储大量结构化数据。

通过indexedDB可以实现本地缓存数据、离线存储、离线操作数据等功能，可以方便离线应用程序的开发。

下面是一个简单的使用示例：

```

var request = window.indexedDB.open("myDB", 1);

request.onerror = function(event) {

console.log("Error: ", event.target.error);

};

request.onupgradeneeded = function(event) {

var db = event.target.result;

var store = db.createObjectStore("users", {keyPath: "id"});

store.put({id: 1, name: "John", age: 30});

};

request.onsuccess = function(event) {

var db = event.target.result;

var tx = db.transaction("users", "readonly");

var store = tx.objectStore("users");

var request = store.get(1);

request.onsuccess = function() {

console.log(request.result.name); // John

};

};

```

通过以上代码，可以实现打开名为myDB的数据库，创建一个名为users的对象存储，并向该存储中添加一条数据：{id: 1, name: "John", age: 30}，之后从该存储中获取id为1的数据，并输出该数据的name属性。

3.localStorage

localStorage是HTML5中提供的客户端存储API，可以在本地存储文本数据。

通过localStorage可以方便地实现应用程序的本地缓存功能，如下所示：

```

localStorage.setItem("name", "John");

var name = localStorage.getItem("name");

console.log(name); // John

```

以上代码可以实现向localStorage中添加键值对{name: "John"}，并获取name属性的值"John"。

四、总结

使用H5做离线App可以方便地实现应用程序的离线访问，并且具有省去安装和升级等麻烦操作的优点。

在实现离线App时，可以使用离线缓存、indexedDB和localStorage等HTML5技术，根据具体的需求选取最适合的方案实现可靠的本地数据存储和访问。