首页 文章

在服务工作者中预取资产真的是最好的主意吗？

提问于
浏览 次
2

我已经看到，使用Service Workers的所有脱机Web应用程序示例都包含以下模式，用于在安装时预取其资产：

self.addEventListener('install', function(event) {
  event.waitUntil(caches.open('assets').then(function(cache) {
      return cache.addAll([
        '/',
        '/static/all.css',
        '/static/script.js',
        ...
      ])
    }));
});

但是，我遇到了以下问题：

  • 首次加载时，资产被提取两次，一次是在初始页面加载期间（服务工作者处于活动状态之前），再次安装服务工作者 .

  • 安装过程中预先获取的响应是否可能会自动从缓存中删除（当网站暂时没有访问或存储时运行不足时）？

  • 编译和维护完整的资产清单是一件麻烦事 . 有时它甚至是不可能的，例如使用Google字体只知道CSS的位置，但字体本身的位置因浏览器的不同而有所不同 .

或者，我可以在第一次请求时缓存资产，这将消除上述问题 . 但是这种方式显然无法保证在用户下线时填充缓存 . 可能通过在 Link Headers 中注册服务工作者来减轻这种情况，使其可能在请求资产时运行 . 当然，这仅适用于单页面应用程序，其中每个页面视图都请求所有资产 .

或者有更好的做法吗？

javascript service-worker

1 回答

  • 1

    我建议使用像Workbox（我工作）或offline-plugin这样的工具自动生成资产列表以预先缓存 .

    我还建议关注服务工作者注册的these best practices，这会延迟注册，直到您的页面加载了其初始内容 .

    此时，您可以告诉您的服务工作者尊重永远不会更改的资产的HTTP缓存（在工作箱中，这是使用 dontCacheBustUrlsMatching configuration parameter完成的），您可以安全地从HTTP缓存中读取，就像大多数HTML文档一样，这些将最终下载两次 .

    回复于

相关问题