Javascript 如何仅缓存字体文件并从缓存中访问它们

我正在试图找出如何使用Promise来缓存内容类型为

的字体文件
font/woff
&
font/woff2


我想传入一个网站的url作为参数，承诺将获取所有与定义的
内容类型匹配的文件，并将它们放入
缓存


之后，我想从
缓存中访问缓存的字体文件

谁能帮我找出正确的方法。

提前谢谢
 您可以使用：

您可以在Chrome的
应用程序
选项卡中调试它
DevTools
什么是“缓存”
？你说的是哪个缓存？你为什么需要承诺呢？我指的是缓存功能，就像它在ServiceWorkers（）中实现的一样。谢谢，到目前为止，但是当我不知道绝对的
“路径/to/your/font/files”
时，我能做些什么呢？是否可以仅在站点请求中搜索具有定义内容类型的文件？这将取决于您的工具，例如，如果您正在使用
Webpack
，很遗憾，我没有使用Webpack。我使用的是没有任何插件的经典ES6-JS。你看到另一种可能性了吗？你根本没有使用任何构建工具吗？直到现在，在这个项目中，答案是否定的。在其他项目中，我喜欢使用npm。
self.addEventListener('install', (event) => {
  event.waitUntil(caches.open('your-cache-name').then((cache) => {
  console.log('installing service worker', event);
  return cache.addAll([
    'paths/to/your/font/files',
   ]);
 }));
});

self.addEventListener('fetch', (event) => {
  event.respondWith(caches.match(event.request).then((response) => {
  if (response) {
    return response;
  }
  return fetch(event.request);
 }).catch(err => console.log('nope not in the cache', err)));
});