Search code examples
ionic2progressive-web-appsworkbox

Ionic PWA with Workbox - Cached fonts not displaying

I have configured my existing Ionic app as a PWA using workbox. All seems to work fine in Firefox. However in Chrome, both on Windows 10 and Android, a number of font files are not found in the cache.

enter image description here

I have verified that those files do exist in the cache:

Proof that they do exist in the cache

Does anyone have any idea what is going on? Why can't the files be found in the cache? The result is that my toolbar icons appear as empty rectangles.

EDIT 18/11/2017

My service worker code is very simple:

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

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

My workbox-cli-config.js file contains the following:

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"
};
Solution

  • The Cache Storage API uses URLs as keys, and by default, the lookups are done using exact matches. So you're caching URLs like assets/fonts/ionicons.woff2 but requesting URLs with an additional query parameter, like assets/fonts/ionicons.woff2?v=3.0.0-alpha.3, and that doesn't match.

    You have a few options:

    • Have you web app request the URLs without that v= parameter. (If you're using it to version your resources, consider adding in hashes to the filenames instead, and then precaching the URLs that include those hashed filenames.)

    • Use the ignoreUrlParametersMatching: [/^v$/] Workbox configuration parameter to ignore the v= query parameter when performing cache matches for precached resources.

    (As an aside, every browser that supports service workers also supports WOFF2 fonts, so it's a waste to precache non-WOFF2 font resources. Only the WOFF2 format should need to be precached.)