[ServiceWorker] ブラウザのjsからServiceWorkerに値を渡す

前提

1. hoge.phpにリクエストを投げる。
2. そのレスポンスにあるfugaというデータをServiceWorkerの中で使いたい。

ソース

fetchイベントをlistenしてfetchしてあれしてこれしてevent.respondWith() (´･ω･｀)ﾄﾞｰﾝ
DeferredとかPromiseとかなんですかそれ？ってところから調べたので、むしろそっち方面の理解に時間がかかったかも。

理解すると非常に便利なのだろうなということは、理解できたかなぁというところ (´･ω･｀)

service_worker.js

self.addEventListener('fetch', event => {
    var requestURL = new URL(event.request.url);

    if(requestURL.pathname.match("/hoge.php")) {
        console.log(requestURL.pathname);

        event.respondWith(
            fetch(event.request)
                .then(response => {
                    var res_clone = response.clone();

                    res_clone.json()
                        .then(json => {
                            if (json.data.fuga) {
                                console.log(fuga);
                            }
                        });

                    return response;
                })
        );
    }
});

躓いたのは、event.respondWith()かなぁ。
使わずにresponseをreturnしてたら、リクエストが二重になりやがんの。
event.respondWith()を使うことで、「これをレスポンスとします」ってことになるようで。
なるほどわからん。

あとは、Promiseたちの取り回しがわかってきたら、なんとなくでけた (* ´ω｀ *)
「responseはストリームだから一回しか読めませんよ～」っていう説明もよくわからんけど、確かに読めないから、レスポンスの何かを使って何か処理をしたいならclone()で複製すべし。

jQueryでajaxを使って来てるけど、Fetch APIもおもしろいなぁ。
最近興味津々でござる (´･ω･｀)

---

参考情報

• [Service Worker で横取りしたリクエストをネットワークにフォールバックさせたい時はただ return するべき] (https://qiita.com/nhiroki/items/6d3f79930bb5c7164d6e)
  投稿してから改めて自分の記事を見たときに、下にあったリンクを辿ると…勉強になりました (´･ω･｀)
  event.respondWith()するよりも、単純にreturnする方が速いよというお話。
  処理時間４割減と言われたら、そっち使うかなぁ (´･ω･｀)