workbox - 使用工作箱缓存谷歌字体

Question

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

Answer 1

你可以使用 workbox-webpack-plugins 在你的 webpack 配置中缓存谷歌字体:

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

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

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

这是在不同答案中链接的 Google 通用配方的略微修改版本。上面的代码在运行时看起来与工作箱 fn 相同。

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