1、什么是Workbox Strategies?

当service workers 首次被引入时,可以设定一组常见的缓存策略。 缓存策略是一种模式,用于确定service workers 在收到fetch事件后如何生成响应。

workbox-strategies提供了最常用的缓存策略,因此很容易将它们应用到服务工作者中。

我们不会在Workbox支持的策略之外详细介绍,但你可以在Offline Cookbook中了解更多信息

2、使用策略

在以下示例中,我们将向你展示如何在workbox-routing中使用Workbox缓存策略。 你可以使用本文的“配置策略”部分中介绍的每种策略定义一些选项。

在高级用法部分,我们将介绍如何在没有workbox-routing的情况下直接使用缓存策略。

下面我们将介绍几种基本的策略

2.1 Stale-While-Revalidate

 
 

stale-while-revalidate模式允许你使用缓存的内容尽快响应请求(如果可用),如果未缓存,则回退到网络请求。 然后,网络请求用于更新缓存。

这是一种相当常见的策略,适合更新频率很高但重要性要求不高(至少允许一次缓存读取)的内容。在有缓存的情况下,该模式保证了客户端第一时间拿到数据的同时,也会去请求网络资源更新缓存,保证下次客户端从缓存中读取的数据是最新的。因此该模式不能减轻后台服务器的访问压力,但却能给前端用户提供快速响应的体验。

 workbox.routing.registerRoute( // 当是资源js文件的时候
new RegExp('(app|manifest|vendor)+.js'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'main-js'
})
)

  

2.2 Cache First (缓存优先,缓存回落到网络)

 
 

离线Web应用程序将严重依赖缓存,但对于非关键且可逐步缓存的资产,首先缓存是最佳选择。

如果缓存中有响应,则将使用缓存的响应来完成请求,根本不会使用网络。 如果没有缓存的响应,则将通过网络请求来满足请求,并且将缓存响应,以便直接从缓存提供下一个请求。

该模式可以在为前端提供快速响应的同时,减轻后台服务器的访问压力。但是数据的时效性就需要开发者通过设置缓存过期时间或更改sw.js里面的修订标识来完成缓存文件的更新。一般需要结合实际的业务场景来判断数据的时效性。

workbox.routing.registerRoute(
new RegExp('/styles/'),
workbox.strategies.cacheFirst()
);

2.3 Network First (网络回落到缓存)

对于经常更新且关键(由业务判断出来)的请求,网络优先策略是理想的解决方案。 默认情况下,它将尝试从网络获取最新请求。 如果请求成功,它会将响应放入缓存中。 如果网络无法返回响应,则将使用缓存响应。

 
 
workbox.routing.registerRoute(
new RegExp('/index/'),
workbox.strategies.networkFirst()
);

这意味着只要当第一次请求成功时,service worker就会缓存一份请求结果。当后续重复请求时,缓存也会每次更新。

若网络请求失败时,只要缓存里有内容,就能让前端获取一个响应(从service worker的缓存里)。因此,此种模式提高了前端页面的稳固性,即使在网络请求失败的情况下,页面也能从上次的缓存中读取到数据展示,而不是粗鲁的告诉用户网络请求失败的一个响应。

workbox.routing.registerRoute(
new RegExp('/index/'),
workbox.strategies.networkFirst()
);

2.4 Network Only

 
 

如果你需要从网络中完成特定请求,则首先要使用网络策略。

workbox.routing.registerRoute(
new RegExp('/admin/'),
workbox.strategies.networkOnly()
);

2.5 Cache Only

 
 

仅缓存策略确保从缓存获取请求。 这在workbox中不太常见,但如果你有自己的预先缓存步骤则可能很有用。

workbox.routing.registerRoute(
new RegExp('/app/v2/'),
workbox.strategies.cacheOnly()
);

3、配置策略

所有策略都允许你配置:

  • 要在策略中使用的缓存的名称。
  • 缓存在策略中使用的过期限制。
  • 一组插件,在获取和缓存请求时将调用其生命周期方法。

3.1 更改策略使用的缓存

你可以通过提供缓存名称来更改缓存所使用的策略。 如果要分离资源以帮助调试,这非常有用。

workbox.routing.registerRoute(
new RegExp('/images/'),
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
})
);

3.2 使用插件

Workbox附带了一组可以与这些策略一起使用的插件。

  • workbox.expiration.Plugin
  • workbox.cacheableResponse.Plugin
  • workbox.broadcastUpdate.Plugin
  • workbox.backgroundSync.Plugin
    要使用任何这些插件(或自定义插件),你只需将实例传递给插件选项。

后续文章会专门介绍这些插件模块的用法。

workbox.routing.registerRoute(
new RegExp('/images/'),
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
]
})
);

4、高级用法

如果要在自己的fetch事件逻辑中使用策略,可以使用策略类通过特定策略运行请求。

