register()
方法在
ServiceWorkerContainer
interface creates or updates a
ServiceWorkerRegistration
为给定
scriptURL
.
If successful, a service worker registration ties the provided script URL to a scope , which is subsequently used for navigation matching. You can call this method unconditionally from the controlled page. I.e., you don't need to first check whether there's an active registration.
There is frequent confusion surrounding the meaning and use of
scope
. Since a service worker can't have a scope broader than its own location, only use the
scope
option when you need a scope that is narrower than the default.
serviceWorkerContainer.register(scriptURL, options)
.then(function(serviceWorkerRegistration) { ... });
scriptURL
选项
可选
scope
: A
USVString
representing a URL that defines a service worker's registration scope; that is, what range of URLs a service worker can control. This is usually a relative URL. It is relative to the base URL of the application. By default, the
scope
value for a service worker registration is set to the directory where the service worker script is located. See the
范例
section for more information on how it works.
A
Promise
that resolves with a
ServiceWorkerRegistration
对象。
The examples described here should be taken together to get a better understanding of how service workers scope applies to a page.
The following example uses the default value of
scope
(by omitting it). The service worker code in this case, if included in
example.com/index.html
, will control
example.com/index.html
, as well as pages underneath it, like
example.com/product/description.html
.
if ('serviceWorker' in navigator) {
// Register a service worker hosted at the root of the
// site using the default scope.
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service worker registration succeeded:', registration);
}, /*catch*/ function(error) {
console.log('Service worker registration failed:', error);
});
} else {
console.log('Service workers are not supported.');
}
The following code, if included in
example.com/index.html
, at the root of a site, would apply to exactly the same pages as the example above. Remember the scope, when included, uses the page's location as its base.
Alternatively, if this code were included in a page at
example.com/product/description.html
, with the Javascript file residing at
example.com/product/sw.js
, then the service worker would only apply to resources under
example.com/product
.
if ('serviceWorker' in navigator) {
// declaring scope manually
navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
console.log('Service worker registration succeeded:', registration);
}, /*catch*/ function(error) {
console.log('Service worker registration failed:', error);
});
} else {
console.log('Service workers are not supported.');
}
There is frequent confusion surrounding the meaning and use of
scope
. Since a service worker can't have a scope broader than its own location, only use the
scope
option when you need a scope that is narrower than the default.
The following code, if included in
example.com/index.html
, at the root of a site, would only apply to resources under
example.com/product
.
if ('serviceWorker' in navigator) {
// declaring scope manually
navigator.serviceWorker.register('/sw.js', {scope: '/product/'}).then(function(registration) {
console.log('Service worker registration succeeded:', registration);
}, /*catch*/ function(error) {
console.log('Service worker registration failed:', error);
});
} else {
console.log('Service workers are not supported.');
}
However, Servers can remove this restriction by setting a Service-Worker-Allowed header on the service worker script, and then you can specify a max scope for that service worker above the service worker's location.
| 规范 | 状态 | 注释 |
|---|---|---|
|
服务工作者
The definition of 'ServiceWorkerContainer: register' in that specification. |
工作草案 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
register
|
Chrome 40 |
Edge
17
|
Firefox
44
注意事项
|
IE 不支持 No | Opera 27 | Safari 11.1 | WebView Android 40 | Chrome Android 40 | Firefox Android 44 | Opera Android 27 | Safari iOS 11.3 | Samsung Internet Android 4.0 |
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
ServiceWorkerContainer
getRegistration()
getRegistrations()
register()