如何使用 javascript / typescript 清理磁盘缓存

Question

我的 PWA 遇到了一些麻烦。我在我的构建 forlder 中找到了名为“config.json”的字段。这一个可以由用户编辑以更改 url 后台服务器或其他选项。 问题是：

几次使用后，它存储在磁盘缓存中。我使用了 Service Worker(SW) 的 Network-only 方法，以便它始终加载网络。但是没有什么可做的，软件继续从磁盘缓存中加载它。 我创建了一个按钮，允许删除应用程序的整个缓存、注销软件并重新加载应用程序。它没有用。 我卸载了应用程序，清除了 chrome 下的站点数据。 但它不影响磁盘缓存。

唯一的方法是在 DevTools 的网络部分，右键单击并选择“清除浏览器缓存”。它在那里起作用。之后，文件从根文件夹加载，并且可以考虑更改。 但是在移动设备上无法访问此选项。

所以我想创建一个按钮来删除这个磁盘缓存。我寻找有关它的信息但找不到它。

在此先感谢您的帮助....

[磁盘缓存中的文件config.json] ()

来自 create-reate-app-pwa 的我的 SW.ts

/// <reference lib="webworker" />

import { clientsClaim } from 'workbox-core';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';

declare const self: ServiceWorkerGlobalScope;

clientsClaim();

precacheAndRoute(self.__WB_MANIFEST);

const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  ({ request, url }: { request: Request; url: URL }) => {
    if (request.mode !== 'navigate') {
      return false;
    }
    if (url.pathname.startsWith('/_')) {
      return false;
    }
    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    }
    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

self.addEventListener('install', ()=>{
  self.skipWaiting()
})

///////////////////////// CUSTOM service worker /////////////////////////////////  
self.addEventListener('fetch', event => {
  if (new URL(event.request.url).pathname.includes('config.json')) {
    event.respondWith(fetch(event.request));
  }
});

删除缓存存储按钮

async function reload() {
    try {
      if ('serviceWorker' in navigator) {
        await navigator.serviceWorker
          .getRegistrations()
          .then(function (registrations) {
            for (let registration of registrations) {
              registration.unregister()
            }
          })
      }
    } catch { }
    try {
      caches.keys().then(function (names) {
        for (let name of names)
          caches.delete(name)
      })
      localStorage.removeItem('i18nextLng')
      localStorage.removeItem("sessionID")
      localStorage.removeItem("username")
    } catch { }
    try {
      window.location.reload()
    } catch { }
  }

修改service worker方法，通过typescript清理缓存应用。创建按钮以清除有关 PWA 的所有数据，以从根文件夹重新加载所有文件。

编辑： 它适用于 firefox .... 如果在 devtools 中选中“禁用缓存”选项，它可以与 Chrome 一起使用

那么我如何确定此选项已激活或在 PWA 中使用打字稿手动激活？？？