在大量缓存的站点上使用查询字符串版本标识符的Service Worker的最佳方法

琳·范(Linh Pham)

故事

我有一个使用传统浏览器缓存的网站,该网站缓存过多,静态内容长达365天。

为了在部署新版本后清除缓存,我使用了版本标识符的查询字符串,例如:

<script src="js/main.js?version=1.3.0"></script>

但是对于每个版本的升级,加载时间都很糟糕,因为当查询字符串更改时,浏览器需要下载所有新内容。


情况

现在,我们有了Service Worker,我已经将其集成到我的网站中。到目前为止一切都可以,版本标识符的查询字符串仍然得到使用。

// simply cache all the static contents
global.toolbox.router.get('/', global.toolbox.networkFirst); 
global.toolbox.router.get(/(.js|.css|.png|.jpg|.json|.html)/, global.toolbox.fastest);

而且仍然存在与SW集成之前相同的行为。但是升级总是像往常一样缓慢...


问题

我想知道是否有更好的方法?可以执行以下操作,并且仍然保持高速缓存机制(对于旧的浏览器):

  1. 找到新版本
  2. 仍使用最新版本的旧内容,
  3. 在获取新版本的所有新内容的过程中,
  4. 下次用户访问该站点时,他们将使用最新版本。

注意目标是在部署新版本时更快地加载站点

保存

正是服务人员生命周期的工作方式让我们来看看它的慢动作:

首先,您需要对服务工作程序进行字节级更改以强制对其进行更新:您可以包括应用程序的版本并将其存储在变量中var version = "1.0.0"

现在,浏览器将发现有一个新的服务工作者,它将触发其install事件。在该处理程序中,打开新的缓存(以网站版本命名。例如:),"cache-v" + version然后获取所有新资源。

在关闭由前服务工作人员控制的最后一个选项卡之前,新服务工作人员不会被激活。关闭所有选项卡并重新打开应用程序后,新的服务工作者将收到activate事件。在此处理程序中,您可以删除过时的缓存。

现在,您的服务工作者已准备好从新缓存中获取数据。

这里的关键点是:

  • 使用具有从应用程序版本派生的名称的缓存。
  • self.skipWaiting()在安装过程中不使用这样,您可以确保已经安装的服务工作者继续提供当前内容。
  • 在服务人员中更新版本以调用更新机制。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Laravel / Vue SPA中实施Service Worker的最佳方法

来自分类Dev

Rails项目:NoMethodError:字符串的未定义方法“标识符”

来自分类Dev

Rails项目:NoMethodError:字符串的未定义方法“标识符”

来自分类Dev

“缓存”口才查询的最佳方法

来自分类Dev

在Python中构造GraphQL查询字符串的最佳方法

来自分类Dev

建立缓存的最佳方法

来自分类Dev

缓存JSON的最佳方法

来自分类Dev

分割字符串的最佳方法?

来自分类Dev

这是计算字符串的最佳方法

来自分类Dev

创建字符串对象的最佳方法

来自分类Dev

生成字符串的最佳方法

来自分类Dev

解析此字符串的最佳方法?

来自分类Dev

Mongodb查询的最佳方法

来自分类Dev

存储字符串对列表以实现最佳查询性能的最佳方法

来自分类Dev

使用QSignalMapper的最佳方法

来自分类Dev

使用python集群字符串的最佳方法

来自分类Dev

在Racket中,有没有一种简单的方法可以将字符串转换为变量名(标识符)?

来自分类Dev

在Racket中,有没有一种简单的方法可以将字符串转换为变量名(标识符)?

来自分类Dev

处理Android应用程序中xml中大量字符串的最佳方法?

来自分类Dev

使用通用标识符连接字符串

来自分类Dev

在Android上绘制大量圆圈的最佳方法?

来自分类Dev

写入大量文件的最佳方法

来自分类Dev

存储大量数据的最佳方法

来自分类Dev

从大字符串到大量关键字匹配子字符串的最佳方法是什么

来自分类Dev

设置 DNS 缓存的最佳方法?

来自分类Dev

使用KeyListener / KeyListener方法标识标识符预期的错误

来自分类Dev

在Node JS上缓存数据的最佳方法

来自分类Dev

在LAN上缓存apt下载的最佳方法?

来自分类Dev

在Node JS上缓存数据的最佳方法

Related 相关文章

  1. 1

    在Laravel / Vue SPA中实施Service Worker的最佳方法

  2. 2

    Rails项目:NoMethodError:字符串的未定义方法“标识符”

  3. 3

    Rails项目:NoMethodError:字符串的未定义方法“标识符”

  4. 4

    “缓存”口才查询的最佳方法

  5. 5

    在Python中构造GraphQL查询字符串的最佳方法

  6. 6

    建立缓存的最佳方法

  7. 7

    缓存JSON的最佳方法

  8. 8

    分割字符串的最佳方法?

  9. 9

    这是计算字符串的最佳方法

  10. 10

    创建字符串对象的最佳方法

  11. 11

    生成字符串的最佳方法

  12. 12

    解析此字符串的最佳方法?

  13. 13

    Mongodb查询的最佳方法

  14. 14

    存储字符串对列表以实现最佳查询性能的最佳方法

  15. 15

    使用QSignalMapper的最佳方法

  16. 16

    使用python集群字符串的最佳方法

  17. 17

    在Racket中,有没有一种简单的方法可以将字符串转换为变量名(标识符)?

  18. 18

    在Racket中,有没有一种简单的方法可以将字符串转换为变量名(标识符)?

  19. 19

    处理Android应用程序中xml中大量字符串的最佳方法?

  20. 20

    使用通用标识符连接字符串

  21. 21

    在Android上绘制大量圆圈的最佳方法?

  22. 22

    写入大量文件的最佳方法

  23. 23

    存储大量数据的最佳方法

  24. 24

    从大字符串到大量关键字匹配子字符串的最佳方法是什么

  25. 25

    设置 DNS 缓存的最佳方法?

  26. 26

    使用KeyListener / KeyListener方法标识标识符预期的错误

  27. 27

    在Node JS上缓存数据的最佳方法

  28. 28

    在LAN上缓存apt下载的最佳方法?

  29. 29

    在Node JS上缓存数据的最佳方法

热门标签

归档