例如,要实现stale-while-revalidate类,您可以执行以下操作:

self.addEventListener('fetch', (event) => {
if (event.request.url === '/') {
const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
event.respondWith(staleWhileRevalidate.handle({event}));
}
});

Workbox使用策略的更多相关文章

  1. 高性能Javascript--脚本的无阻塞加载策略

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...

  2. javascript设计模式:策略模式

    前言 策略模式有效利用组合.委托.多态等技术和思想,可以有效避免多重条件选择语句. 策略模式对开放-封闭原则提供了很好的支持,将算法封装在strategy中,使得他们易于切换.理解.扩展. 策略模式中 ...

  3. Unity3D 5.3 新版AssetBundle使用方案及策略

    1.概览 Unity3D 5.0版本之后的AssetBundle机制和之前的4.x版本已经发生了很大的变化,一些曾经常用的流程已经不再使用,甚至一些老的API已经被新的API所取代. 因此,本文的主要 ...

  4. StrategyPattern (策略模式)

    /** * 策略模式 * @author TMAC-J * 根据环境的不同选择不同的策略,把策略用接口抽象出来 */ public class StrategyPattern { interface ...

  5. 直播推流端弱网优化策略 | 直播 SDK 性能优化实践

    弱网优化的场景 网络直播行业经过一年多的快速发展,衍生出了各种各样的玩法.最早的网络直播是主播坐在 PC 前,安装好专业的直播设备(如摄像头和麦克风),然后才能开始直播.后来随着手机性能的提升和直播技 ...

  6. JAVA 设计模式之策略模式

    定义:定义一组算法,将每个算法都封装起来,并且使他们之间可以互换. 类型:行为类模式 策略模式是对算法的封装,把一系列的算法分别封装到对应的类中,并且这些类实现相同的接口,相互之间可以替换.在前面说过 ...

  7. .NET面试题系列[5] - 垃圾回收:概念与策略

    面试出现频率:经常出现,但通常不会问的十分深入.通常来说,看完我这篇文章就足够应付面试了.面试时主要考察垃圾回收的基本概念,标记-压缩算法,以及对于微软的垃圾回收模板的理解.知道什么时候需要继承IDi ...

  8. 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...

  9. 《深入理解Java虚拟机》内存分配策略

    上节学习回顾 1.判断对象存活算法:引用计数法和可行性分析算法 2.垃圾收集算法:标记-清除算法.复制算法.标记-整理算法 3.垃圾收集器: Serial:新生代收集器,采用复制算法,单线程. Par ...

随机推荐

  1. 汇编语言之寄存器使用bx si di bp

    转载自:https://www.cnblogs.com/youxin/archive/2012/05/29/2524780.html 如果你看到这篇博客时正在做第七章问题,强烈建议先去把8.1~8.4 ...

  2. python基础学习 day 1

    初学python,记录下自己的历程~ 了解了一下python的基本概念,现在使用的比较多的就是python2.7 学习了if语句和两个经典的循环语句 #关于if语句的应用 name = raw_inp ...

  3. Linux数据库还原备份

    Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDBHotbackup的一个很好的替代品. https://www.percon ...

  4. wraps的补充

    # import time# def index(name):# '''index函数'''# time.sleep(1)# print('Welcome %s to China'%name)# re ...

  5. 7天玩转 ASP.NET MVC

    在开始时请先设置firefox中about:config中browser.cache.check_doc_frequecy设置为1,这样才能在关闭浏览器时及时更新JS 第一.二天的内容与之前的重复,这 ...

  6. Web核心之Response对象

    http协议的响应部分 格式: HTTP/1.1 200 OK Content-Type: text/html;charset=UTF-8 Content-Length: 101 Date: Wed, ...

  7. python学习笔记(四)字符串及字符串操作

    字符串 字符串可以存任意类型的字符串,比如名字,一句话等等. 字符串还有很多内置方法,对字符串进行操作,常用的方法如下: name1='hello world' print(name.capitali ...

  8. springboot实战(汪云飞)学习-1-2

    java EE开发的颠覆者 spring boot 实战 随书学习-1 接上一篇,Java配置的学习(还是上一篇的项目中,添加新的包和代码): java配置是spring4.x推荐的配置方式,可以完全 ...

  9. iptables防火墙相关命令详解

    前提基础: 当主机收到一个数据包后,数据包先在内核空间中处理,若发现目的地址是自身,则传到用户空间中交给对应的应用程序处理,若发现目的不是自身,则会将包丢弃或进行转发. iptables实现防火墙功能 ...

  10. BZOJ 1018: [SHOI2008]堵塞的交通traffic(线段树分治+并查集)

    传送门 解题思路 可以离线,然后确定每个边的出现时间,算这个排序即可.然后就可以线段树分治了,连通性用并查集维护,因为要撤销,所以要按秩合并,时间复杂度\(O(nlog^2 n)\) 代码 #incl ...