Loading multiple service workers

README.md

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?

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.