CSS/JS does not get updated when updating via "New content available" banner

[mattpopovich]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

It seems like every time I update chirpy versions, my site / the PWA stays cached locally (even after pressing "update" to new content available). Pressing update does not fix things. The images show "loading" animations (shimmer from left to right). Some CSS/JS is broken. The only way to fix it is to force refresh.

Maybe pressing update only brings in new posts? And the CSS/JS stays cached?

Example screenshot after updating my site from chirpy 7.3.1 to 7.6.0. Notice the mode-toggle buttons rendering as a plain bulleted text list instead of styled icons, plus the image stuck mid-shimmer (hard to tell from screenshot):

Loading it in an incognito window:

You can't tell from this screenshot but I also updated the favicon whenever I upgraded to 7.6.0 and the new icon is not present in the cached version of the website.

Steps To Reproduce

• Generate website from chirpy-starter at v7.3.1
• Load website in browser
• Upgrade website to v7.6.0
  • git fetch chirpy-starter --tags where chirpy-starter points to git@github.com:cotes2020/chirpy-starter.git
  • git merge v7.6.0
• Load website in browser, see cache issues (image shimmering, favicon not updated, mode-toggle buttons rendering as plain bulleted list)

Expected Behavior

Clicking the "Update" button whenever there is new content available would bring in the new content (text posts) as well as anything else that changed.

Environment

• Ruby: ruby 3.1.6p260 (2024-05-29 revision a777087be6) [aarch64-linux]
• Jekyll: jekyll 4.4.1
• Chirpy: 7.6.0

Anything else?

The screenshot shows some console errors when loading the page.

[mattpopovich]

I have since went back to my website in the same browser and the "new content available" button appeared again. I clicked it, and it seems to have refreshed some things: the favicon has been updated, the "loading" animations on images in the posts are gone, no errors in the console. However, there still seems to be an issue with the new mode-toggle buttons.

[cotes2020]

The PWA installation and update process is quite straightforward: when a new version is detected, all CSS/JS caches from the previous version are completely cleared, and the new version is installed. Please verify this without any browser extensions interfering.

For local testing, check out the repository to the previous commit hash:

1. bundle install → ./tools/run.sh -p (this will launch the PWA)
2. Access http://127.0.0.1:4000/ in an incognito browser window (keep the tab open).

Then switch to the latest commit, repeat step 1 above, and wait a few seconds in the tab opened in step 2. The PWA will detect the update, at which point you can verify that the update refreshes the CSS/JS files.