SuperPWA CSS caching problem while editing

  • Resolved Amscram

    (@amscram)


    7 years, 10 months ago

    Hi, thank you very much for SuperPWA! I installed SuperPWA on my WordPress site. It works well and I am able to use “add to home screen” on my different mobile devices. I don’t see any bugs with that.

    As a note: I do not have any WordPress caching plugins installed and my server has no auto caching.

    The trouble I am having is when I edit my website. (I am still developing my website.) If I make a change to the HTML the change will show up correctly in the PWA when I refresh the app. For instance I change a word, save the page, refresh the app, and the change shows up nicely.

    HOWEVER, if I make a change to the child theme’s CSS, my changes do not show up in the PWA. If I refresh the app, close the app, clear the app data, it still will show my OLD CSS. My new CSS changes are not showing in the PWA.

    When I use Chrome dev tools to test my changes (my desktop PC) I am also having trouble now seeing my changes. I have the Chrome dev tools open with the checkbox to not use the cache while open. I also tried to use a private tab to test my changes. But there is still some unexpected caching happening ever since I installed SuperPWA.

    Everything works fine if I unistall SuperPWA.

    1. So my question is, does the Service Worker or SuperPWA cache CSS and not let new changes show up in the app even if it is refreshed?

    2. How can I fix this so that I can see immediately the result of my CSS edits again while I am continuing to develop my website?

    Thanks!

    • This topic was modified 7 years, 10 months ago by Amscram.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Arun Basil Lal

    (@arunbasillal)

    7 years, 10 months ago

    Hello @amscram

    Thanks for checking out SuperPWA! And for the kind words. Glad to hear it worked well across devices.

    This is most likely to be browser cache. CSS files are cached for a really long time.

    Please refer this video – https://youtu.be/Kx6CA4-TbqE

    SuperPWA is network first. So if network is available, it serves the live website and saves the most current copy to the cache. As long as the HTML is updated (and other factors such as browser cache is not playing in between), you should see the latest version of the page.

    How can I fix this so that I can see immediately the result of my CSS edits again while I am continuing to develop my website?

    In the functions.php of the child theme, you will likely find a wp_enqueue_style call that loads the style-sheet.

    Increment the $ver in the function and this will help bust the browser cache – https://developer.ww.wp.xz.cn/reference/functions/wp_enqueue_style/

    Please let me know how it goes.

    Thread Starter Amscram

    (@amscram)

    7 years, 10 months ago

    Hi Arun, thank you for the helpful response!

    You are correct. The trouble with my local editing was because of Chrome’s service worker caching. For anyone else experiencing trouble editing their page CSS and the changes not showing up on their PC, please do the following:

    In the Chrome devtools, under the application tab, select Service Workers. Then click “Update on reload” to force the current Service Worker to be replaced by a new Service Worker. Or if you want to temporarily stop the Service Worker from registering while you are editing your pages, you can select “Bypass for network” which will force the browser to ignore any active Service Worker and fetch resources from the network.

    Arun, can I ask two more questions?

    1. Is there a way that I can force the PWA to update to my current changes? For example, I edit several pages, and want the changes to appear on my customer’s PWA that they downloaded. Is there a way I can control that?

    2. If I change my icon or splash screen, I cannot make it show the change on a PWA that is already downloaded. Even if I uninstall the PWA, and reinstall it, the old icon and splash is being shown on my Android phone. Is there a way for me to force the new icon/splash to show on the PWA?

    Thanks!

    Thread Starter Amscram

    (@amscram)

    7 years, 10 months ago

    Hi Arun, I found the answer to my first question. Your suggestion to change the version number in functions.php forces the app to update fully. Thanks! 🙂

    I still don’t know how to fix the second question though.

    Arun Basil Lal

    (@arunbasillal)

    7 years, 10 months ago

    Hey @amscram

    Glad to hear that helped. That’s the ideal way to develop 🙂

    2. If I change my icon or splash screen, I cannot make it show the change on a PWA that is already downloaded. Even if I uninstall the PWA, and reinstall it, the old icon and splash is being shown on my Android phone. Is there a way for me to force the new icon/splash to show on the PWA?

    This one is tricky. You have to clear the browser cache. Please refer to these instructions from Jose on how to clear the browser cache.

    I have recently come across a possible way in which you could force this, but I haven’t had the chance to test it out. I will let you know if I find anything better.

    Best regards.

    Arun Basil Lal

    (@arunbasillal)

    7 years, 10 months ago

    Hello @amscram

    I am following up to see if my previous reply helped you. Please let me know.

    Best regards.

    Arun Basil Lal

    (@arunbasillal)

    7 years, 9 months ago

    Closing for lack of activity. Please feel free to continue the conversation as needed 🙂

    Have a relaxed weekend ahead! Best regards.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘SuperPWA CSS caching problem while editing’ is closed to new replies.