Service Worker 缓存在用户更改时重置答案

【问题标题】：Service Worker cache to reset on user changeService Worker 缓存在用户更改时重置
【发布时间】：2019-10-30 08:32:23
【问题描述】：

我已经在我正在开发的应用程序上安装了一个基本的 Service Worker。

当用户退出并使用其他用户名登录时，此 Service Worker 会导致很多问题。甚至有时它会阻止登录。

我基本上知道发生了什么，但我不知道如何解决它。

所以，我的应用程序仅限于登录用户，因此未经授权的用户只能查看登录页面。

我的第一个问题是，当用户登录时，仪表板页面会被缓存，如果他们退出并以其他用途登录，则会显示第一个用户的仪表板。（它在页面顶部显示错误的用户名）

第二个问题是，有时登录页面的缓存方式会不断将用户重定向回登录页面，即使他们已成功登录。

一旦用户执行ctrl + f5，所有这些问题都将完全解决，因为这不会使用缓存并直接从网络获取所有内容。

这是我的sw.js 文件：

importScripts( '/cache-polyfill.js' );

var CACHE_NAME = 'XYZ-cache-v0.4.16';

var assetsToCache = [
    // A list of CSS, JS, Images and font files
];

self.addEventListener( 'install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(assetsToCache))
  );
});

self.addEventListener('activate', async (e) => {
  e.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if(CACHE_NAME.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((r) => {
      return r || fetch(e.request).then((response) => {
        return caches.open(CACHE_NAME).then((cache) => {
          cache.put(e.request, response.clone());
          return response;
        });
      });
    })
  );
});

【问题讨论】：

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

【解决方案1】：

好吧，您应该首先考虑缓存 PII (https://en.wikipedia.org/wiki/Personal_data) 是否明智。如果这是您真正需要的，那么您应该实现一种机制，在第一个用户的会话到期时清空缓存。

您可以在注销发生时使用postMessage API (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 向 Service Worker 发送消息。然后，在您的 Service Worker 内部，有一些清空缓存的功能。

仅此一项 - 当用户专门单击“注销”时清空缓存 - 很可能是不够的。登录会话通常限制在某个时间范围内，因此您需要有逻辑来检测会话何时结束并清除缓存，即使用户没有单击注销也是如此。

也许登录页面根本不应该被缓存 - 当没有连接时它不能工作，对吧？

【讨论】：

【解决方案2】：

我的应用遇到了同样的问题。从 sw.js 中的缓存文件列表中删除我的主页并清除 borwser 中的 cahe 对我的情况有所帮助。

【讨论】：