HUGE! PWA caching issues

Ionic Framework ionic-v3
1

Hi there,

We are developing a PWA using Ionic 3.

One of our main issues, which slows us down and is quite frustrateing, is the html/css caching. When we make changes to the HTML or CSS, these changes are hardly picked by the browser, getting lost in the compilation and refresh processes.

What we need to do, using Chrome dev tools, is completely delete data app data, stop the ionic:serve script, run npm run clean, and start again. And that is for many changes that apply to the HTML or CSS. The typescript files are updated correctly, generally speaking.

If this goes on, we are thinking in getting rid of Ionic and use plain Angular with a service worker, but this is not our preferred option for the moment if we can solve this huge and frustrating caching issue…

Any tips?

2

Hard reload does it for me… when I make a change, save it, and the app reloads, just hitting ctrl-F5 (in Chrome) seems to do it…

BUT, it is annoying to have to do that too :slight_smile:

3

Thanks bgies, I hope we can simplify our process to match yours…

4

It turned out that commenting the worker script solved the issue. Even with the Update on reload and Bypass for network flags checked, the service worker failed to refresh the code.

5

Are you using workbox? If not, remove the default service worker, replace it with workbox and modify your build package.json to only use in when you run a production build and voilà no cache while developing