我有一个基本的 Service worker 脚本，用于缓存我的 fonts.css 文件。
service worker 正在我的 index.html 文件中的页面加载中注册，但我也在我的 index.html 中直接加载 fonts.css 文件。
Service Worker 文件将拦截请求并使用缓存的 fonts.css 文件进行响应是否正确？
还是缓存 fonts.css 文件没有效果，因为浏览器仍然需要请求列出的字体？
我相信后者是正在发生的事情，但如果有人能为我解决问题，那就太好了。缓存整个字体文件夹而不仅仅是 fonts.css 文件的最佳方法是什么？
最佳答案
Service Worker 需要缓存浏览器加载的 CSS 文件和在该 CSS 文件中指定的相关字体文件(.woff2、.ttf 等)。
例如，当使用谷歌字体时 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
}
})
关于javascript - 使用 Service Worker 缓存/优化字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49552953/