Cache the avatars is little different from cache photos. We need to serve the page with our cache data and also go to the network for fetch avatars in case some user like change their avatars frequently.

self.addEventListener('fetch', function(event) {
var requestUrl = new URL(event.request.url); if (requestUrl.origin === location.origin) {
if (requestUrl.pathname === '/') {
event.respondWith(caches.match('/skeleton'));
return;
}
if (requestUrl.pathname.startsWith('/photos/')) {
event.respondWith(servePhoto(event.request));
return;
}
// TODO: respond to avatar urls by responding with
// the return value of serveAvatar(event.request)
if(requestUrl.pathname.startsWith('/avatars/')){
event.respondWith(serveAvatar(event.request));
return;
}
} event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
function serveAvatar(request) {
// Avatar urls look like:
// avatars/sam-2x.jpg
// But storageUrl has the -2x.jpg bit missing.
// Use this url to store & match the image in the cache.
// This means you only store one copy of each avatar.
var storageUrl = request.url.replace(/-\dx\.jpg$/, ''); // TODO: return images from the "wittr-content-imgs" cache
// if they're in there. But afterwards, go to the network
// to update the entry in the cache.
//
// Note that this is slightly different to servePhoto!
return caches.open(contentImgsCache)
.then(function(cache){
return cache.match(storageUrl).then(function(response){ var netFetchResponse = fetch(request).then(function(networkResponse){
cache.put(storageUrl ,networkResponse.clone());
return networkResponse;
}); return response || netFetchResponse;
})
})
}

[PWA] 19. Cache the avatars的更多相关文章

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

  2. 【Guava】Guava Cache用法

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

  3. Spark 算子

    0.parallelize 1.map 2.mapValues 3.flatMap 4.mapPartitions 5.mapPartitionsWithIndex 6.filter 7.reduce ...

  4. ECMAScript 6 学习(二)async函数

     1.什么是async函数 2.用法 2.1基本用法 3.语法 3.1返回promise对象 3.2promise状态的变化 3.3await命令 1.什么是async函数 async函数也是异步编程 ...

  5. ES2017中的async函数

    前面的话 ES2017标准引入了 async 函数,使得异步操作变得更加方便.本文将详细介绍async函数 概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依 ...

  6. 04_Linux目录文件操作命令1(mv ls cd...)_我的Linux之路

    上一节已经给大家讲了Linux的目录结构,相信大家已经对Linux的整个目录结构有所了解 现实中,服务器(包含Linux,Unix,windows server)一般都摆放在机房里,因为一个机房摆放了 ...

  7. JavaScript中的Generator函数

    1. 简介 Generator函数时ES6提供的一种异步编程解决方案.Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个包含了多个内部状态的状态机. 执行Genera ...

  8. Ehcache

    前言:设计一套缓存框架需要关注的要素 本文来源:RayChase  的<设计一套缓存框架需要关注的要素> 最近关注了一些缓存框架的特性和实现,包括OSCache.JCS.Ehcache.M ...

  9. Linux常用命令详解-目录文件操作命令

    来源:https://www.linuxidc.com/Linux/2018-04/151801.htm 现实中,服务器(包含Linux,Unix,Windows Server)一般都摆放在机房里,因 ...

随机推荐

  1. HDU 5726 GCD (2016 Multi-University Training Contest 1)

      Time Limit: 5000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Description Give y ...

  2. 学习Swift -- 协议(下)

    协议(下) 在拓展中添加协议成员 通过扩展使得Dice类型遵循了一个新的协议,这和Dice类型在定义的时候声明为遵循TextRepresentable协议的效果相同.在扩展的时候,协议名称写在类型名之 ...

  3. JSP基础笔记

    主要内容:1. JSP基础2. Cookie3. HttpSession ================================ JSP基础 1. jsp的作用: * Servlet: &g ...

  4. JavaScript中url 传递参数(特殊字符)解决方法

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.下表中列出了一些URL特殊符号及编码 十六进制值1. + URL 中+号表示空格 %2B2. 空格 UR ...

  5. 提高matlab运行速度和节省空间的心得

    提高matlab运行速度和节省空间的心得 首先推荐使用matlab 2006a版本,该版本优点很多(不过有一个小bug,就是通过GUI自动生成的m文件居然一大堆warning,希望在已经发布了的200 ...

  6. 【uva10917】Walk Through the Forest (最短路)

    题目: gbn最近打算穿过一个森林,但是他比较傲娇,于是他决定只走一些特殊的道路,他打算只沿着满足如下条件的(A,B)道路走:存在一条从B出发回家的路,比所有从A出发回家的路径都短.你的任务是计算一共 ...

  7. 【UVA11324】The Largest Clique (SCC)

    题意: 给一张有向图G,求一个结点数最大的结点集,使得该结点中任意两个结点 u 和 v满足:要么 u 可以到达 v, 要么 v 可以到达 u(u 和 v 相互可达也可以). 分析: Tarjan求SC ...

  8. Javascript禁止网页复制粘贴效果,或者复制时自动添加来源信息

    一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...

  9. lc面试准备:Partition List

    1 题目 Given a linked list and a value x, partition it such that all nodes less than x come before nod ...

  10. 《深度探索c++对象模型》chapter3 Data语意学

    一个空的class:如 class X{} ; sizeof(X)==1; sizeof为什么为1,他有一个隐晦的1 byte,那是被编译器安插进去的一个char,这使得class2的两个object ...