ServiceWorkerを使った非同期通信のテスト

非同期通信のテストをする方法はいろいろありますが
今回は***ServiceWorker***を使った方法を紹介します

# ServiceWorkerとは

* ブラウザのバックグラウンドで動くJavaScript環境
* サーバへのリクエストをキャッチしてゴニョゴニョできる
* localhost、https環境でしか動かない

クライアント側にプロキシサーバがある感じです

ChromeのBeta版で使えるようになったプッシュ通知も
ServiceWorkerを使うことで実現してます
[http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web](http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web)

まだ対応してるブラウザが少ないので使う時は注意
[http://caniuse.com/#search=serviceworker](http://caniuse.com/#search=serviceworker)

# テスト方法

## 1.ServiceWorkerの登録

navigator.serviceWorker.registerで登録

```index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id="btn-ajax">Ajax</button>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var btnAjax = document.getElementById('btn-ajax');
                btnAjax.addEventListener('click', function() {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', '/test');
                    xhr.responseType = 'application/json';
                    xhr.send();

                    xhr.onload = function(e) {
                        switch (xhr.status) {
                            case 200:
                                console.log(xhr.responseText);
                                break;
                            default:
                                console.log(xhr.statusText);
                                break;
                        }
                    };
                }, false);

                navigator.serviceWorker.register(
                    'service-worker.js',
                    { scope: '/' }
                )
                .then(function(result) {
                    // 登録成功
                })
                .catch(function(result) {
                    // 登録失敗
                });
            }, false);
        </script>
    </body>
</html>
```

## 2.ServiceWorkerの処理を設定

```service-worker.js
self.onfetch = function(event) {
    var requestURL = new URL(event.request.url);
    // ↓指定のリクエストが来た時だけ処理する
    if (requestURL.pathname.match('/test')) {
        var result = [
            { id: 1, name: 'aaaaa', mail: 'aaaaa@gmail.com' },
            { id: 2, name: 'bbbbb', mail: 'bbbbb@gmail.com' },
            { id: 2, name: 'ccccc', mail: 'ccccc@gmail.com' },
        ];

        var response = new Response(JSON.stringify(result), {
            status: 200,
            statusText: 'OK',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        event.respondWith(response);
    }
};
```

上記の例で言うと、http://localhost/test にアクセスが来た時だけ
処理するようになってます

## 3.テスト

Ajaxボタンを押すとhttp://localhost/test にリクエストがいって
ServiceWorkerからレスポンスが返ってきます
***レスポンスを作る際にJSON形式の文字列で渡さないと
うまくいかないので注意***

![result.png](https://qiita-image-store.s3.amazonaws.com/0/54850/a95cccf7-10d1-f315-bfb8-db5d73101f58.png)


# デバッグ方法

chrome://serviceworker-internals/を開くと下記のページが表示されるので

![setting.png](https://qiita-image-store.s3.amazonaws.com/0/54850/adc73c11-d685-07a9-51f7-b9302a1cddd2.png)


赤で囲んだ部分をチェックする
あとは、通常のWebページと同じようなインスペクタのウィンドウが開くので
ServiceWorkerのデバッグが可能です

![inspector.png](https://qiita-image-store.s3.amazonaws.com/0/54850/6fe4433f-ea04-68cd-40fb-6379eb37578b.png)




こんな感じでサーバなしで非同期通信のテストが可能です