帶工作箱的離子PWA-緩存字體不顯示

Question

我已經使用工作箱將現有的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"
};

Answer 1

緩存存儲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=查詢參數。

（順便說一句，每個支持服務人員的瀏覽器也都支持WOFF2字體，因此預緩存非WOFF2字體資源是浪費的。只需要預緩存WOFF2格式。）