使用工作框缓存谷歌字体

Question

有人可以帮忙告诉我如何使用workbox-build缓存谷歌字体吗？我想在文件中包含要预缓存的 url，但这对我来说是不可能的。与普通的服务工作者不同，我所要做的就是在安装事件期间将 url 包含在要缓存的文件列表中。拜托我整天都坚持这个。

Answer 1

您可以使用workbox-webpack-plugins在 webpack 配置中缓存 google 字体：

import { GenerateSW } from 'workbox-webpack-plugins';

然后将以下 fn 放入您的插件中：

new GenerateSW({
runtimeCaching: [
{
urlPattern: /^https://fonts.gstatic.com/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'google-fonts-webfonts'
}
}
]
}),

这是谷歌常用食谱的略微修改版本，链接在不同的答案中。上面的代码在运行时看起来与工作框 fn 相同。

https://developers.google.com/web/tools/workbox/guides/common-recipes

Answer 2

我设法使用以下方法缓存谷歌字体：

workbox.routing.registerRoute(
/^https://fonts.googleapis.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
})
);

来自： https://developers.google.com/web/tools/workbox/guides/common-recipes

Answer 3

由于底层网址的性质不同，而且在下载 CSS 定义之前，您不知道字体文件的特定版本化网址是什么，因此无法预缓存 Google 字体。

有关使用Workbox和Google字体的当前推荐最佳实践，请参阅Workbox文档。

作为替代方案，如果您确实想要预缓存字体，我建议您找到一个在宽松许可证下可用的字体系列，并在您自己的 Web 服务器上托管它的副本。将其与其他资产一起保留在本地应该可以直接使用 Workbox 进行预缓存。

Answer 4

基于凯莉的伟大答案的 webpack 通用食谱的精确副本

new WorkboxPlugin.GenerateSW({
//clientsClaim: true,
//skipWaiting: true,
runtimeCaching: [
{
urlPattern: /^https://fonts.googleapis.com/,
handler: "StaleWhileRevalidate",
options: {
cacheName: "google-fonts-stylesheets"
}
},
{
urlPattern: /^https://fonts.gstatic.com/,
handler: "CacheFirst",
options: {
cacheName: "google-fonts-webfonts",
cacheableResponse: {
statuses: [0, 200]
},
expiration: {
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30
}
}
}
]
})