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的更多相关文章

  1. [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 ...

  2. [PWA] 19. Cache the avatars

    Cache the avatars is little different from cache photos. We need to serve the page with our cache da ...

  3. 【Guava】Guava Cache用法

    背景 缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用.在日长开发有很多场合,有一些数据量不是很大,不会经常改动,并且访问非常频繁.但是由于受限于硬盘IO的性能或者远程网络 ...

  4. Highcharts指南

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  5. Flash 二进制传图片到后台Java服务器接收

    需求:把客户端处理过的图片返还给服务器Flash端代码 01 package {02     import com.adobe.images.JPGEncoder;    03     import  ...

  6. 数据交互 ajax 初始化省

    1 //初始化省 2 function initProvince() { 3 if( areaLvel == 0 ) { 4 return; 5 } 6 // 清空option 7 $("# ...

  7. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  8. linux包之dmidecode

    http://www.dmtf.org/standards/smbios Dmidecode 这款软件允许你在 Linux 系统下获取有关硬件方面的信息.Dmidecode 遵循 SMBIOS/DMI ...

  9. JBoss 系列二十一:JBossCache核心API

    内容简介 本处介绍JBossCache相关的主要API,我们目的通过本部分描述,读者可以使用JBossCache API,在自己的应用中使用JBossCache. Cache接口 Cache 接口是和 ...

随机推荐

  1. grep操作

    这个程序的名称来自Unix文本编辑器ed类似操作的命令: g/re/p 这个命令搜索整个文件中匹配给定正则表达式的文本行,并显示出来.有很多不同的命令行用于改变grep的默认行为,包括显示出不匹配的文 ...

  2. CSS动画:Transform中使用频繁的scale,rotate,translate动画

    动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...

  3. php中函数前加&符号的作用分解

    这篇文章主要介绍了php中的函数前加&符号的作用分解,其作用叫做引用返回,有点抽象,详细解释请看本文内容,需要的朋友可以参考下  (转载) php变量前面加&符号是什么意思就不用多说了 ...

  4. Android JSON 解析库的使用 - Gson 和 fast-json

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  5. Ubuntu phpmyadmin 缺少mcrypt扩展解决方法

    之前在登陆phpmyadmin的时候,会出现警告说缺少mcrypt扩展的错误,一直没去解决这个问题,觉得没什么影响就算了. 今天谷歌了一下,原来是php5没有启用mcrypt模块.   sudo ph ...

  6. APUE《UNIX 环境高级编程》读后感

    今天终于把APUE前17章全部看完了,基本上主要知识就在这些章节里. 之前看完<unix/linux编程实践教程>时,有一种豁然开朗.心旷神怡的感觉,在代码级别了解了linux很多系统机制 ...

  7. BZOJ 1024 生日快乐

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...

  8. oracle 中使用触发器自动生成UUID

    create or replace trigger tri_test before insert on test for each row declare begin if :new.uuid is ...

  9. Jump

    hdu4862:http://acm.hdu.edu.cn/showproblem.php?pid=4862 题意:给你n*m的方格,每个方格中有一个数(0---9),然后你每次可以选择一个点开始,这 ...

  10. Unity 小地图制作插件NJG MiniMap的简单使用

    unity版本:4.5.1 NJG MiniMap版本:1.5 参考链接:http://blog.csdn.net/wuming22222/article/details/37526659,作者:CS ...