CODEWITHSUNDEEP
angular-service-worker
George Knap
George Knap

Reputation: 1350

Angular 5 ServiceWorker not loading updated ngsw.json

Not sure if this is a potential bug or me doing something wrong.

I'm using cli based app, @angular/serviceworker 5.1.0 @angular/cli 1.6.0 Implementation of the SW is exactly by the book

I will try to describe what's going on:

Consider an app with running service worker. The SW caches data from ngsw.json.

Now, I am going to deploy a new ng build --prod files with new budle hash.

Currently running app's ServiceWorker will be loading old cached files unless explicitly ask to update by SwUpdate service. That's fine.

But here's the thing. Upon opening new tab and loading new instance of the app it still loads the old files. In network log there is no fetch of new ngsw.json.

Do both tabs use the same ServiceWorker?

How does ServiceWorker knows when to check for new ngsw.json?

The most bizzare things: Sometimes upon hitting F5 the ServiceWorker still loading old files. Sometimes it loads the new files. Sometimes it tries to fetch files with old hash and fails (404)!

I haven't been able to figure out any pattern so far.

Is it possible browser caching is causing problems? I tried to add server response headers to no-cache and expire: 0 but no difference.

Upvotes: 4

Views: 2612

Answers (1)

Remy
Remy

Reputation: 894

At the time of this answer, the latest version of ngsw (@angular/service-worker) is 8.2.13.

Do both tabs use the same ServiceWorker?

Yes, both tabs activate the same service worker. This is done because of data integrity, if you had one service worker processing differently to another service worker across different tabs, this would become a nightmare to maintain.

How does the ServiceWorker know when to check for new ngsw.json?

ngsw.json is updated when you call a production build, as you've identified: ng build --prod. The service worker doesn't consider an update to ngsw.json as an update to the service worker. As such, it can update the service worker's cache without creating a new version of the service worker and a simple refresh should suffice, without needing to close the browser tabs.

If the service worker is updated, a new service worker should get installed but it won't activate until all associated browser clients (tabs) have been closed, which will make it safe to update.

Sometimes upon hitting F5 the ServiceWorker still loading old files. Sometimes it loads the new files. Sometimes it tries to fetch files with old hash and fails (404)!

The refresh button doesn't behave ordinarily when it comes to service workers. If you're doing a hard reload, you will bypass the service worker and request new data. This action won't necessarily update the service worker's cache. As a result, you might find the next refresh loads old data, retrieved from the cache associated with the old service worker.

Is it possible browser caching is causing problems?

To manually invalidate the service worker's cache, head into DevTools > Application (tab) > Cache storage and delete its contents.

Upvotes: 1

Related Questions