Preact-cli: How to invalidate (bust) cache

[haggen]

I started a small SPA with preact-cli using the simple template. I've hosted it on Netlify, auto-building from GitHub. It's working fine but every time I update it I have to clear the cache before seeing the changes.

I'm using preact-cli 2.1.0 and here's my repo: https://github.com/haggen/localthreat

My users are complaining they don't see it at all even after a page reload.

I'm new to (P)React so I might be missing something here. What can I do invalidate the assets I have online?

Thanks in advance.

[lukeed]

Most likely an issue with service-worker. /cc @prateekbh

[haggen]

I found out what it was. Part my mistake, part misunderstanding. :P Thanks anyway!

[prateekbh]

@haggen great... but it'd be really nice if u can leave a sentence or two on what exactly happened there

[haggen]

Well to make the SPA work correctly Netlify supports redirects so any invalid path is redirected to /index.html. The way you do this is by creating a file named _redirects with the rules you want at the root of your site. I created one and put it inside the assets directory wrongly thinking it would end up at the root. That was my mistake.

The misunderstanding part is that Chrome seems to go the extra mile and make it work nonetheless. I mean, I can hit an invalid URL and by some magic my browser delivers the /index.html resource and it just works. So I thought everything was just fine. Until like half of my users started complaining they were getting 404 all the time. Even other Chrome users. That threw me off really bad. Until an hour ago when I went retracing my steps and noticed my mistake.

I guess that clears it up.

Thanks again, and happy new year!

[lukeed]

Great, thanks for posting! I'm sure you're not the first nor the last, so others will find this useful :D

[haggen]

@prateekbh Actually I'm still having this problem. There are some users still seeing old versions of CSS and JS. All of them have previously visited the site and seem to be stuck with those files cached.

[prateekbh]

@haggen is it possible to give us the URL of the site?

Also, the way service worker works is that it has your static assets cached. So if u deploy a new version next time your users will still see older version and download the new SW.

Hence its always next + 1 visit for your users to get the fresh content.

To avoid this you might show a snackbar or some other UI to tell your users to refresh as soon as new SW is installed and get the latest improvements ASAP

[haggen]

https://localthreat.xyz/

I figured out about the n + 1 visit cause that how it's been working for me so far. But there still a handful of users that have previously visited the site but have not gotten the updated assets. Even now if I asked them to refresh the page it still cached. One of them reported to me that only got it working after manually clearing the site storage in dev tools.

[prateekbh]

Your latest SW throws error and is not getting installed at all. Do you think that might've been the issue.
Since it'll people from getting the new assets

[haggen]

You mean this?

sw.js:1 Uncaught (in promise) Error: Request for https://localthreat.xyz/_redirects?_sw-precache=24451388c2fc69419fac47ca08311257 returned a response with status 404

How come it works for me and other people without clearing cache?

Anyway you're saying that if one file is missing the whole thing doesn't work? Damn that's bad design.

OK so I'm open to suggestions. The _redirects is a configuration file meant for the Netlify servers and it gets removed before being hosted for the public. I included it in the assets/ dir and used one of the recipes in this repo's wiki to copy it as it is to the root of the build dir. Why SW is tracking it in the first place? How do I opt it out?

[prateekbh]

Anyway you're saying that if one file is missing the whole thing doesn't work? Damn that's bad design.

Well the way it works is, if there's any error in installation/activation phase then new SW wont get activated.

Also using preact-cli-sw-precache-plugin u can just exclude this file from precaching(just precache html/css/js). and you should be fine

[haggen]

@prateekbh Thank you for your time in this matter. I actually managed just using the copy-webpack-plugin and copying the _redirects from a different directory than assets/.

I'll just leave my two cents here and say that although preact-cli templates are wonderful for picking up, it gets in the way real quick. Mine is such a small application (2 screens, a handful of component) and I already detected a bunch of issues due to the project opaqueness. A summary of its components and their function within the context of your application -- what is copied where, which files get what transformations, etc. -- would come a long way.

Thanks again! o/

[reznord]

@haggen sure, I thanks for your input on this. I will be drafting a post today regarding preact-cli which covers most parts.

[Bomper]

Same problem here: users don't get the updated version of the site even after manually hard refreshing (Ctrl+Shift+R) repeatedly. The only way to force getting the new pages is to unregister the service worker. This is unacceptable.

The setup I'm using is very barebones: preact build --no-prerender && sudo cp -r build/* /var/www/mysite/. From there it's served by nginx (nothing special in the config). I've generated the app with preact create material myapp (preact-cli 2.2.1) and haven't modified the SW. No errors in the console.

What's going on?

That snackbar plugin to tell the users to refresh would be really great.

[haggen]

@Bomper In my case the error being thrown was screwing the service worker so it wasn't working correctly. Since the error was not always being thrown it worked some of the time which made it look like the error was no big deal.

If you're getting any JavaScript errors in the console at all try investigating and fixing those.

[Bomper]

@haggen: not getting any errors in the console, as can be seen under that "here" link.

[haggen]

@Bomper Actually you are just not on the first visit, but after one refresh.

Update: I just noticed it's actually a second error. The first one was in index.js inject.preload.js but I accidentally clicked on the back button before I could take a screenshot.

Update 2: Here you are.

Update 3: It seems that if the service worker can't deliver all the assets it's supposed to it breaks completely.

[prateekbh]

i am not seeing anything while visiting the link... Is it resolved ?

[Bomper]

I've deployed a new version and the new assets got loaded after the second Ctrl+R. Didn't see any console errors.

It seems that if the service worker can't deliver all the assets it's supposed to it breaks completely.

This seems good to fix, @prateekbh ? One missing asset, like an icon, shouldn't break everything.

[prateekbh]

actually there's something we should do. We should only pre-cache html/css/js by default unless specified otherwise.

CC: @lukeed @developit @reznord @ForsakenHarmony WDYT?