Ionic PWA with Workbox - 缓存字体未显示

Question

我已使用工作箱将现有的Ionic应用程序配置为PWA。一切似乎都在Firefox中运行良好。但是在Chrome中，无论是在Windows 10还是Android上，都无法在缓存中找到许多字体文件。

我已经确认这些文件确实存在于缓存中：

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

编辑18/11/2017

我的服务人员代码非常简单：

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

Cache Storage API使用URL作为键，默认情况下，使用完全匹配完成查找。因此，您要缓存assets/fonts/ionicons.woff2之类的网址，但请求带有其他查询参数的网址，例如assets/fonts/ionicons.woff2?v=3.0.0-alpha.3，但不匹配。

您有几个选择：

• 您是否有网络应用请求没有v=参数的网址。 （如果您使用它来对资源进行版本控制，请考虑在文件名中添加哈希值，然后预先缓存包含这些哈希文件名的URL。）

• 在为预先缓存的资源执行缓存匹配时，使用ignoreUrlParametersMatching: [/^v$/] Workbox configuration parameter忽略v=查询参数。

（另外，支持服务工作者的每个浏览器也支持WOFF2字体，因此预先缓存非WOFF2字体资源是浪费。只需要预先缓存WOFF2格式。）