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

[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もおもしろいなぁ。

最近興味津々でござる (´･ω･｀)