Service Worker 中的动态缓存加载答案

【问题标题】：Dynamic Cache Loading in Service WorkerService Worker 中的动态缓存加载
【发布时间】：2020-08-07 01:36:48
【问题描述】：

StackOverflow 美好的一天！

我担心我的软件。打开页面时。我不知道如何使用技术术语来解释这一点，所以我将根据我的观察来解释一下。

当我打开一个新主页时，它会加载页面并保存缓存。当我登录网站时，页面会发生变化，生成图像、用户名等。到目前为止一切都很好。当我注销时，我的预期页面应该是默认主页，但它仍然显示页面，就像用户登录网站时一样。

这发生在我的本地服务器、远程电脑和智能手机上（在网页和 PWA 应用上）

如果我删除生成的缓存，它会恢复正常。在这种情况下我该怎么办？

这是我的 sw.js 文件：

const dynamicCacheName = 'ver-v1';
// activate event
self.addEventListener('activate', evt => {
  evt.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys
        .filter(key => key !== dynamicCacheName)
        .map(key => caches.delete(key))
      );
    })
  );
});
// fetch event
self.addEventListener('fetch', evt => {
  evt.respondWith(
    caches.match(evt.request).then(cacheRes => {
      return cacheRes || fetch(evt.request).then(fetchRes => {
        return caches.open(dynamicCacheName).then(cache => {
          cache.put(evt.request.url, fetchRes.clone());
          return fetchRes;
        })
      });
    })
  );
});

【问题讨论】：

我认为当我注销时，缓存仍然认为我仍然登录到应用程序，因此它仍然显示登录页面。我该如何处理？
问题在于cache.put(...) 最有可能为用户保存 API 响应（即，您应该从缓存中排除 api 调用，这也会引发 API 中的新数据问题，因为旧的数据仍在缓存中）
其实cache.put(...)是保存所有缓存的那行代码。如果我对此发表评论，PWA 离线将无法正常工作
我会尝试使用它，看看我是否只能在我点击注销时删除缓存中的 API ..
我并不是要完全删除 cache.put 而是将其放在 if 语句中

标签： javascript caching progressive-web-apps service-worker

【解决方案1】：

您正在缓存经过身份验证的页面。您需要捕获用户何时退出并清除缓存页面并获取未经身份验证的版本。

有很多更复杂的方法可以处理这种情况，但我感觉有点超出你现在的水平。

只是一个提示。您可以在 Service Worker 中呈现和缓存响应。您可以在将请求发送到网络之前捕获请求并根据请求提供不同的版本。例如，您可以检查 Bearer 令牌是否在您的请求标头中。如果是这样并且它是当前/有效的，那么您将提供缓存的经过身份验证的版本，如果不是，则提供公共版本。

我会在我的应用程序中做各种类似的事情，甚至更多。 Service Worker 是一个很棒的工具，但它需要与我们过去不同的思维方式，有时这些概念很难掌握。

【讨论】：

【解决方案2】：

美好的一天。我使用了 Workbox，现在可以使用了，但是缓存太大而无法使用。

这就是我所做的：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

if (workbox) {
  const CACHE_PREFIX = 'v01';

  workbox.setConfig({
    clientsClaim: true,
    debug: true,
    skipWaiting: true
  });
  workbox.core.setLogLevel(workbox.core.LOG_LEVELS.warn);

  // Javascript and CSS rule
  workbox.routing.registerRoute(
    new RegExp('^.*(?:js|css)'),
    new workbox.strategies.NetworkFirst(
      { cacheName: `${CACHE_PREFIX}-asset` }
    ),
  );

  // Main rule
  workbox.routing.registerRoute(
    new RegExp('^.*(?:)'),
    new workbox.strategies.NetworkFirst(
      { cacheName: `${CACHE_PREFIX}-main` }
    ),
  );

} else {
  console.log(`Boo! Workbox didn't load ?`);
}

【讨论】：