Search code examples
performancefirebasepolymerservice-workerpolymer-2.x

When to use and how different are pre-cache service worker and h2 push in a Polymer app using Firebase?

So there are two things I am confused about. I'm developing a Polymer app using Firebase. I am using a precache service worker and also there is h2 push in Firebase via firebase.json that I can use.

I'm not sure if I know when to use each and what are the differences as both seem to share the same goal or am I wrong?

Solution

  • User requested your website. You respond with index.html. Index.html will request 4 other resources.

    Without H2 Push: Browser will parse index.html. Sees that 4 more resources are needed and then make those calls.

    With H2 Push: Server will send index.html as well as the other 4 resources even before the browser requests it.

    Precache Service Worker: After the page load event is triggered you will start installation of service worker during which it will precache the resources that has been added in the PrecacheConfig. From second load onwards the service worker will intercept the network requests, do required processing as per the cache rules set and respond appropriately.

    So H2 push is for the initial load and precache is for repeat loads.