LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-12-07

前提

  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もおもしろいなぁ。
最近興味津々でござる (´・ω・`)


参考情報

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1