Angular 5 ServiceWorker not loading updated ngsw.json - angular-service-worker

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.

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.

Related

Workbox's service worker not updating when changed

Explanation
I'm having an issue with Workbox where my website doesn't update when a file's content is changed, unless I manually clear storage/site data in my browser.
Since v4 release this year, the cleanupOutdatedCaches, which is in my code, should take care of this, but the problem persists.
Example
I created this website to exemplify. Once you access it, Workbox will install the service worker, but if I change, for example, test1 to test2, you won't see the change, unless you clear the site data in your browser and refresh.
I also tried only unregistering the sw; it shows the updated version (test2), but when refreshing twice it goes back to the old version (test1).
You can see the website's code in GitHub here.
Thanks in advance,
Luiz.
cleanOutdatedCaches will only clean caches created by older versions of the workbox library. In this case, since you are using the same version fo workbox, the call to this method does nothing.
https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.precaching#.cleanupOutdatedCaches
Once a particular file is precached by Workbox, it will never attempt to retrieve that file from the network, unless the revision you have specified in the precacheAndRoute call is different from what was previously cached.
Since you changed index.html but not the revision in precacheAndRoute, workbox assumes the file is unchanged. So,what you need to do is to update the precacheAndRoute with a new hash that corresponds to the new version of index.html
You can achieve this by either using injectManifest
https://developers.google.com/web/tools/workbox/modules/workbox-build
or any other build tooling you use.
Edit:
You can invoke skipWaiting programmatically as well
https://developers.google.com/web/tools/workbox/modules/workbox-core#skip_waiting_and_clients_claim
But you do need to use it with caution. Here is one way to do it :
https://developers.google.com/web/tools/workbox/guides/advanced-recipes

New Service Worker Update in Production

I am facing an issue regarding service worker update. I have deployed my code on production now we have some changes in service worker, after changes have been done when i deploy on production, i am not getting any changes made on device.
Please help me
On continuation of above problem...
After spending some time on this issue what i have done, i put a version in url of serviceworker in a queryParam e.g. main page- var workerVersion = 'v1' and registered with sw.js?ver=workerVersion.
Now on page load i checked the previous registered version with getRegistration() method if version is different then first unregister the existing worker and install new worker with latest version.
Is there any better way of doing this??
Have you read this section?
Also, are you using self.skipWaiting() inside the install event? If not it maybe that the new version is waiting until the page is closed.

Service workers checking import script for byte sized difference

I have been checking a lot of threads on this topic , and can't seem to find a clear answer to this .
Question :
Do service workers check imported scripts for byte size difference, and trigger update of SW if there is difference.
In GitHub issues I went through :
Add web SDK API for service worker to be updated manually
Consider relying on eTags (or other headers) for service worker dependencies to check for updates
And also followed up with these :
Jake Archibald's Service worker meeting notes
Service worker: importScripts never updates scripts
Most of the articles are from 2016/17 and they are saying this should be implemented. On GitHub theres even a mention that work on this has started, but nothing more, no clear status on this or maybe I'm just missing it ?
Any info on this would be helpful.
According to this, starting in version 68, chrome will ignore HTTP cache when requesting updates to the service worker script. Requests for importScripts will still go via the HTTP cache. But this is just the default—a new registration option, updateViaCache is available that offers control over this behavior.
Example of updateViaCache option:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {
updateViaCache: 'none'
});
}
When set to 'none', the HTTP cache will not be consulted when making requests for either the top-level /service-worker.js or for any imported scripted, such as the hypothetical path/to/import.js.
It's actually the filesize difference in the SW file itself. If you would look at this SW example at line 31, the variable CACHE_VERSION gets updated everytime there is an update. This will enable the browser to dump the old one and get a new version from the server.

Using browserSync, the websocket connection does not initialize until after files have changed

Essentially the problem is that BrowserSync isn't "syncing" until after I change a file for the first time, thus the first "refresh" doesn't come for free.
Background:
I'm setting up a very simple repository where we have a gulp process that generates static files to be served by browserSync. Gulp watches those files, and when they change causes browserSync to reload.
Even though the index page serves seemingly fine, the automatic refresh does not work until AFTER you've both changed a watched file for the first time and then refreshed the browser manually.
I've confirmed this by watching the network tab in Chrome's developer tools, and can see that on first load, there is no websocket present until I manually change a file. Then, after I refresh the browser I can see a proper websocket running. It doesn't matter how many times you refresh the page before you change a file, the websocket will simply not initialize.
I've asked in the BrowserSync slack, checked their issues and read the source code and still can't figure out why this is happening.
If needed I can update the question with the relevant parts of my various related files:
Dockerfile
docker-compose.yml
gulpfule.js
I created a screencast gif, but the whole thing is about 20mb - so I didn't upload it.
Thanks in advance for any help.
BrowserSync in terminal on first load:
Network tab on first load - no websocket:
After I change a file:
Network tab after first changed file - with websocket:
Solved
I created a loader.html with a simple javascript that would do a pre-flight request against my local docker IP/port (3000) associated with my BrowserSync project. On the catch, I would just let it loop every 1000ms and on success, I would redirect.
This is where the problem was introduced.
I was doing the pre-flight request on the same IP/port that I was redirecting to, and for some reason the "websocket" was getting "cached" from my pre-flight check and then wouldn't re-initialize on the redirect or any subsequent refreshes.
My solution was to pre-flight check for BrowserSync's UI port which is 3001 not 3000. Once that was up, I could redirect to the IP:3000 without any problems.

Service Worker: files are updated on the server but old version showing in browser

I am building a static app with PouchDB on Google AppEngine.
When I open the site in a browser window, it is showing a version I uploaded several hours ago.
If I open the site in an incognito window, the updated version is displayed (therefore I don't think it is actually an error in the console).
I put a new version number in app.yaml
I have migrated all traffic to the new version.
I have cleared my cache, deleted cookies, checked my application data, everything. I even reinstalled Chrome and Firefox.
I updated my Python version and my Google AppEngine Launcher yesterday; the problem pre-dated that update.
Also: just discovered that if I go to the URL of the updated version
http://4.[app-id].appspot.com, it displays the correct, updated version.
This is happening in Chrome, Firefox, and Edge.
Edit: probably should have mentioned that my site uses Service Workers and IndexedDB. I assume my service workers are caching the previous version, but I would have thought that Ctrl + F5 would clear the cache and show the new version.
I think it must be the Service Workers caching the pages (which is, after all, what they are supposed to do). This is actually really annoying when you are developing though.
A guy called Rich Harris has documented this behaviour and some workarounds on a Github Gist.
Reloading the page doesn't behave as you'd expect
If you make a change to your service worker, then reloading the page
won't kill the old one and activate the new one (it detects the change
by requesting the service worker file each time and comparing the old
and the new byte-for-byte), leaving you somewhat confused as to why
your changes haven't taken effect. This is because the old window is
never actually closed, meaning there's never a time to swap them out –
you need to kill the tab completely then reopen it.
Or you can have the browser do that for you by going to the
Application tab in devtools (in Canary, not stable Chrome yet), going
to the Service Workers section, and checking 'Update on reload'.
UPDATE (13 Nov 2017): This functionality is now available in Chrome, so you don't even need to download Canary.
And here's which bits of the application cache to clear:

Resources