Question

我打算有两个服务工作者。但是，一个人的范围是另一个的子集。

例如：一个是'/'

其他是'/ images'

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

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

编辑：这是我注册两个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>

两个服务工作者的服务工作者的优先规则

1 个答案: