[PWA] 17. Cache the photo
To cache photo, You need to spreate cache db to save the photo. So in wittr example, we cache the text already, if there in the wittr there is photo, we will create cache for it, so next time we can fetch from cache.
For the incoming photo, we also need to create cache for them.
For the 'install' event, we only cache assets, static imgs, css and js.
var staticCacheName = 'wittr-static-v7';
var contentImgsCache = 'wittr-content-imgs';
var allCaches = [
staticCacheName,
contentImgsCache
]; self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll([
'/skeleton',
'js/main.js',
'css/main.css',
'imgs/icon.png',
'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
]);
})
);
});
Here we don't cache dynamic photos. But at the beginning we define the cache name for photo .
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
return cacheName.startsWith('wittr-') &&
!allCaches.includes(cacheName);
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
'activate' event is the place to clean the old version cahce but keep the current version cache and photo cache.
In 'fetch' event, this is the place we want to cache the photos.
For each request, we want to check,
- whether we have the cache for the photo request?
- if not, fetch from network and cache it.
self.addEventListener('fetch', function(event) {
var requestUrl = new URL(event.request.url); // make sure the same origin
if (requestUrl.origin === location.origin) {
// serve cache with the skeleton
if (requestUrl.pathname === '/') {
event.respondWith(caches.match('/skeleton'));
return;
}
// cache the photo
if (requestUrl.pathname.startsWith('/photos/')) {
event.respondWith(servePhoto(event.request));
return;
}
} // cache the assets
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
The servePhoto():
we want to make sure two things:
- we don't care the photo size, 800px,200px or 40px
- because respond object can be only access once, so we need clone() the original one and use clone one for the cahce, return the original one to the browser.
function servePhoto(request) {
var storageUrl = request.url.replace(/-\d+px\.jpg$/, ''); return caches.open(contentImgsCache).then(function(cache) {
return cache.match(storageUrl).then(function(response) {
if (response) return response; return fetch(request).then(function(networkResponse) {
cache.put(storageUrl, networkResponse.clone());
return networkResponse;
});
});
});
}
So first, remove those px info: (/photos/awefaef-af23-fwq23f-800px.jpg) --> (/photos/awefaef-af23-fwq23f)
var storageUrl = request.url.replace(/-\d+px\.jpg$/, '');
Second, clone the network response and return origial one to browser and clone one to cache
return fetch(request).then(function(networkResponse) {
cache.put(storageUrl, networkResponse.clone());
return networkResponse;
});
Unitl now, we are able to cache the photo, event in the offline mode, we are still able to see the photos return from the cache.
[PWA] 17. Cache the photo的更多相关文章
- [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 ...
- [PWA] 19. Cache the avatars
Cache the avatars is little different from cache photos. We need to serve the page with our cache da ...
- 【Guava】Guava Cache用法
背景 缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用.在日长开发有很多场合,有一些数据量不是很大,不会经常改动,并且访问非常频繁.但是由于受限于硬盘IO的性能或者远程网络 ...
- Highcharts指南
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- Flash 二进制传图片到后台Java服务器接收
需求:把客户端处理过的图片返还给服务器Flash端代码 01 package {02 import com.adobe.images.JPGEncoder; 03 import ...
- 数据交互 ajax 初始化省
1 //初始化省 2 function initProvince() { 3 if( areaLvel == 0 ) { 4 return; 5 } 6 // 清空option 7 $("# ...
- 转:Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- linux包之dmidecode
http://www.dmtf.org/standards/smbios Dmidecode 这款软件允许你在 Linux 系统下获取有关硬件方面的信息.Dmidecode 遵循 SMBIOS/DMI ...
- JBoss 系列二十一:JBossCache核心API
内容简介 本处介绍JBossCache相关的主要API,我们目的通过本部分描述,读者可以使用JBossCache API,在自己的应用中使用JBossCache. Cache接口 Cache 接口是和 ...
随机推荐
- C#/.NET整数的三种强制类型转换(int)、Convert.ToInt32()、int.Parse()的区别
这三种方式都是强制把内容转换为整数,但他们之间是有区别的,如下: 一.(int)适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型). 二.int.Parse(string sP ...
- 干掉Google字体,WordPress速度暴涨
2014年7月7日23:40:31 因为Google被墙,WordPress引用的Google字体总会加载很长时间,严重影响打开速度. 安装WordPress插件 Disable Google Fon ...
- Java常量和变量
1.Java运行原理 编译+解释型语言: 程序代码经编译后转换为一种称为java字节码(.class文件)的中间语言 file.java--->Class.class java虚拟机JVM将字节 ...
- Cobar介绍及配置
from:http://code.alibabatech.com/wiki/display/cobar/Home Skip to end of metadata Page restrictions ...
- PowerShell使用SMTP发送邮件
$smtpServer = "smtp.exmail.qq.com" $smtpUser = "xxxxx@qq.com" $smtpPassword = &q ...
- JSP session 获取id和session持续时间
<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> < ...
- hdu 5135 Little Zu Chongzhi's Triangles
http://acm.hdu.edu.cn/showproblem.php?pid=5135 题意:给你N个木棍的长度,然后让你组成三角形,问你组成的三角形的和最大是多少? 思路:先求出可以组成的所有 ...
- sql server更改机器名后更改数据库机器名
方式一: 本地机器名查询: select * from sys.servers 修改机器名: sp_dropserver 'old server name' sp_addserver 'new ser ...
- 转:Mysql读写分离实现的三种方式
1 程序修改mysql操作类可以参考PHP实现的Mysql读写分离,阿权开始的本项目,以php程序解决此需求.优点:直接和数据库通信,简单快捷的读写分离和随机的方式实现的负载均衡,权限独立分配缺点:自 ...
- hdu-2586-How far away ?(离线LCA)
题意: 给定一棵树,每条边都有一定的权值,q次询问,每次询问某两点间的距离. 分析: 这样就可以用LCA来解,首先找到u, v 两点的lca,然后计算一下距离值就可以了. 这里的计算方法是,记下根结点 ...