2018年1月1日月曜日

Microsoft EdgeがService Workerをサポート

Windows Insider リリース 17063 からついに Service Workers がデフォルトで有効になった。Edge Blogに眺めの記事が上がっていたので、端的にわかるように要点をまとめた。

Service Workerとは

Service Workerは、オフライン時でもWebアプリをネイティブ・アプリと同じように使えるようにするProgressive Web App(PWA)の重要な基盤に位置付けられている。

オフラインの仕様として、App Cacheというものがあったが、Service Workerはロジックを書けるため、より詳細に制御できる。

Service WorkerはWeb Workerと同様にJavaScriptファイルに記述できる。ここでは、リソースへのリクエストが発生するたびに呼び出されるfetchイベントリスナーを定義できる。
self.onfetch = function(event) {
    event.respondWith(
        fetch(event.request);
    );
}

Cache API

Cache APIは、Service Workerの一部としてオフラインのデータ・ストレージとして利用される。リクエストとレスポンス・オブジェクトをKey/Valueストレージで保持することによって、オフラインであってもキャッシュからオブジェクトを返せる。
caches.open('my-cache').then(function(cache) {
    return cache.addAll([
        '/index.html',
        '/styles.css',
        '/main.js'
    ]);
})

Service Workerの使い方

Service Workerの利用手順を説明する。

register

まずはページにService Workerを登録する。
navigator.serviceWorker.register('sw.js', {scope: '/'});
登録は、Service Workerスクリプトファイルの場所とService Workerで制御したいスコープのを指定する。スコープ内にいる間、ブラウザーは、Service Workerの追跡を維持する。

oninstall

Service Workerのキャッシュを使うためにはインストールが必要になる。以下のコードは「stativ-v1」という名前のキャッシュにfetchで使用される静的リソースを追加している。
self.oninstall = function(event) {
    event.waitUntil(
        caches.open('static-v1').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/main.js',
                '/fallback.html'
            ]);
         })
    );
}

onactivate

登録のあと、Service Workerは、Activatingフェーズに移行する。ここでは必要に応じて、古いキャッシュをクリーンアップするとよい。
self.onactivate = function(event) {
    var keepList = ['static-v1'];
    event.waitUntil(
        caches.keys().then(function(cacheNameList) {
            return Promise.all(cacheNameList.map(function(cacheName) {
                if (keepList.indexOf(cacheName) === -1) {
                    return caches.delete(cacheName);
                }
            }));
        })
    );
}

onfetch

アクティブ化されると、Service WorkerはFetchを処理できるようになる。この例では、onfetchイベントハンドラーがキャッシュが存在していたらキャッシュを返す。キャッシュにエントリーがない場合は、インターネットからfetchして、それでも失敗したら、fallbackを返す。
self.onfetch = function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request).catch(function() {
                return caches.match('/fallback.htm1');
            });
        })
    );
}

Push

Push通知は、ブラウザーやアプリを開いていなくても、ユーザーに対してPush通知ができる仕組みである。Push APIは、メッセージがプッシュされるとService Workerが対応する。Google ChromeはFirebase Cloud Messaging(FCM)、Mozilla FirefoxはMozilla Cloud Services(MCS)を使用しており、Microsoft EdgeはWindows Push Notification ServiceをPushメッセージの配信に使っている。

Push通知は、Windowsと統合されているため、Microsoft EdgeやPWAが起動していなくても受信でき、Windowsの通知センターと統合される。

0 件のコメント:

コメントを投稿