JavaScript

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

前提

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

ソース

fetchイベントをlistenしてfetchしてあれしてこれしてevent.respondWith() (´・ω・`)ドーン
Defferedとか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もおもしろいなぁ。
最近興味津々でござる (´・ω・`)


参考情報