0

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

在此处输入图像描述

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

证明它们确实存在于缓存中

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

编辑 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"
};
4

1 回答 1

2

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

你有几个选择：

  • 您是否让 Web 应用程序请求不带该v=参数的 URL。（如果您使用它来对资源进行版本控制，请考虑将散列添加到文件名中，然后预缓存包含这些散列文件名的 URL。）

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

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

于 2017-11-21T16:20:30.853 回答