Ionic icons are not getting cached in PWA

I am trying to do a PWA, when I run the app offline the back ionic icon is not visible properly. The button is actually back button but it is showing just a box.

The icons are done via a web font. Probably the web font file(s) will have to be added to the cache configuration thingie.

This might be a bug and worth reporting an issue on https://github.com/driftyco/ionic or even directly at https://github.com/driftyco/ionic2-app-base (where I assume this would have to be added to some file)

Thank you for the response @Sujan12 . I have created the issue. https://github.com/driftyco/ionic2-app-base/issues/165

Now it would be nice if you could research the solution on how to cache assets in PWAs and add that here and to the issue - this is all pretty new for everybody, so I don’t think the people working on that know it already.

Okay, I will try my best @Sujan12

The following code worked for me. Modification in service-worker.js

self.toolbox.precache( [ './build/main.js', './build/main.css', './build/polyfills.js', 'index.html', 'manifest.json', '/assets/fonts/ionicons.eot', '/assets/fonts/ionicons.scss', '/assets/fonts/ionicons.svg', '/assets/fonts/ionicons.ttf', '/assets/fonts/ionicons.woff', '/assets/fonts/ionicons.woff2' ] );

2 Likes

Hey! have you got any idea how to solve this on Ionic 4 ? I have ngsw-config.json file and i cant make it works.

2 Likes