ServiceWorkerContainer.controller - Web APIs
the controller read-only property of the serviceworkercontainer interface returns a serviceworker object if its state is activated (the same object returned by serviceworkerregistration.active).
... syntax var mycontroller = navigator.serviceworker.controller; value a serviceworker object.
... example if ('serviceworker' in navigator) { // do a one-off check to see if a service worker's in control.
... if (navigator.serviceworker.controller) { console.log(`this page is currently controlled by: ${navigator.serviceworker.controller}`); } else { console.log('this page is not currently controlled by a service worker.'); } } else { console.log('service workers are not supported.'); } specifications specification status comment service workersthe definition of 'serviceworkerregistration.controller' in that specification.

ServiceWorkerGlobalScope: message event - Web APIs
the message event of the serviceworkerglobalscope interface occurs when incoming messages are received.
... controlled pages can use the serviceworker.postmessage() method to send messages to service workers.
... bubbles no cancelable no interface extendablemessageevent event handler property onmessage examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.active, and then calls its postmessage() function.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status service workersthe definit...

ServiceWorkerGlobalScope.onnotificationclick - Web APIs
the serviceworkerglobalscope.onnotificationclick property is an event handler called whenever the notificationclick event is dispatched on the serviceworkerglobalscope object, that is when a user clicks on a displayed notification spawned by serviceworkerregistration.shownotification().
... note: trying to create a notification inside the serviceworkerglobalscope using the notification() constructor will throw an error.
... syntax serviceworkerglobalscope.onnotificationclick = function(notificationevent) { ...
...this property is specified on the notifications_api even though it's part of serviceworkerglobalscope.

ServiceWorkerMessageEvent.data - Web APIs
the data read-only property of the serviceworkermessageevent interface returns the event's data.
... syntax var mydata = serviceworkermessageeventinstance.data; value any data type.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
... navigator.serviceworker.ready.then(function(reg) { ...

ServiceWorkerMessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the serviceworkermessageevent interface represents, in server-sent events, the last event id of the event source.
... syntax var mylasteventid = serviceworkermessageeventinstance.lasteventid; value a domstring.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
... navigator.serviceworker.ready.then(function(reg) { ...

ServiceWorkerMessageEvent.origin - Web APIs
the origin read-only property of the serviceworkermessageevent interface returns the origin of the service worker's environment settings object.
... syntax var myorigin = serviceworkermessageeventinstance.origin; value a domstring.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
... navigator.serviceworker.ready.then(function(reg) { ...

ServiceWorkerMessageEvent.ports - Web APIs
the ports read-only property of the serviceworkermessageevent interface returns an array of messageport objects connected with the message channel the message is being sent through.
... syntax var myports = serviceworkermessageeventinstance.ports; value an array of messageport objects.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
... navigator.serviceworker.ready.then(function(reg) { ...

ServiceWorkerMessageEvent.source - Web APIs
the source read-only property of the serviceworkermessageevent returns a reference to the serviceworker object of the associated service worker that sent the message.
... syntax var mysource = serviceworkermessageeventinstance.source; value a serviceworker or messageport object.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
... navigator.serviceworker.ready.then(function(reg) { ...

ServiceWorkerRegistration.active - Web APIs
the active property of the serviceworkerregistration interface returns a service worker whose serviceworker.state is activated.
... an active worker controls a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) note: this feature is available in web workers.
... syntax var serviceworker = serviceworkerregistration.active; value a serviceworker object's property, if it is currently in an activated state.
... specifications specification status comment service workersthe definition of 'serviceworkerregistration.active' in that specification.

ServiceWorkerRegistration.unregister() - Web APIs
the unregister() method of the serviceworkerregistration interface unregisters the service worker registration and returns a promise.
... the promise will resolve to false if no registration was found, otherwise it resolves to true irrespective of whether unregistration happened or not (it may not unregister if someone else just called serviceworkercontainer.register() with the same scope.) the service worker will finish any ongoing operations before it is unregistered.
... syntax serviceworkerregistration.unregister().then(function(boolean) { }); parameters none.
... example the following simple example registers a service worker example, but then immediately unregisters it again: if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) { // registration worked console.log('registration succeeded.'); registration.unregister().then(function(boolean) { // if boolean = true, unregister is successful }); }).catch(function(error) { // registration failed console.log('registration failed with ' + error); }); }; specifications specification status comment service workersthe definition of 'serviceworkerregistration.unregist...

ServiceWorkerRegistration.update() - Web APIs
the update() method of the serviceworkerregistration interface attempts to update the service worker.
... syntax serviceworkerregistration.update(); parameters none.
... return value a promise that resolves with a serviceworkerregistration object.
... example the following simple example registers a service worker example then adds an event handler to a button so you can explicitly update the service worker whenever desired: if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) { // registration worked console.log('registration succeeded.'); button.onclick = function() { registration.update(); } }).catch(function(error) { // registration failed console.log('registration failed with ' + error); }); }; specifications specification status comment service workersthe definition of 'serviceworkerregistration.update()' in that specification.

ServiceWorker.scriptURL - Web APIs
returns the serviceworker serialized script url defined as part of serviceworkerregistration.
... must be on the same origin as the document that registers the serviceworker.
... syntax someurl = serviceworker.scripturl value a usvstring (see the webidl definition of usvstring.) examples tbd specifications specification status comment service workersthe definition of 'scripturl' in that specification.

ServiceWorkerContainer.oncontrollerchange - Web APIs
the oncontrollerchange property of the serviceworkercontainer interface is an event handler fired whenever a controllerchange event occurs — when the document's associated serviceworkerregistration acquires a new active worker.
... syntax serviceworkercontainer.oncontrollerchange = function(controllerchangeevent) { ...
... } example // tbd specifications specification status comment service workersthe definition of 'serviceworkercontainer: oncontrollerchange' in that specification.

ServiceWorkerContainer.onerror - Web APIs
the onerror property of the serviceworkercontainer interface is an event handler fired whenever an error event occurs in the associated service workers.
... syntax serviceworkercontainer.onerror = function(errorevent) { ...
... } example navigator.serviceworker.onerror = function(errorevent) { console.log(`received error message: ${errorevent.message}`); } ...

ServiceWorkerContainer.onmessage - Web APIs
the onmessage property of the serviceworkercontainer interface is an event handler fired whenever a message event occurs — when incoming messages are received to the serviceworkercontainer object (e.g., via a client.postmessage() call).
...(they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworkercontainer.onmessage = function(messageevent) { ...
... } example navigator.serviceworker.onmessage = function(messageevent) { console.log(`received data: ${messageevent.data}`); } specifications specification status comment service workersthe definition of 'serviceworkercontainer: onmessage' in that specification.

ServiceWorkerGlobalScope: activate event - Web APIs
the activate event of the serviceworkerglobalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.active worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate event handler to upgrade a cache.
... globalscope.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); you can also set up the event handler using the serviceworkerglobalscope.onactivate property: globalscope.onactivate = function(event) { ...

ServiceWorkerGlobalScope: install event - Web APIs
the install event of the serviceworkerglobalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.installing worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.oninstall examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw...
...-test/gallery/snowtroopers.jpg' ); }) ); }); you can also set up the event handler using the serviceworkerglobalscope.oninstall property: globalscope.oninstall = function(event) { ...

ServiceWorkerGlobalScope.onpush - Web APIs
the serviceworkerglobalscope.onpush event of the serviceworkerglobalscope interface is fired whenever a push message is received by a service worker via a push server.
... syntax serviceworkerglobalscope.onpush = function(pushevent) { ...
...this event is specified in the push api, but accessed through serviceworkerglobalscope.

ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
the serviceworkerglobalscope.onpushsubscriptionchange event of the serviceworkerglobalscope interface is fired to indicate a change in push subscription that was triggered outside the application's control, e.g.
... syntax serviceworkerglobalscope.onpushsubscriptionchange = function() { ...
... working draft initial definition (note: this event is specified in the push api, but accessed through serviceworkerglobalscope.) ...

ServiceWorkerGlobalScope.registration - Web APIs
the registration read-only property of the serviceworkerglobalscope interface returns a reference to the serviceworkerregistration object, which represents the service worker's registration.
... syntax serviceworkerregistration = self.registration value a serviceworkerregistration object.
... specifications specification status comment service workersthe definition of 'serviceworkerglobalscope.registration' in that specification.

ServiceWorkerRegistration.index - Web APIs
the index read-only property of the serviceworkerregistration interface returns a reference to the contentindex interface, which allows for indexing of offline content.
... syntax var a contentindex object = serviceworkerregistration.index; value a contentindex object examples you can access the property from either your main script or the registered service worker.
... here is an example from the main script: // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } from the service worker: // service worker script const contentindex = self.registration.index; specifications specification status comment unknownthe definition of 'index' in that specification.

ServiceWorkerRegistration.installing - Web APIs
the installing property of the serviceworkerregistration interface returns a service worker whose serviceworker.state is installing.
... syntax var serviceworker = serviceworkerregistration.installing; value a serviceworker object, if it is currently in an installing state.
... specifications specification status comment service workersthe definition of 'serviceworkerregistration.installing' in that specification.

ServiceWorkerRegistration.onupdatefound - Web APIs
the onupdatefound property of the serviceworkerregistration interface is an eventlistener property called whenever an event of type statechange is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker.
... syntax serviceworkerregistration.onupdatefound = function() { ...
... }; specifications specification status comment service workersthe definition of 'serviceworkerregistration.onupdatefound' in that specification.

ServiceWorkerRegistration.pushManager - Web APIs
the pushmanager property of the serviceworkerregistration interface returns a reference to the pushmanager interface for managing push subscriptions; this includes support for subscribing, getting an active subscription, and accessing push permission status.
... syntax var pushmanager = serviceworkerregistration.pushmanager; value a pushmanager object.
...} navigator.serviceworker.register('serviceworker.js').then( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.subscriptionid); console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.

ServiceWorkerRegistration.scope - Web APIs
the scope read-only property of the serviceworkerregistration interface returns a unique identifier for a service worker registration.
... the service worker must be on the same origin as the document that registers the serviceworker.
... syntax var swscope = serviceworkerregistration.scope; specifications specification status comment service workersthe definition of 'serviceworkerregistration.scope' in that specification.

ServiceWorkerRegistration.waiting - Web APIs
the waiting property of the serviceworkerregistration interface returns a service worker whose serviceworker.state is installed.
... syntax var serviceworker = serviceworkerregistration.waiting; value a serviceworker object, if it is currently in an installed state.
... specifications specification status comment service workersthe definition of 'serviceworkerregistration.waiting' in that specification.

serviceworker - Web app manifests
type object mandatory no the serviceworker member describes a service worker that the developer intends to install to control the pwa.
... examples "serviceworker": { "src": "./serviceworker.js", "scope": "/app", "type": "", "update_via_cache": "none" } values service worker contain the following values (only src is required): member description src the url to download the service worker script from.
... this is the only required member of the serviceworker member.

ServiceWorkerGlobalScope.caches - Web APIs
the caches read-only property of the serviceworkerglobalscope interface returns the cachestorage object associated with the service worker.
... specifications specification status comment service workersthe definition of 'serviceworkerglobalscope.caches' in that specification.

ServiceWorkerGlobalScope.clients - Web APIs
the clients read-only property of the serviceworkerglobalscope interface returns the clients object associated with the service worker.
... specifications specification status comment service workersthe definition of 'serviceworkerregistration.clients' in that specification.

ServiceWorkerGlobalScope: contentdelete event - Web APIs
the contentdelete event of the serviceworkerglobalscope interface is fired when an item is removed from the indexed content via the user agent.
... self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); you can also set up the event handler using the serviceworkerglobalscope.ondelete property: self.oncontentdelete = (event) => { ...

ServiceWorkerGlobalScope.onactivate - Web APIs
the onactivate property of the serviceworkerglobalscope interface is an event handler fired whenever an activate event occurs (when the service worker activates).
... syntax serviceworkerglobalscope.onactivate = function(event) { ...

ServiceWorkerGlobalScope.oncontentdelete - Web APIs
the oncontentdelete property of the serviceworkerglobalscope interface is an event handler fired when an item is removed from the indexed content via the user agent.
... syntax serviceworkerglobalscope.oncontentdelete = function(event) { ...

ServiceWorkerGlobalScope.onfetch - Web APIs
the onfetch property of the serviceworkerglobalscope interface is an event handler fired whenever a fetch event occurs (usually when the windoworworkerglobalscope.fetch() method is called.) syntax serviceworkerglobalscope.onfetch = function(fetchevent) { ...
... }; example this code snippet is from the service worker prefetch sample (see prefetch example live.) the serviceworkerglobalscope.onfetch event handler listens for the fetch event.

ServiceWorkerGlobalScope.oninstall - Web APIs
the oninstall property of the serviceworkerglobalscope interface is an event handler fired whenever an install event occurs (when the service worker installs).
... syntax serviceworkerglobalscope.oninstall = function(event) { ...

ServiceWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the serviceworkerglobalscope interface is an event handler fired whenever a message event occurs — when incoming messages are received.
...(they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworkerglobalscope.onmessage = function(extendablemessageevent) { ...

ServiceWorkerGlobalScope.onsync - Web APIs
the serviceworkerglobalscope.onsync event of the serviceworkerglobalscope interface is fired whenever a syncevent event occurs.
... syntax serviceworkerglobalscope.onsync = function(syncevent) { ...

ServiceWorkerGlobalScope.skipWaiting() - Web APIs
the serviceworkerglobalscope.skipwaiting() method of the serviceworkerglobalscope forces the waiting service worker to become the active service worker.
... syntax serviceworkerglobalscope.skipwaiting().then(function() { //do something }); returns a promise that immediately resolves with undefined.

ServiceWorkerRegistration.getNotifications() - Web APIs
the getnotifications() method of the serviceworkerregistration interface returns a list of the notifications in the order that they were created from the current origin via the current service worker registration.
... example navigator.serviceworker.register('sw.js'); var options = { tag : 'user_alerts' }; navigator.serviceworker.ready.then(function(registration) { registration.getnotifications(options).then(function(notifications) { // do something with your notifications }) }); specifications specification status comment notifications apithe definition of 'serviceworkerregistration.getnotifications()' in...

ServiceWorkerRegistration.navigationPreload - Web APIs
the navigationpreload read-only property of the serviceworkerregistration interface returns the navigationpreloadmanager associated with the current service worker registration.
... syntax var navigationpreloadmanager = serviceworkerregistration.navigationpreload; value an instance of navigationpreloadmanager.

ServiceWorkerRegistration.periodicSync - Web APIs
the periodicsync read-only property of the serviceworkerregistration interface returns a reference to the periodicsyncmanager interface, which manages periodic background synchronization processes.
... syntax var periodicsyncmanager = serviceworkerregistration.periodicsync; value a periodicsyncmanager object.

ServiceWorkerRegistration.sync - Web APIs
the sync property of the serviceworkerregistration interface returns a reference to the syncmanager interface, which manages background synchronization processes.
... syntax var syncmanager = serviceworkerregistration.sync; value a syncmanager object.

ServiceWorkerState - Web APIs
the serviceworkerstate is associated with its serviceworker's state.
... specifications specification status comment service workersthe definition of 'serviceworkerstate' in that specification.

ServiceWorkerContainer: message event - Web APIs
}); }); the client can receive the message by listening to the message event: // in the page being controlled navigator.serviceworker.addeventlistener('message', (message) => { console.log(message); }); specifications specification status service workersthe definition of 'message' in that specification.

ServiceWorkerGlobalScope: notificationclick event - Web APIs
the notificationclick event is fired to indicate that a system notification spawned by serviceworkerregistration.shownotification() has been clicked.

ServiceWorkerGlobalScope: push event - Web APIs
the push event is sent to a service worker's global scope (represented by the serviceworkerglobalscope interface) when the service worker has received a push message.

ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
the pushsubscriptionchange event is sent to the global scope of a serviceworker to indicate a change in push subscription that was triggered outside the application's control.

Index - Web APIs
22 abstractworker api, abstract, abstractworker, interface, reference, sharedworker, web workers, web workers api, worker the abstractworker interface of the web workers api is an abstract interface that defines properties and methods that are common to all types of worker, including not only the basic worker, but also serviceworker and sharedworker.
... 502 cache api, cache, cache api, experimental, interface, offline, reference, service workers, service worker api, storage the cache interface provides a storage mechanism for request / response object pairs that are cached, for example as part of the serviceworker life cycle.
... 503 cache.add() api, cache, experimental, method, reference, service workers, service worker api, serviceworker the add() method of the cache interface takes a url, retrieves it, and adds the resulting response object to the given cache.
...And 116 more matches

Service Worker API - Web APIs
registration a service worker is first registered using the serviceworkercontainer.register() method.
...activation can happen sooner using serviceworkerglobalscope.skipwaiting() and existing pages can be claimed by the active worker using clients.claim().
... interfaces cache represents the storage for request / response object pairs that are cached as part of the serviceworker life cycle.
...And 16 more matches

Content Index API - Web APIs
service worker additions the following additions to the serviceworker have been specified in the content index api spec to provide an entry point for using content indexing.
... serviceworkerregistration.index read only returns a reference to the contentindex interface for indexing cached pages.
... serviceworkerglobalscope.oncontentdelete an event handler fired whenever a contentdelete event occurs.
...And 5 more matches

Push API - Web APIs
the service worker will be started as necessary to handle incoming push messages, which are delivered to the serviceworkerglobalscope.onpush event handler.
... this allows apps to react to push messages being received, for example, by displaying a notification (using serviceworkerregistration.shownotification().) each subscription is unique to a service worker.
... interfaces pushevent represents a push action, sent to the global scope of a serviceworker.
...And 4 more matches

Using Service Workers - Web APIs
if however you find that demo code is not working in your installed versions, you might need to enable a pref: firefox nightly: go to about:config and set dom.serviceworkers.enabled to true; restart browser.
... chrome canary: go to chrome://flags and turn on experimental-web-platform-features; restart browser (note that some features are now enabled by default in chrome.) opera: go to opera://flags and enable support for serviceworker; restart browser.
... basic architecture with service workers, the following steps are generally observed for basic set up: the service worker url is fetched and registered via serviceworkercontainer.register().
...And 4 more matches

ContentIndex - Web APIs
examples feature detection and interface access here we get a reference to the serviceworkerregistration, then check for the index property, which gives us access to the content index interface.
... // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index.
... url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index and iterates over each en...
...And 2 more matches

onnotificationclose - Web APIs
the serviceworkerglobalscope.onnotificationclose property is an event handler called whenever the notificationclose event is dispatched on the serviceworkerglobalscope object, that is when a user closes a displayed notification spawned by serviceworkerregistration.shownotification().
... note: trying to create a notification inside the serviceworkerglobalscope using the notification() constructor will throw an error.
... syntax serviceworkerglobalscope.onnotificationclose = function(notificationevent) { ...
...And 2 more matches

Using Fetch - Web APIs
ookie')); // false myheaders.set('content-type', 'text/html'); myheaders.append('x-custom-header', 'anothervalue'); console.log(myheaders.get('content-length')); // 11 console.log(myheaders.get('x-custom-header')); // ['processthisimmediately', 'anothervalue'] myheaders.delete('x-custom-header'); console.log(myheaders.get('x-custom-header')); // [ ] some of these operations are only useful in serviceworkers, but they provide a much nicer api for manipulating headers.
... immutable: mostly used for serviceworkers; renders a headers object read-only.
...similarly, inserting set-cookie into a response header is not allowed: serviceworkers are not allowed to set cookies via synthesized responses.
... they can also be created programmatically via javascript, but this is only really useful in serviceworkers, when you are providing a custom response to a received request using a respondwith() method: const mybody = new blob(); addeventlistener('fetch', function(event) { // serviceworker intercepting a fetch event.respondwith( new response(mybody, { headers: { 'content-type': 'text/plain' } }) ); }); the response() constructor takes two optional arguments — a body for the re...

InstallEvent - Web APIs
the parameter passed into the oninstall handler, the installevent interface represents an install action that is dispatched on the serviceworkerglobalscope of a serviceworker.
... installevent.activeworker read only returns the serviceworker that is currently controlling the page.
... examples this code snippet is from the service worker prefetch sample (see prefetch running live.) the code calls extendableevent.waituntil() in serviceworkerglobalscope.oninstall and delays treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully.
... note: logging statements are visible in google chrome via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.

Client-side storage - Learn web development
first we do a feature detection test to see if the serviceworker member is available in the navigator object.
...inside here we use the serviceworkercontainer.register() method to register a service worker contained in the sw.js file against the origin it resides at, so it can control pages in the same directory as it, or subdirectories.
... // register service worker to control making site work offline if('serviceworker' in navigator) { navigator.serviceworker .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js') .then(function() { console.log('service worker registered'); }); } note: the given path to the sw.js file is relative to the site origin, not the javascript file that contains the code.

Getting started with React - Learn web development
moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives.
...this file is the entry point for our app, and it initially looks like this: import react from 'react'; import reactdom from 'react-dom'; import './index.css'; import app from './app'; import * as serviceworker from './serviceworker'; reactdom.render(<app />, document.getelementbyid('root')); // if you want your app to work offline and load faster, you can change // unregister() to register() below.
...// learn more about service workers: https://bit.ly/cra-pwa serviceworker.unregister(); as with app.js, the file starts by importing all the js modules and other assets it needs to run.

nsIPushService
void subscribe( in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback ); parameters scope the serviceworkerregistration.scope for a service worker subscription, or a unique url (for example, chrome://my-module/push) for a system subscription.
... serviceworkerglobalscope.onpush push-subscription-change null scope fired when the push server drops a subscription, or the subscription identifier changes.
... serviceworkerglobalscope.onpushsubscriptionchange please make sure you listen for push-subscription-change.

Cache - Web APIs
the cache interface provides a storage mechanism for request / response object pairs that are cached, for example as part of the serviceworker life cycle.
...in a serviceworker) handles cache updates.
... in the code example, caches is a property of the serviceworkerglobalscope.

ExtendableEvent - Web APIs
width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
... examples this code snippet is from the service worker prefetch sample (see prefetch example live.) the code calls extendableevent.waituntil() in serviceworkerglobalscope.oninstall, delaying treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully.
... note: in chrome, logging statements are visible via the "inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.

ExtendableMessageEvent - Web APIs
the extendablemessageevent interface of the service worker api represents the event object of a message event fired on a service worker (when a message is received on the serviceworkerglobalscope from another context) — extends the lifetime of such events.
... examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.active, and then calls its postmessage() function.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status comment service workers...

Notifications API - Web APIs
in addition, the notifications api spec specifies a number of additions to the serviceworker api, to allow service workers to fire notifications.
... service worker additions serviceworkerregistration includes the serviceworkerregistration.shownotification() and serviceworkerregistration.getnotifications() method, for controlling the display of notifications.
... serviceworkerglobalscope includes the serviceworkerglobalscope.onnotificationclick handler, for firing custom functions when a notification is clicked.

about:debugging (before Firefox 68) - Firefox Developer Tools
this section uses a simple serviceworker demo, hosted at https://serviceworke.rs/push-simple/.
... if the dom.serviceworkers.enable preference is set to false in about:config.

about:debugging - Firefox Developer Tools
this section uses a simple serviceworker demo, hosted at https://serviceworke.rs/push-simple/.
... service workers can be unavailable if the dom.serviceworkers.enable preference is set to false in about:config.

Client.postMessage() - Web APIs
the message is received in the "message" event on navigator.serviceworker.
... client.postmessage({ msg: "hey i just got a fetch from you!", url: event.request.url }); }()); }); receiving that message: navigator.serviceworker.addeventlistener('message', event => { console.log(event.data.msg, event.data.url); }); specifications specification status comment service workersthe definition of 'postmessage()' in that specification.

ContentIndex.delete() - Web APIs
we receive a reference to the current serviceworkerregistration, which allows us to access the index property and thus access the delete method.
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister content from index await registration.index.delete(article.id); } the delete method can also be used within the service worker scope.

FetchEvent.request - Web APIs
the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
... the code also handles exceptions thrown from the serviceworkerglobalscope.fetch operation.

InstallEvent.activeWorker - Web APIs
the activeworker read-only property of the installevent interface returns the serviceworker that is currently actively controlling the page.
... syntax var myactiveworker = event.activeworker value a serviceworker object.

MessageEvent.source - Web APIs
the source read-only property of the messageevent interface is a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
... syntax let mysource = messageevent.source; value a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.

MessageEvent - Web APIs
cross-worker/document messaging (see the above two entries, but also worker.postmessage(), worker.onmessage, serviceworkerglobalscope.onmessage, etc.) broadcast channels (see broadcastchannel.postmessage()) and broadcastchannel.onmessage).
... messageevent.source read only a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.

NotificationEvent - Web APIs
the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker.
... note: this interface is specified in the notifications api, but accessed through serviceworkerglobalscope.

PushManager.getSubscription() - Web APIs
(no live demo is available.) // we need the service worker registration to check for a subscription navigator.serviceworker.ready.then(function(serviceworkerregistration) { // do we already have a push message subscription?
... serviceworkerregistration.pushmanager.getsubscription() .then(function(subscription) { // enable any ui which subscribes / unsubscribes from // push messages.

PushManager.subscribe() - Web APIs
} navigator.serviceworker.register('serviceworker.js'); // use serviceworker.ready to ensure that you can subscribe for push navigator.serviceworker.ready.then( function(serviceworkerregistration) { var options = { uservisibleonly: true, applicationserverkey: applicationserverkey }; serviceworkerregistration.pushmanager.subscribe(options).then( function(pushsubscription) { console.
... console.log(error); } ); }); responding to user gestures subscribe() calls should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { serviceworkerregistration.pushmanager.subscribe(options) .then(function(pushsubscription) { // handle subscription }); }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.

PushManager - Web APIs
this interface is accessed via the serviceworkerregistration.pushmanager property.
...} navigator.serviceworker.register('serviceworker.js').then( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.

Request.mode - Web APIs
if any serviceworkers intercept these requests, they may not add or override any headers except for those that are simple headers.
...this ensures that serviceworkers do not affect the semantics of the web and prevents security and privacy issues arising from leaking data across domains.

WorkerGlobalScope - Web APIs
this interface is usually specialized by each worker type: dedicatedworkerglobalscope for dedicated workers, sharedworkerglobalscope for shared workers, and serviceworkerglobalscope for serviceworker.
...most of the time it is a specific scope like dedicatedworkerglobalscope, sharedworkerglobalscope or serviceworkerglobalscope.

Event reference
message serviceworkermessageevent or extendablemessageevent, depending on context.
... a system notification spawned by serviceworkerregistration.shownotification() has been clicked.

CSP: worker-src - HTTP
the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.
... examples violation cases given this csp header: content-security-policy: worker-src https://example.com/ worker, sharedworker, serviceworker are blocked and won't load: <script> var blockedworker = new worker("data:application/javascript,..."); blockedworker = new sharedworker("https://not-example.com/"); navigator.serviceworker.register('https://not-example.com/sw.js'); </script> specifications specification status comment content security policy level 3the definition of 'worker-src' in that speci...

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
let's explore all of these index.js the index.js file starts by registering the service worker: navigator.serviceworker.register('service-worker.js') .then(function(registration) { return registration.pushmanager.getsubscription() .then(async function(subscription) { // registration part }); }) .then(function(subscription) { // subscription part }); it is a little bit more complicated than the service worker we saw in the js13kpwa demo.
...event.data.text() : 'no payload'; event.waituntil( self.registration.shownotification('serviceworker cookbook', { body: payload, }) ); }); all it does is add a listener for the push event, create the payload variable consisting of the text taken from the data (or create a string to use if data is empty), and then wait until the notification is shown to the user.

Beginning our React todo list - Learn web development
# move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.svg serviceworker.js setuptests.js # move back up to the root of the project cd ..

Storage access policy: Block cookies from trackers
service worker: attempts to create a new serviceworker will throw a securityerror exception.

Firefox and the "about" protocol
see firefox reader view for clutter-free web pages about:rights displays rights information about:robots special page showing notes about robots about:serviceworkers displays currently running service workers about:studies lists the shield studies that are installed about:sessionrestore session restoration (displayed after a firefox crash) about:support troubleshooting information (also available through firefox menu > ?

Debugging service workers - Firefox Developer Tools
registration is done with a block of code along these lines, using the register() method: if('serviceworker' in navigator) { navigator.serviceworker .register('sw.js') .then(function() { console.log('service worker registered'); }); } if you get the path wrong, for example, you'll get an error in the web console giving you a hint as to what's wrong, which depends on what exactly is wrong with the code.

AbstractWorker - Web APIs
the abstractworker interface of the web workers api is an abstract interface that defines properties and methods that are common to all types of worker, including not only the basic worker, but also serviceworker and sharedworker.

CacheStorage - Web APIs
the interface: provides a master directory of all the named caches that can be accessed by a serviceworker or other type of worker or window scope (you’re not limited to only using it with service workers, even though the service workers spec defines it).

Client.type - Web APIs
a document) function sendmessage(message) { return new promise(function(resolve, reject) { // note that this is the serviceworker.postmessage version navigator.serviceworker.controller.postmessage(message); window.serviceworker.onmessage = function(e) { resolve(e.data); }; }); } // controlling service worker self.addeventlistener("message", function(e) { // e.source is a client object e.source.postmessage("hello!

Clients.claim() - Web APIs
this triggers a "controllerchange" event on navigator.serviceworker in any clients that become controlled by this service worker.

ContentIndex.add() - Web APIs
url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope.

ContentIndex.getAll() - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline ...

ContentIndexEvent.id - Web APIs
the contentindexevent is only available to the {domxref('serviceworkerglobalscope','global scope')}} of a serviceworker.

ContentIndexEvent - Web APIs
this event is sent to the global scope of a serviceworker.

ExtendableMessageEvent() - Web APIs
source: the client, serviceworker or messageport that sent the message.

ExtendableMessageEvent.source - Web APIs
syntax var mysource = extendablemessageevent.source; value a client, serviceworker or messageport object.

FetchEvent.preloadResponse - Web APIs
the serviceworkerglobalscope.onfetch event handler listens for the fetch event.

InstallEvent.InstallEvent() - Web APIs
available options are as follows: activeworker: the serviceworker that is currently actively controlling the page.

MessageEvent.MessageEvent() - Web APIs
source: an messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.

Navigator - Web APIs
navigator.serviceworker read only returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated document.

NotificationAction - Web APIs
example notifications can fire notificationclick events on the serviceworkerglobalscope.

PushEvent - Web APIs
this event is sent to the global scope of a serviceworker.

PushSubscription.endpoint - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.subscribe({uservisibleonly: true}).then(function(subscription) { console.log(subscription.endpoint); // at this point you would most likely send the subscription // endpoint to your server, save it, then use it to send a // push message at a later date }) }) specifications specification status comment ...

PushSubscription.toJSON() - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { var mysubscription = subscription.tojson(); // do something with subscription details }) }); specifications specification status comment push apithe definition of 'pushsubscription: tojson' in that specification.

PushSubscription.unsubscribe() - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // you've successfully unsubscribed }).catch(function(e) { // unsubscription failed }) }) }); specifications specification status comment push apithe definition of 'unsubscribe()' in that specification.

PushSubscription - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // you've successfully unsubscribed }).catch(function(e) { // unsubscription failed }) }) }); specifications specification status comment push apithe definition of 'pushsubscription' in that specific...

ReadableStream.tee() - Web APIs
you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the browser, but also stream it to the serviceworker cache.

Request() - Web APIs
content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg', myinit); you may also pass a request object to the request() constructor to create a copy of the request (this is similar to calling the clone() method.) var copy = new request(myrequest); note: this last usage is probably only useful in serviceworkers.

Request.context - Web APIs
the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the url is for an image, or an embeddable object such as a <video>, iframe, etc.

Request.destination - Web APIs
script-based destinations include <script> elements, as well as any of the worklet-based destinations (including audioworklet and paintworklet), and the worker-based destinations, including serviceworker and sharedworker.

RequestDestination - Web APIs
"serviceworker" the target is a service worker.

Response.error() - Web APIs
note: this is mainly relevant to serviceworkers; the error method is used to return an error if you so wish it.

Response.redirect() - Web APIs
note: this is mainly relevant to the serviceworker api.

Response.useFinalURL - Web APIs
this property applies only to serviceworkers.

Streams API concepts - Web APIs
you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the browser, but also stream it to the serviceworker cache.

Using readable streams - Web APIs
you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the browser, but also stream it to the service worker cache.

SyncEvent - Web APIs
the syncevent interface represents a sync action that is dispatched on the serviceworkerglobalscope of a serviceworker.

SyncManager - Web APIs
the syncmanager interface of the the serviceworker api provides an interface for registering and listing sync registrations.

Functions and classes available to Web Workers - Web APIs
serviceworkerregistration you can register a service worker from inside a standard worker, and use associated functionality.

Using Web Workers - Web APIs
other types of worker in addition to dedicated and shared web workers, there are other types of worker available: serviceworkers essentially act as proxy servers that sit between web applications, and the browser and network (when available).

Web Workers API - Web APIs
serviceworkers essentially act as proxy servers that sit between web applications, the browser, and the network (when available).

Window.isSecureContext - Web APIs
if (window.issecurecontext) { // page is a secure context so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...

WindowClient - Web APIs
the windowclient interface of the serviceworker api represents the scope of a service worker client that is a document in a browsing context, controlled by an active worker.

Worker - Web APIs
serviceworker instances do not support this method.

WorkerGlobalScope.self - Web APIs
most of the time it is a specific scope like dedicatedworkerglobalscope, sharedworkerglobalscope, or serviceworkerglobalscope.

Web APIs
element svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowroot sharedworker sharedworkerglobalscope slottable sourcebuffer sourcebufferlist speechgrammar speechgrammarlist speechrecognition speechrecognitionalternative speechrecognitionerror speechrecognitionerrorevent speechrecognitionevent speechrecognitionre...

Clear-Site-Data - HTTP
this includes storage mechanisms such as: localstorage (executes localstorage.clear), sessionstorage (executes sessionstorage.clear), indexeddb (for each database execute idbfactory.deletedatabase), service worker registrations (for each service worker registration, execute serviceworkerregistration.unregister), appcache, websql databases, filesystem api data, plugin data (flash via npp_clearsitedata).

Content-Security-Policy - HTTP
worker-src specifies valid sources for worker, sharedworker, or serviceworker scripts.

Index - HTTP
50 csp: worker-src csp, directive, http, reference, security the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.

Sec-Fetch-Dest - HTTP
x sec- cors-safelisted request header syntax sec-fetch-dest: audio sec-fetch-dest: audioworklet sec-fetch-dest: document sec-fetch-dest: embed sec-fetch-dest: empty sec-fetch-dest: font sec-fetch-dest: image sec-fetch-dest: manifest sec-fetch-dest: nested-document sec-fetch-dest: object sec-fetch-dest: paintworklet sec-fetch-dest: report sec-fetch-dest: script sec-fetch-dest: serviceworker sec-fetch-dest: sharedworker sec-fetch-dest: style sec-fetch-dest: track sec-fetch-dest: video sec-fetch-dest: worker sec-fetch-dest: xslt sec-fetch-dest: audioworklet sec-fetch-dest: audioworklet values audio audioworklet document embed empty font image manifest object paintworklet report script serviceworker sharedworker style track video ...

HTTP headers - HTTP
it is a structured header whose value is a token with possible values audio, audioworklet, document, embed, empty, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, worker, xslt, and nested-document.

HTTP Index - HTTP
106 csp: worker-src csp, content-security-policy, directive, http, reference, security the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.

Web app manifests
click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", ...

Progressive web app structure - Progressive web apps (PWAs)
.replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotific...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
registering the service worker we'll start by looking at the code that registers a new service worker, in the app.js file: note : we're using the es6 arrow functions syntax in the service worker implementation if('serviceworker' in navigator) { navigator.serviceworker.register('./pwa-examples/js13kpwa/sw.js'); }; if the service worker api is supported in the browser, it is registered against the site using the serviceworkercontainer.register() method.

Structural overview of progressive web apps - Progressive web apps (PWAs)
.replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; then it registers a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.

Progressive web apps (PWAs)
serviceworkerware — an express-like microframework for easy service worker development.

Secure contexts - Web security
if (window.issecurecontext) { // page is a secure context so service workers are now available navigator.serviceworker.register("/offline-worker.js").then(function () { ...