0

故事

我有一个使用传统浏览器缓存的网站，该网站被大量缓存，静态内容长达 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. 下次用户访问该站点时，他们将使用最新版本。

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

4

1 回答 1

4

这正是服务工作者生命周期的运作方式。让我们以慢动作看它：

首先，您需要对 service worker 进行字节级别的更改以强制对其进行更新：您可以包含应用程序的版本并将其存储在 variablevar version = "1.0.0"中。

现在浏览器会发现有一个新的服务工作者，它会触发它的install事件。在该处理程序中，打开您的新缓存（以您的站点版本命名。例如：）"cache-v" + version并获取所有新资源。

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

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

这里的要点是：

  • 使用从应用程序版本派生的名称的缓存。
  • self.skipWaiting()在安装过程中不要使用。这样可以确保已安装的 service worker 继续为当前内容提供服务。
  • 更新服务工作者中的版本以召唤更新机器。
于 2016-06-21T20:01:11.013 回答