caching - PWA 最佳实践 : Web or Local Fonts?

Question

我正在构建一个 preact PWA(渐进式 Web 应用程序)，我不知道是应该将字体保留在外部以减小我的应用程序大小，还是将字体保留在本地以改进离线查看？最佳做法是什么？

Answer 1

更新，2021 年 2 月:浏览器通常朝着 partitioning the HTTP cache 的方向移动，这意味着类似 CDN 的 URL(例如 Google Fonts)不太可能由于不相关的 Web 应用程序先前请求过相同的 URL 而导致缓存命中。这消除了赞成使用来自 CDN 的字体的常见论点。类似 fontsource 的项目可以自动发送开源字体的本地副本，虽然这需要更多工作，但如果您最关心性能，我可能会选择它。

我不认为使用第三方或第一方托管的网络字体会根据您的要求产生差异。可以在服务 worker 内部使用缓存存储 API 来缓存一般的第一方或第三方请求，包括网络字体请求，并在离线时使用这些缓存资源。

加载网络字体有一些通用的最佳实践，并且 this article Zach Leatherman 的著作是我的首选引用书。不过，这些技术并不特定于构建具有离线功能的 PWA。