Javascript 添加Workbox脱机支持和html缓存

我试着从workbox开始。我想把我的网站编码为PWA。它应该离线工作。为此，我想使用CacheFirst策略。我的问题是，工作台不能脱机工作。我甚至在缓存中找不到我的主html文件。
以下是我在主html文件中对ServiceWorker的初始化：

<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./service-worker.js');
      });
    }
  </script>  

你看，我初始化它并根据需要设置它。但是正如您所看到的，没有html缓存。为什么？同样，它不能脱机工作。附加信息：我正在通过HTTPS运行该网站，因为它是服务人员所需要的。希望有人能帮我。

---

~Marcus

HTML没有被缓存，因为它们很可能是在没有扩展名

.HTML

的情况下加载或链接的，如下所示：

https://example.com/

<a href="/about">About</a>

CSS、JS和图像资源被正确缓存，因为它们很可能是用文件扩展名加载的，文件扩展名与传递给Workbox的RegExp模式相匹配

要解决此问题，请确保用于请求HTML页面的URL与模式匹配。实现这一点的一种方法是访问它们或使用

.html

扩展名链接到它们：

workbox.routing.registerRoute(
  /\.html/,
  ...
);

https://example.com/index.html
https://example.com/about.html

<a href="/about.html">About</a>

https://example.com/index.html
https://example.com/about.html

<a href="/about.html">About</a>

function matchFunction({ url }) {
  const pages = ['/', '/about'];
  return pages.includes(url.pathname);
}

workbox.routing.registerRoute(
  matchFunction,
  new workbox.strategies.CacheFirst({
    cacheName: 'html-cache'
  })
);