[PWA] 15. Using The IDB Cache And Display Entries
We want to use IDB to store the wittr messages.
The logic is when the page start:
- service worker will read the skeleton from the cache and show to the interface.
- read the message data from the IDB first instead of going to network.
- Show the data from IDB then open socket to fetch updated wittr.
- Once data arrive, update the interface and save into IDB.
export default function IndexController(container) {
this._container = container;
this._postsView = new PostsView(this._container);
this._toastsView = new ToastsView(this._container);
this._lostConnectionToast = null;
this._openSocket();
this._dbPromise = openDatabase();
this._registerServiceWorker();
}
In openDatabase(), we create Wittr db, set id as primary key and time as index called 'by-time'
function openDatabase() {
// If the browser doesn't support service worker,
// we don't care about having a database
if (!navigator.serviceWorker) {
return Promise.resolve();
} return idb.open('wittr', 1, function(upgradeDb){
const store = upgradeDb.createObjectStore('wittrs', {
keyPath: 'id'
}); store.createIndex('by-date', 'time');
});
}
In _openSocket, we have a function to fetch the old data from the IDB.
// open a connection to the server for live updates
IndexController.prototype._openSocket = function() { ... ws.addEventListener('message', function(event) {
requestAnimationFrame(function() {
indexController._onSocketMessage(event.data);
});
}); ...
};
// called when the web socket sends message data
IndexController.prototype._onSocketMessage = function(data) {
var messages = JSON.parse(data); this._dbPromise.then(function(db) {
if (!db) return; // TODO: put each message into the 'wittrs'
// object store.
const tx = db.transaction('wittrs', 'readwrite');
const wittrs = tx.objectStore('wittrs');
messages.forEach( (message) => {
wittrs.put(message);
}); return tx.complete;
}); this._postsView.addPosts(messages);
};
[PWA] 15. Using The IDB Cache And Display Entries的更多相关文章
- [PWA] 18. Clean the photo cache
We cannot let photo always keep caching new data without clean the old data. If message is not displ ...
- 第 15 章 可扩展性设计之 Cache 与 Search 的利用
前言: 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为宽广的发散开来.这一章,我们就将跳出完全依靠数据库自身来改善 ...
- MySQL性能调优与架构设计——第 15 章 可扩展性设计之Cache与Search的利用
第 15 章 可扩展性设计之Cache与Search的利用 前言: 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为 ...
- cache—主存—辅存三级调度模拟
近日,在体系结构的课程中,老师留了一个上机作业,为cache—主存—辅存三级调度模拟,要求如下: 实现三级存储体系的模拟调度程序 描述:CPU在cache访问数据块,若命中给出对应的cache实地址, ...
- [置顶] 页面缓存,cache,设置缓存过期时间,OutputCache
页面缓存 方法一: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //缓存有数据 if (Cach ...
- google guava cache缓存基本使用讲解
代码地址:https://github.com/vikde/demo-guava-cache 一.简介 guava cache是google guava中的一个内存缓存模块,用于将数据缓存到JVM内存 ...
- 【Guava】Guava Cache用法
背景 缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用.在日长开发有很多场合,有一些数据量不是很大,不会经常改动,并且访问非常频繁.但是由于受限于硬盘IO的性能或者远程网络 ...
- Design Of A Modern Cache
http://highscalability.com/blog/2016/1/25/design-of-a-modern-cache.html MONDAY, JANUARY 25, 2016 AT ...
- Network Stack : HTTP Cache
HTTP Cache 目录 1 Operation 2 Sparse Entries 3 Truncated Entries 4 Byte-Range Requests 5 HttpCache::Tr ...
随机推荐
- linux负载均衡
1.linux lvs nat实现负载均衡 添加两块网卡并开启路由管道 > /proc/sys/net/ipv4/ip_forward //开始路由管道 安装ipvsadm yum instal ...
- thinksns消息提示的实现机制(转)
转自:http://jingyan.baidu.com/article/f25ef2541718eb482c1b8215.html thinksns的消息提示不是实时的,而是1分钟向服务器请求一次,再 ...
- c++ string用法
首先,为了在我们的程序中使用string类型,我们必须包含头文件 .如下: #include //注意这里不是string.h string.h是C字符串头文件 1.声明一个C++字符串 声明一个字 ...
- FC8下备份linux系统
linux系统可以使用tar来备份.<br><br> 我在FC8上装好了totem, mplayer, audacious, 并搞定了wifi后,我觉得该备份一下FC8系统.& ...
- 前端,移动开发者,UI须懂: 不同设备的之间的尺寸
在开发前端,移动APP,以及设计UI的时候,我们经常会去搜索不同设备之间的尺寸,来开始自己的工作,以保证显示效果达到更好,这里收集了现在常用的设备. 设备更新速度快,有些没罗列的,大家可以谷歌或者百度 ...
- JavaScript 获取Select标签选中的项
<select name="select1" id="select1" onchange=setInput()> <option value= ...
- IS打包
1. 目的 让用户可以通过运行一个安装程序,安装程序到系统中正常运行. 2. 注意 当我们用项目向导生成的新项目时,InstallShield只为我们生成两个事件,分别是OnFirstUIBefore ...
- jquery html 动态添加元素绑定事件
由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...
- ASP.NET导出Excel(利用NPOI和EPPlus库,无需安装Office)
网上提供了很多Asp.net中操作Excel的方法,其中大部分是调用微软的Office组件,下面提供三个无须安装Office即可从Asp.net输出Excel的方法. 1 简单方法 //下面代码输出的 ...
- UnixODBC
UnixODBC下载安装地址:http://www.unixodbc.org/ DOWNLOAD Distribution Format unixODBC is currently availible ...