ServiceWorkerGlobalScope - Web API 接口参考 编辑

ServiceWorker API 的ServiceWorkerGlobalScope 接口，代表一个service worker的全局执行上下文。

开发者应该知道， ServiceWorker 的状态在结束/重启的循环中不是一直保持不变的，所以每个事件处理器应该设定一个默认的全局状态。

一旦成功地注册了service worker，为了节省内存和处理器，它将在他的状态达到了空闲的时候被终止。 一个在激活状态的service worker为了响应事件是可以自动重启的，就像这两个方法， ServiceWorkerGlobalScope.onfetch 或者ServiceWorkerGlobalScope.onmessage.

此外, 在service worker中, 同步请求是被禁止的 - 只有异步请求，如方法fetch() 才被允许.

该接口继承自 WorkerGlobalScope 接口, 以及其父类 EventTarget, 因此继承属性来自 WindowTimers, WindowBase64, 和 WindowEventHandlers.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/wiki/zh-CN/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/wiki/zh-CN/docs/Web/API/WorkerGlobalScope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="236" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">WorkerGlobalScope</text></a><polyline points="321,25  331,20  331,30  321,25" stroke="#D4DDE4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/zh-CN/docs/Web/API/ServiceWorkerGlobalScope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="481" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">ServiceWorkerGlobalScope</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

属性

ServiceWorkerGlobalScope.clients 只读

Contains the Clients object associated with the service worker.

ServiceWorkerGlobalScope.registration 只读

Contains the ServiceWorkerRegistration object that represents the service worker's registration.

ServiceWorkerGlobalScope.caches 只读

Contains the CacheStorage object associated with the service worker.

Event handlers

ServiceWorkerGlobalScope.onactivate

An event handler fired whenever an activate event occurs — when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.active worker.

ServiceWorkerGlobalScope.onfetch

An event handler fired whenever a fetch event occurs — when a fetch() is called.

ServiceWorkerGlobalScope.oninstall

An event handler fired whenever an install event occurs — when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.installing worker.

ServiceWorkerGlobalScope.onmessage

An event handler fired whenever a message event occurs — when incoming messages are received. Controlled pages can use the MessagePort.postMessage() method to send messages to service workers. The service worker can optionally send a response back via the MessagePort exposed in event.data.port, corresponding to the controlled page.

ServiceWorkerGlobalScope.onnotificationclick

An event handler fired whenever a notificationclick event occurs — when a user clicks on a displayed notification.

ServiceWorkerGlobalScope.onnotificationclose

An event handler fired whenever a notificationclose event occurs — when a user closes a displayed notification.

ServiceWorkerGlobalScope.onpush

An event handler fired whenever a push event occurs — when a server push notification is received.

ServiceWorkerGlobalScope.onpushsubscriptionchange

An event handler fired whenever a pushsubscriptionchange event occurs — when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)

ServiceWorkerGlobalScope.onsync

An event handler fired whenever a SyncEvent event occurs. This is triggered when a call to SyncManager.register is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available. 

方法

ServiceWorkerGlobalScope.skipWaiting()

Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.

ServiceWorkerGlobalScope implements WorkerGlobalScope — which implements GlobalFetch. Therefore it also has the following property available to it:

GlobalFetch.fetch()

Starts the process of fetching a resource. This returns a promise that resolves to the Response object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.

示例

This code snippet is from the service worker prefetch sample (see prefetch example live.) The ServiceWorkerGlobalScope.onfetch event handler listens for the fetch event. When fired, the code returns a promise that resolves to the first matching request in the Cache object. If no match is found, the code fetches a response from the network.

The code also handles exceptions thrown from the fetch() operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found response in cache:', response);

        return response;
      }
      console.log('No response found in cache. About to fetch from network...');

      return fetch(event.request).then(function(response) {
        console.log('Response from network is:', response);

        return response;
      }, function(error) {
        console.error('Fetching failed:', error);

        throw error;
      });
    })
  );
});

规范

规范	状态	备注
Service Workers ServiceWorkerGlobalScope	Working Draft	Initial definition
Fetch Fetch	Living Standard	Adds the fetch method.
Push API onpush	Working Draft	Adds the onpush and onpushsubscriptionchange event handlers.
Notifications API onnotificationclick	Living Standard	Adds the onnotificationclick event handler.
Web Background Synchronization onsync	Living Standard	Adds the onsync event.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	40.0	44.0 (44.0)[1]	未实现	24	未实现
onnotificationclick	(Yes)	42.0 (42.0)[1]	未实现	(Yes)	未实现
onsync	49.0	?	?	?	?

Feature	Android	Android Webview	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	未实现	未实现	44.0 (44.0)	(Yes)	未实现	?	未实现	40.0
onnotificationclick	未实现	未实现	42.0 (42.0)	(Yes)	未实现	?	未实现	(Yes)
onsync	未实现	未实现	?	?	?	?	?	49.0

[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

See also

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promise
• Using web workers