Search code examples
javascriptservice-workerworkbox

Custom fetch event in Google's workbox library?

I'm using Google's Workbox library to cache files. I also want to roll my custom authentication using a service worker. So I read this guide on how to intercept requests and add headers: https://itnext.io/using-service-worker-as-an-auth-relay-5abc402878dd.

However, I'm wondering if this will mess up Workbox' logic? Should I place the authentication code below precacheAndRoute()? My static files cached through Workbox do not require my authentication headers.

Solution

  • The "route" portion of Workbox's precacheAndRoute() respond to fetch events for URLs that are in the precache manifest.

    It will not do anything if the fetch event is associated with a URL that's not in the precache manifest. (I.e. it won't call FetchEvent.respondWith(), and other handlers will get a chance to respond.)

    Adding your own custom logic in your own fetch event handler should play nicely with precacheAndRoute().

    (You might be able to get away with using Workbox's runtime caching for those requests that need authentication, along with a custom requestWillFetch plugin that adds in the headers before the network request is made. But that's up to you!)