在两个服务人员的情况下服务人员的优先规则
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>
我打算有两个 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>