Edited at

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

最近興味津々でござる (´・ω・`)



参考情報