Skip to content

Instantly share code, notes, and snippets.

@bahmutov
Last active September 27, 2018 00:55
Show Gist options
  • Save bahmutov/36b4b6e8f17b1edd69484a271b7c8634 to your computer and use it in GitHub Desktop.
Save bahmutov/36b4b6e8f17b1edd69484a271b7c8634 to your computer and use it in GitHub Desktop.
Loading multiple service workers

Imagine I want to separate caching for offline support from other features. I would load first service worker to cache index.html and static resources in /static and would load second service worker to do other things.

<script>
    if ('serviceWorker' in navigator) {
      console.log('page is registering two service workers')
      // one.js should cache index.html and /static folder
      navigator.serviceWorker.register('one.js', {scope: './'})
      // two.js should intercept every request to /api
      navigator.serviceWorker.register('two.js', {scope: './api'})
    }
</script>
<link rel="stylesheet" href="./static/app.css">
<link rel="stylesheet" href="./api/foo.css">

I could not get the second service worker to intercept any requests - everything seems to be intercepted by the first service worker.

Does the current Chrome v53 or Canary v55 support multiple overlapping or non-overlapping service worker scopes?

@jasonmichaels
Copy link

jasonmichaels commented Sep 27, 2018

This post is a little old, but isn't it because you've specified the first-loaded SW as having root scope, which would include ./api? I'm relatively new to SWs, but that's how I understand SW scope so far.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment