Angular Service Worker start too late

Question

I use Angular 5.1 with the internal Service Worker This is my ngsw-config.json file :

{
  "appData": "Angular 5.1",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "tasks-users-api",
      "urls": ["/api"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 20,
        "maxAge": "1h",
        "timeout": "5s"
      }
    }
  ]
}

In ngOnInit function of my homepage, I call the /api url listed in dataGroups. When I open my console, I can see this url is call (framed in red below) before the start of the service worker (I guess the start of the service worker matches with the element framed in blue below).

So, if I switch off my internet connection, the /api call isn't handle by the service worker. If I navigate on another page and come back to the homepage before switch off my connection, the /api call is handle by service worker.

Is this an issue ? How to handle the case ?

NOtherDev NOtherDev · Accepted Answer · 2017-12-13T20:07:53

This is true an this is more a feature than a bug. One of the Service Worker design goals is to be extremely flexible and as such, you have the freedom to decide when do you install your SW and what does it take to install it.

Theoretically the installation might be invoked as a first thing the script does and it might block until the installation finishes. But as the installation phase may be arbitrarily long (we might try to pre-cache a half of the internet there), it will be highly impractical.

I don't know the specifics of Angular implementation, but a general practice is to invoke SW registration only after the page is completely loaded. So it is expected that the first load (or at least the phase until SW is installed and activated) is not served by SW.

How to handle this case? There's really nothing to handle. If you lose your connectivity on the first load, it is lost regardless of who was in charge. Either your user was unable to load the data directly or your SW was unable to cache the data - in both cases you basically don't have anything to serve.

Angular Service Worker start too late

1 Answers