使用 Service Worker 缓存/优化字体

【问题标题】：Caching/Optimising Fonts with Service Worker使用 Service Worker 缓存/优化字体
【发布时间】：2019-02-05 16:36:12
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript css optimization fonts service-worker

【解决方案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
  }
})

【讨论】：