我应该在 PWA 中缓存 ServiceWorker 文件吗？

Question

我仍然在努力如何避免渐进式 Web 应用程序中的缓存问题。任何 PWA 缓存的关键是能够更新 ServiceWorker 文件（我们称之为 sw.js）。但细节让我有点困惑：

• 可以navigator.serviceWorker.register('sw.js')在每个页面加载时执行，因为register()更新应用程序缓存，或者如果一切都是最新的，则什么都不做——对吗？

• 做一些类似navigator.serviceWorker.register('sw.js?' + Date.now())避免 HTTP 缓存的事情有意义吗？或者，如果服务器使用 ETags，我是否安全？

• 浏览器是否在每次页面加载时检查网络是否有更新的 sw.js？我有时在网络检查器选项卡中看不到它。

• 如果 sw.js 在应用程序缓存中，浏览器是否会在不检查服务器更新的情况下从那里获取它？

• 我有时会看到像这样缓存自己的 ServiceWorker 演示脚本：

  self.addEventListener('install', ev => {
      const myCaches = {
          app: {...}, 
          sw: {
              files: [
                  '/sw.js'
              ],
              version: '1'
          }
      }
      for (let name in myCaches) {
          const cacheName = name + '-' + myCaches[name].version
          ev.waitUntil(
              caches.has(cacheName).then(uptodate => {
                  if (uptodate) return true
                  caches
                      .open(cacheName)
                      .then(cache => {
                          cache.addAll(myCaches[name].files)
                      })
              })
          )
          // clear old caches
      }
  })
  

这是有道理的，这是好的做法吗？它是否使更新缓存更可靠？

Answer 1

我见过的大多数代码示例都没有将 service worker 文件添加到缓存中。根据我的经验和我的理解，离线模式没有必要工作。

当您注册 PWA 时，浏览器将为您的 PWA 安装您的 Service Worker。浏览器使用单独的工具来缓存和管理 Service Worker。缓存它不是您的责任。

在 service-worker 的文件名中添加时间戳是一种反模式。根据 Service Worker Lifecycle 上的文章，您应该避免更改Service Worker脚本的 URL。

更令人担忧的是您提出的关于更新 Service Worker 的观点，浏览器如何知道何时执行此操作？

好吧，根据Service Worker Lifecycle 文章中的更新Service Worker 部分：

大多数浏览器，包括 Chrome 68 及更高版本，在检查注册的 Service Worker 脚本的更新时默认忽略缓存标头。当通过importScripts(). 您可以通过updateViaCache在注册 Service Worker 时设置该选项来覆盖此默认行为。

如果您的服务工作者与浏览器已有的服务工作者字节不同，则认为它已更新。（我们也将其扩展为包括导入的脚本/模块。）更新后的 Service Worker 与现有 Service Worker 一起启动，并获得自己的install事件。

如果您的新工作人员具有非正常状态代码（例如 404）、无法解析、在执行过程中抛出错误或在安装过程中被拒绝，则新工作人员将被丢弃，但当前工作人员仍处于活动状态。

如果您在离线模式下测试了 PWA，您会注意到浏览器在尝试检索您的sw.js文件时会在控制台中产生错误。这没什么好担心的。正如上面最后一点所说，“当前保持活动状态”。

我想知道人们在离线模式下测试并将 service worker 文件添加到缓存中时是否会被 service worker JavaScript 控制台中的这个 404 条目所吸引？它可能会花费时间和磁盘缓存浏览器中不必要的文件，从而对您的站点及其用户造成损害。