使用 Service Worker 缓存/优化字体

Question

我有一个基本的 Service Worker 脚本来缓存我的 fonts.css 文件。服务工作者在我的 index.html 文件中的页面加载时注册，但我也在我的 index.html 中直接加载 fonts.css 文件。

Service Worker 文件是否会拦截请求并使用缓存的 fonts.css 文件进行响应？或者缓存 fonts.css 文件没有效果，因为浏览器仍然需要请求列出的字体？

我相信后者是正在发生的事情，但如果有人能为我解决问题，那就太好了。不仅是 fonts.css 文件，而且是缓存整个字体文件夹的最佳方法吗？

Answer 1

Service Worker 需要缓存 CSS 文件和浏览器加载的 CSS 文件中指定的相关字体文件（.woff2、.ttf 等）。

例如，当使用 Google Fonts Open Sans CSS文件时，各种 URL 会列出字体文件（URL 因您使用的浏览器和支持的字体类型而异）。

...

@font-face {
  src: url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hvIqOxjaPXZSk.woff2);
  src: url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hnIqOxjaPXZSk.woff2);
}
...

在此示例中，您的 Service Worker 可以缓存与域“fonts.googleapis.com”和“fonts.gstatic.com”匹配的所有文件

self.addEventListener('fetch', event => {
  if (/fonts.(googleapis|gstatic).com/.test(event.request.url)) {
    // process caching font files
  }
})