Learnings from HTTP/2 Service Push and Service Workers

An Offline Camp passion talk from Daniela Matos de Carvalho

Daniela Matos de Carvalho of YLD has spent a lot of time lately exploring HTTP/2, the latest version of the HTTP protocol. One of her favorite features is Service Push, which allows the server to send content to the client without having a request, assuming it obeys the same origin. This feature is particularly useful for Offline First solutions when combined with Service Workers, which can intercept fetch requests and cache resources that are needed for when a user goes offline. In her passion talk at Offline Camp Berlin, Daniela shared with us some of the key gotchas she identified when pairing HTTP/2 Service Push and Service Workers.

Daniela Matos de Carvalho presents “Learnings from HTTP/2 & Service Workers” at Offline Camp Berlin, April 2017 (Video credit: Aaron Ross)https://youtu.be/s6ngNWk9goo

Daniela highlights two primary gotchas in her talk:

1. As of 2017, SHA-1 certificates are no longer treated as secure by major browsers. The solution to this is obviously to add a valid and authorized certificate provided by a Certificate Authority (CA). For a temporary workaround (never to be used in production), one can open Google Chrome with an --ignore-certificate-errors flag and set up the Service Worker with aninsecure flag.
2. Files are requested twice, once by the window itself and once by the Service Worker. With Chrome defaults, HTTP/2 creates two different credentialed and non-credentialed requests. To solve this problem, one can add { credentials: 'include' } to the install hook in the Service Worker, guaranteeing that fetch requests are credentialed and the same connection is used for them. (This fix only works if you’ve taken the time to install a valid certificate rather than using the temporary workaround described in above.)

Pushed resources using HTTP/2 (Image Credit: YLD)

For more on how to use HTTP/2 Server Push and Service Workers side by side, including a more detailed explanation of the gotchas and workarounds mentioned here, check out Daniela’s recent blog post:

Optimize with HTTP/2 Server Push and Service Workers!

You can also explore the Git repo here:

yldio/serverpush-serviceworkers-example

Daniela also recommends this recent article from Jake Archibald of Google Chrome, in which he explores some of the caveats that make HTTP/2 push tougher than he’d originally imagined:

HTTP/2 push is tougher than I thought

Editor’s Note: This passion talk is one of many shared at Offline Camp, where a small group of campers with diverse interests come together to discuss Offline First. We hope to see you at an upcoming event!