Precedence rule for serviceworker in case of two serviceworkers - service-worker

Question

I am planning to have two service worker .But the Scope for one is subset of another's.
Ex: One is '/'
Other is '/images'
Now i am registering the two service workers from different places.
My doubt is when both serviceworkers are present and browser sends a request to /images , then which serviceworker will intercept it , as it is in scope of both the serviceworker.
Does the browser gives precedence to the more specialized scope ?
Edit: This my code for registering two Service Worker.Now i want to register both Service Workers when first call is made to '/'.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(serviceWorkerEndpoint1, { scope: serviceWorkerScope1 }).then(function (registration) {
Log.Log('ServiceWorker registration successful with scope: ' + registration.scope, "ServiceWorker1Installed", "ServiceWorkerInstalled");
}).catch(function (err) {
Log.Log('ServiceWorker registration failed: ' + err, "ServiceWorkerInstalled", "ServiceWorkerInstalled");
});
navigator.serviceWorker.register(serviceWorkerEndpoint2, { scope: serviceWorkerScope2 }).then(function (registration) {
Log.Log('ServiceWorker registration successful with scope: ' + registration.scope, "ServiceWorker2Installed", "ServiceWorkerInstalled");
}).catch(function (err) {
Log.Log('ServiceWorker registration failed: ' + err, "ServiceWorker2Installed", "ServiceWorkerInstalled");
});
}

Answer 1

Both work but only one is active per scope so the browser gives preference to the most specific one. I leave you a setup to verify (although I tried it by myself):
Folder structure:
.
├── images
│   └── sw-images.js
├── index.html
└── sw.js
In ./images/sw-images.js:
self.onfetch = event => {
if (event.request.url.indexOf('content') != -1)
event.respondWith(new Response('Hi from images'));
};
In ./sw.js:
self.onfetch = event => {
if (event.request.url.indexOf('content') != -1)
event.respondWith(new Response('Hi from root'));
};
In index.html:
<script>
Promise.all([
navigator.serviceWorker.register('sw.js', { scope: '/'}),
navigator.serviceWorker.register('images/sw-images.js', { scope: 'images/' })
])
.then(() => console.log('All right!'))
.catch(error => console.error(error));
</script>
./content.html
./images/content.html