前端离线技术实现

朴灿烈づ我的快乐病毒、 2021-11-17 02:44 316阅读 0赞

**0、前端离线作用**

最近几年新起来的、5G、人工智能、或者卫星基站，但是有没有考虑到，如果有一天没有电或者能源逐渐枯竭、那么离线是一个不错的选择、很火的智能音响、其中也采用的离线技术、为了解决没有网络或者信号很差的时候。那么前端离线技术有哪些呢？

**1、Application Cache 与 Cache Storage**  
不管是浏览器缓存还是APP的缓存，都可以采用Application Cache或者 Cache Storage 缓存。同时`离线优先`是给用户体验最好的，不管是接口请求还是什么操作，请求接口，拿到后台数据进行与Application Cache进行比较，如果一样，直接展示，如果不一样，展示后台数据，同时异步进行更新Application Cache数据。最早的H5就是采用Application Cache缓存技术、Application Cache与Cache Storage 作用相同。

Application Cache 实现：开启缓存

<!DOCTYPE HTML>
    <html manifest="demo.appcache">
    <body>
    </body>
    </html>

Cache Storage实现：缓存css、html等资源

this.addEventListener('install', function(event) {
      event.waitUntil(
        caches.open('v1').then(function(cache) {
          return cache.addAll([
            '/test/index.html',
            '/test/style.css',
          ]);
        })
      );
    });

**2、service-worker**

正因为 Application Cache 一直无法有效的解决离线资源精细化控制，service-worker（以下简称 sw）接口被设计出来了，比起 Application Cache，它提供独立的后台 JS 线程，是一种特殊的 worker 上下文访问环境。

service-worker实现：缓存js

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/serviceworker.js');
    }
    </script>
    </head>
    </html>

**3、PouchDB**

PouchDB 是一个跨平台 javascript 数据库，内部封装了 IndexDB、WebSql 兼容前端处理.  
一般而言前端 pouchDB 进行离线处理，搭配后台 CouchDB，可以更方便双向数据同步。  
Sync 接口专门用不同步前后的数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzAx_size_16_color_FFFFFF_t_70]  
在中小型项目，特别是那种后台可以由前端接手的全栈式开发，pouchDB 是一种不错的离线数据处理方案。此方案问题是压缩后任然有 130 多 kb，并且依赖于特定后台方案，不够通用。

**4、Redux-Offline**

Redux实现：

**5、Redux 与 IndexDB 结合**

如果想要达到对数据精细化控制，并且同时不对原有在线逻辑有过多的侵入，我们可以在数据储存上用 IndexDB 替换后台返回数据，前端数据处理仍然复用原有 redux。  
由于 IndexDB 原生操作 api 比较粗糙，我们分装了一套通用 DB 底层操作库，同时将 api 接口抽象出来，以 git 子仓库的形式在各业务放公用。这里首先简化了前端业务层 DB 本地读写、排序等逻辑， 便于相互关联项目的共用，其次将 DB 抽象出来也是为了更好的方便业务本身可以不依赖 IndexDB 本身，可以结合客户端特性，给底层数据库替换及进行优化提供了便捷，或者对于纯 web 端，为向下兼容可以使用 WebSql、LocalStorage 等兼容提供了拓展。

**6、IndexDB 与 WEB SQL**

indexDB实现：

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
     
    //创建一个数据库
    function createDb(){
        var res=window.indexedDB.open('test');
        res.onerror=function(e){
            alert("Database error:"+e.target.errorCode);
        };
        res.onsuccess=function(event){
            alert("Database Create!");
        };

WEB SQL实现：

创建数据库

插入数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzAx_size_16_color_FFFFFF_t_70]: /images/20211116/d7c6f03574864965bd4d628c453264f3.png