有两个 serviceworker 时 serviceworker 的优先规则

Question

我计划有两个服务人员。但是一个的范围是另一个的子集。

例如：一个是 '/'

其他是'/images'

现在我正在注册来自不同地方的两个服务人员。 我的疑问是，当两个 serviceworker 都在场并且浏览器向 /images 发送请求时，哪个 serviceworker 会拦截它，因为它在两个 serviceworker 的范围内。

浏览器是否优先考虑更专业的范围？

编辑：这是我注册两个 Service Worker 的代码。现在我想在第一次调用“/”时注册两个 Service Worker。

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

两者都有效，但每个范围只有一个处于活动状态，因此浏览器会优先选择最具体的一个。我给你一个设置来验证（虽然我自己试过）：

文件夹结构：

.
├── images
│   └── sw-images.js
├── index.html
└── sw.js

在 ./images/sw-images.js 中：

self.onfetch = event => {
  if (event.request.url.indexOf('content') != -1)
    event.respondWith(new Response('Hi from images'));
};

在 ./sw.js 中：

self.onfetch = event => {
  if (event.request.url.indexOf('content') != -1)
    event.respondWith(new Response('Hi from root'));
};

在 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>
<a href="content.html">./content.html</a>
<a href="images/content.html">./images/content.html</a>