This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The register()
method of the ServiceWorkerContainer
interface creates or updates a ServiceWorkerRegistration
for the given 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
options
Optional
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. The default value is the URL you'd get if you resolved './' using the web page's location as the base. It is not, as is commonly believed, relative to the service worker's location. See the Examples section for more information on how it works.A Promise
that resolves with a ServiceWorkerRegistration
object.
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 in this case 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 a page 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
, the scope of './'
would mean that the service worker only applies to resources under example.com/product
. If I needed to register a service worker on example.com/product/description.html
that applied to all of example.com
, I would leave off the scope as above.
if ('serviceWorker' in navigator) { // Register a service worker hosted at the root of the // site using a more restrictive scope. 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.'); }
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'ServiceWorkerContainer' in that specification. | Editor's Draft | Initial definition. |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 40 | (Yes)[2] | 44.0 (44.0)[1] | No support | 27 | No support |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 40 | 40 | 44.0 (44.0) | (Yes) | No support | 27 | No support |
[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
[2] Service workers is available in Microsoft Edge starting EdgeHTML 16 behind a flag.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register