Angular Service worker with Firebase handles all firebase requests

Question

I converted my Angular firebase app to PWA via the angular/pwa ng install.

all works great but I am starting to question why the requests are happening twice.

My Service worker config

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Opening the network tab I see

As you can see all the requests are kinda doubled. Perhaps my knowledge is limited. So I looked up and show that the first request with the cog icon is the preparation and the next the actual request.

Am I doing something wrong or do I worry for nothing?

Is this a performance prone issue? Should the service worker handle those requests ?

Answer 1

The behavior you observe is totally normal, the lines containing (ServiceWorker) in the Size column shows that the corresponding request has been intercepted by the service worker. The cog icon shows a request initiated by the service worker to the network. Since you're using ngsw-worker.js from Angular, these requests are clones from the original ones, but you could imagine having a custom implementation of a service worker, sending totally different requests than the ones initiated by the main JavaScript code.

Simple example:

self.addEventListener('fetch', function(event) {
    event.respondWith(fetch('other-request'));
};

You can also not trigger a request and serve requests from the cache (implying it has been cached before) like this:

self.addEventListener('fetch', function(event) {
    event.respondWith(caches.match(event.request));
}

Angular's ngsw-worker.js uses the cache for the files defined in assetGroups, and for resources defined in dataGroups (depending on the cacheConfig strategy).

The dataGroups cacheConfig allows you to choose between performance and freshness, and also allows to set a timeout, which gives priority to the cache when elapsed.