前端离线技术实现

最新推荐文章于 2024-01-02 15:38:10 发布

灬点点

最新推荐文章于 2024-01-02 15:38:10 发布

阅读量3.1k

点赞数 2

分类专栏： DB 前端开发文章标签：前端离线技术实现

本文链接：https://blog.csdn.net/qq_32447301/article/details/97668959

版权

DB 同时被 2 个专栏收录

41 篇文章 6 订阅

订阅专栏

前端开发

39 篇文章 3 订阅

订阅专栏

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 接口专门用不同步前后的数据：
在这里插入图片描述
在中小型项目，特别是那种后台可以由前端接手的全栈式开发，pouchDB 是一种不错的离线数据处理方案。此方案问题是压缩后任然有 130 多 kb，并且依赖于特定后台方案，不够通用。

4、Redux-Offline

Redux实现：

let createStore = (reducer){
    //    state存储(不是管理)着所有状态
    //    最开始先调用下reducer，以得到最初各组件的默认状态值
    let state = reducer(); 
    //     redux的实质其实就是观察者模式，当store里的数据发生变化时，redux会通知所有订阅者
    //    `istenners`是一个数值，里面就是所有的订阅者
    let listheners = [];
    //    getState用于从store中从获取数据
    let getState = (){
         return state;
    };
    
    //     订阅事件，返回一个取消订阅函数
    let subscribe =  (cb)=>{
        listhenners.push(cb);
        return ()=>{
            listhenners = listhenners.filter(item=>{
               return  item !== cb
            });
        }
    };

    let dispatch = (action)=>{
        //     `dispatch`一个action(动作)， 交给纯函数处理
        state = reducer(state, action);
        //     当数据发生改变后，通知订阅者
        listhenners.forEeach(listhener=>{ listhener() });
    };

   return {
        getState,
        subscribe,
        dispatch
    }
}
export default createStore;

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实现：

创建数据库

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
    //alert("数据库创建失败！");
} else {
    //alert("数据库创建成功！");
}

插入数据

function insert() {
    var id = document.getElementById('id').value;
    var name = document.getElementById('name').value;
    dataBase.transaction(function(tx) {
        tx.executeSql(
            "insert into stu (id, name) values(?,?)",
            [id,name],
            function() {
                alert('插入成功');
            },
            function(tx,error) {
                alert('插入失败');
            }
        );
    })
}

灬点点

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端离线技术实现

一、前端离线作用最近几年新起来的、5G、人工智能、或者卫星基站，但是有没有考虑到，如果有一天没有电或者能源逐渐枯竭、那么离线是一个不错的选择、很火的智能音响、其中也采用的离线技术、为了解决没有网络或者信号很差的时候。那么前端离线技术有哪些呢？1、Application Cache 与 Cache Storage不管是浏览器缓存还是APP的缓存，都可以采用Application Cache或者...
复制链接

扫一扫

专栏目录