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

Question

我仍然在纠结如何避免渐进式 Web 应用程序中的缓存问题。对于任何 PWA 缓存来说，至关重要的是能够更新 ServiceWorker 文件(我们称之为 sw.js)。但是细节让我有点困惑:

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

• 像 navigator.serviceWorker.register('sw.js?' + Date.now()) 这样的操作来避免 HTTP 缓存是否有意义？或者，如果服务器使用 ETag，我是否安全？

• 浏览器是否会在每次加载页面时检查网络以获取更新的 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

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

当你注册时，浏览器会为你的 PWA 安装你的 service worker。浏览器使用单独的工具来缓存和管理服务 worker 。缓存它不是您的责任。

向服务人员的文件名添加时间戳是一种反模式。根据有关 Service Worker Lifecycle 的文章，您应该 avoid changing the URL of your service worker script .

更值得关注的是您提出的关于更新服务 worker 的观点，浏览器如何知道何时进行更新？

嗯，根据Updating the service worker节来自 Service Worker 生命周期文章:

Most browsers, including Chrome 68 and later, default to ignoring caching headers when checking for updates of the registered service worker script. They still respect caching headers when fetching resources loaded inside a service worker via importScripts(). You can override this default behavior by setting the updateViaCache option when registering your service worker.

Your service worker is considered updated if it's byte-different to the one the browser already has. (We're extending this to include imported scripts/modules too.) The updated service worker is launched alongside the existing one, and gets its own install event.

If your new worker has a non-ok status code (for example, 404), fails to parse, throws an error during execution, or rejects during install, the new worker is thrown away, but the current one remains active.

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

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