使用Service Worker缓存/优化字体

Question

我有一个基本的Service Worker脚本，可以缓存我的fonts.css文件。该Service Worker在我的index.html文件中页面加载时注册，但我也直接在index.html文件中加载了fonts.css文件。

那么，Service Worker文件是否会拦截请求并使用缓存的fonts.css文件进行响应呢？还是说缓存fonts.css文件没有效果，因为浏览器仍然必须请求列表中列出的字体？

我认为后者是正确的，但如果有人能够澄清这个问题，那就太好了。将整个fonts文件夹缓存起来是否是最好的做法？

- Niklas

Answer 1

服务工作者需要缓存浏览器加载的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);
}
...

在这个例子中，您的服务工作者可以缓存与域“fonts.googleapis.com”和“fonts.gstatic.com”匹配的所有文件。

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

- AnthumChris