ServiceWorker

ServiceWorker APIのインターフェイスであるServiceWorkerはservice workerに関するレファレンスを提供しています。様々なブラウザ環境（またページ、workerなど）で同様にservice workerを利用可能で、service workerは一意なServiceWorkerオブジェクト​として一貫しています。 

ServiceWorkerオブジェクトはプロバティServiceWorkerRegistration.activeの中で利用可能です。そして、プロパティServiceWorkerContainer.controllerは作動したservice workerであり、そのservice workerが登録されリロードされたページを管理しています。

ServiceWorkerインターフェイスへは、インストールや起動、そしてフェッチを含む関数のイベントといったライフサイクルイベントのセットが送られます。ServiceWorkerオブジェクトは結びついたServiceWorker.stateを持ち、そのライフサイクルイベントに関わっています。

プロパティ

ServiceWorkerインターフェイスは親となるWorkerからプロパティを継承します。

ServiceWorker.scriptURL 読取専用

ServiceWorkerRegistrationの一部と定義されたスクリプトURLにシリアライズされたServiceWorkerを返します。このURLはそのServiceWorkerを登録しているdocumentと同じorigin上でなければならない。

ServiceWorker.state 読取専用

service workerの状態を返す。次の値の何れかを返す： installing, installed, activating, activated, or redundant.

イベントハンドラ

ServiceWorker.onstatechange 読取専用

An EventListener property called whenever an event of type statechange is fired; it is basically fired anytime the ServiceWorker.state changes.

関数

The ServiceWorker interface inherits methods from its parent, Worker, with the exception of Worker.terminate — this should not be accessible from service workers.

例

This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the ServiceWorker.state and returns its value.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js', {
        scope: './'
    }).then(function (registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
            document.querySelector('#kind').textContent = 'installing';
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
            document.querySelector('#kind').textContent = 'waiting';
        } else if (registration.active) {
            serviceWorker = registration.active;
            document.querySelector('#kind').textContent = 'active';
        }
        if (serviceWorker) {
            // logState(serviceWorker.state);
            serviceWorker.addEventListener('statechange', function (e) {
                // logState(e.target.state);
            });
        }
    }).catch (function (error) {
        // Something went wrong during registration. The service-worker.js file
        // might be unavailable or contain a syntax error.
    });
} else {
    // The current browser doesn't support service workers.
}

仕様

ブラウザ互換性

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

関連

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