带有 Workbox 的 Ionic PWA - 缓存字体不显示

Question

我已经使用工作箱将我现有的 Ionic 应用程序配置为 PWA。在 Firefox 中似乎一切正常。然而在 Chrome 中，在 Windows 10 和 Android 中，许多字体文件都没有在缓存中找到。

我已验证这些文件确实存在于缓存中：

有谁知道发生了什么事吗？为什么在缓存中找不到文件？结果是我的工具栏图标显示为空矩形。

编辑 2017 年 11 月 18 日

我的 service worker 代码很简单：

importScripts('workbox-sw.prod.v2.1.1.js');

const workboxSW = new self.WorkboxSW();
workboxSW.precache([]);

我的 workbox-cli-config.js 文件包含以下内容：

module.exports = {
    "maximumFileSizeToCacheInBytes": "5MB",
    "globDirectory": "www\",
    "globPatterns": [
        "**/*.{xod,eot,svg,ttf,woff,woff2,ico,png,js,css,gif,html,cur,json,otf}"
    ],
    "globIgnores": [
        "..\workbox-cli-config.js"
    ],
    "swSrc": "src/sw.js",
    "swDest": "www/sw.js"
};

Answer 1

缓存存储 API 使用 URL 作为键，默认情况下，查找是使用精确匹配完成的。因此，您正在缓存 assets/fonts/ionicons.woff2 之类的 URL，但请求带有附加查询参数的 URL，例如 assets/fonts/ionicons.woff2?v=3.0.0-alpha.3，这不匹配。

您有几个选择：

您的 Web 应用程序请求 URL 时是否没有 v= 参数。（如果您使用它来对您的资源进行版本控制，请考虑将哈希添加到文件名中，然后预缓存包含这些哈希文件名的 URL。）
在为预缓存资源执行缓存匹配时，使用ignoreUrlParametersMatching: [/^v$/]Workbox configuration parameter忽略v=查询参数。

（顺便说一句，支持service workers的浏览器也都支持WOFF2字体，所以预缓存非WOFF2字体资源是一种浪费。只有WOFF2格式的才需要预缓存。）

带有 Workbox 的 Ionic PWA - 缓存字体不显示

Ionic PWA with Workbox - Cached fonts not displaying

ionic2

progressive-web-apps

workbox