在两个服务人员的情况下服务人员的优先规则

Precedence rule for serviceworker in case of two serviceworkers

我打算有两个 service worker。但是一个的作用域是另一个的子集。

例如:一个是 '/'

其他是'/images'

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

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

编辑:这是我注册两个服务的代码Worker.Now我想在第一次调用“/”时注册两个服务工作者。

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");
        });           
    }

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

文件夹结构:

.
├── 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>