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

【问题标题】：Ionic PWA with Workbox - Cached fonts not displaying带有 Workbox 的 Ionic PWA - 缓存字体不显示
【发布时间】：2017-11-17 07:45:52
【问题描述】：

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

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

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

2017 年 18 月 11 日编辑

我的 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"
};

【问题讨论】：

你也可以发布你的服务工作者的那部分吗？
@Niladri 我已将我的服务工作者代码和配置添加到我的问题中

标签： ionic2 progressive-web-apps workbox

【解决方案1】：

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

你有几个选择：

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

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

【讨论】：

感谢您的回复杰夫。我正在努力使用 ignoreUrlParametersMatching 选项。我正在使用injectManifest()。文档说我必须因此在 WorkboxSW 构造函数中传递所需的值。我尝试将 swSrc 文件中的构造函数修改为： const workboxSW = new self.WorkboxSW([{ignoreUrlParametersMatching: [/^v$/]}]);然而这并没有奏效。仍然找不到字体文件。我猜我的语法错误。你能指出我正确的方向吗？
我解决了。我只需要在ignoreUrlParametersMatching 周围加上引号。 new self.WorkboxSW([{"ignoreUrlParametersMatching": [/^v$/]}]);