#Disabling the cache on index.html with service worker

11 messages · Page 1 of 1 (latest)

last cargo
#

How do I disable the cache for index.html, but keep it active for my js file?

Would removing /index.html in ngsw-config.json do the trick?

{
  ...
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
delete--> "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
   ...
  ]
}
twin crow
#

I’m no Angular expert, but while it’s been a LONG time, I did have a fair amount of experience working with Manifest files once upon a time

So take my words with a grain of salt here… 🧂

First, Angular. In my limited knowledge of Angular, I DO believe that removing the index file from there, is likely to just make it so that every time you build your app, you just don’t even have an index file at all… again, could be wrong, but I definitely have the feeling that wouldn’t be the best idea

Second, regarding your cache manifest file. Like I said, it’s been some time (years actually), but I’m pretty confident that you should be able to achieve all the things you want, whatever it is specifically that you’re trying to do, simply by writing it into the manifest and configuring it properly

So I might hit up some MDN Developer docs about how to use the cache manifest file first before you do anything else. I’ll think you’ll find what you’re looking for by going down that route rather than trying to find an Angular solution

last cargo
#

I want any person coming back to the website to get the latest version. Still want people currently using the website to be prompt to update the app.

#

Not caching the index.html file would achieve that.

twin crow
#

I’m not disputing what you want to achieve, I’m just telling you that…
#1 - I don’t believe it has anything to do with Angular
#2 - As such, I wouldn’t remove the index from that file, particularly as I believe that means it won’t be included at all in your builds
#3 - You should be able to accomplish what you want entirely through that manifest.webmanifest file, which is officially known as a “Cache Manifest”
#4 - So I’d pull up the official documentation for cache manifests and see if the answers you’re looking for aren’t in there

If the cache manifest can’t achieve what you’re trying to do, then you’ll likely need to make modifications to the index file itself, as well as possibly the server, in order to set appropriate headers, cookies, unique and random URL parameters to spoof the browser into thinking every time it loads your index page that it’s doing it for the first time, stuff like that

There’s lots of methods for achieving what you want to do, and I DO believe that not only is Cache Manifest one of them, but also likely the easiest

If I’m wrong, and it’s not capable of this, there are many more known methods you can try out instead, but again, removing the index.html from your angular.json is NOT going to result in the behavior you’re looking for

last cargo
#

I'm reloading the app upon startup and if the app is started I ask to reload the page.

The service worker cache the index.html no matter what, else we could not have offline app.

I just didnt understood that earlier.

neat briar
ancient cloak
#

Would setting navigationRequestStrategy to freshness not accomplish what you're looking for?

last cargo
#

What I did is something like this:

if (this.swUpdate.isEnabled) {

      const appIsStable$: Observable<boolean> = this.appRef.isStable.pipe(first((isStable: boolean): boolean => isStable));
      const everyFiveMinute$: Observable<number> = interval(5 * 60 * 1000);
      const everyFiveMinuteOnceAppIsStable$: Observable<number | boolean> = concat(appIsStable$, everyFiveMinute$);

      appIsStable$.subscribe((): Promise<void> =>
        this.swUpdate.checkForUpdate().then((hasUpdate: boolean): void => hasUpdate ? window.location.reload() : undefined)
      );
      everyFiveMinuteOnceAppIsStable$.subscribe((): Promise<boolean> => this.swUpdate.checkForUpdate().then());

      this.swUpdate.versionUpdates.subscribe((event: any): void => {
        if (event.type === 'VERSION_READY') {
          this.snackBarService.info(message, action, 5 * 60 * 1000).onAction().subscribe((): void => window.location.reload());
        }
      });
    }