与服务人员缓存/字体优化

Question

我有我的缓存文件fonts.css基本服务工作者的脚本。服务工作者越来越登记在页面加载在我的index.html文件，但我也是直接在我的index.html加载fonts.css文件。 它是正确的，在服务人员的文件将拦截请求，并与缓存fonts.css文件响应？抑或缓存fonts.css文件的浏览器仍然有权要求上市字体有没有影响？

我相信后者是怎么回事，但是这将是巨大的，如果有人能清楚的事情了我。是缓存整个字体不仅fonts.css文件夹的最佳方法？

Answer 1

该服务人员将需要缓存的CSS文件和相关的字体文件，浏览器加载该CSS文件中指定（.woff2，.TTF等）。

例如，使用谷歌字体Open Sans CSS文件时，各种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
  }
})