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.
}

仕様

Specification Status Comment
Service Workers
ServiceWorker の定義
草案 Initial definition.

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 44.0 (44.0)[1] 未サポート 24 未サポート
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未サポート 未サポート 44.0 (44.0) (有) 未サポート ? 未サポート 40.0

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

関連

ドキュメントのタグと貢献者

 このページの貢献者: awesomest
 最終更新者: awesomest,