t_wの輪郭

self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request).then(response=>{
            //最初にfetchし、fetchに成功したらキャッシュに保存する
            let responseClone = response.clone();
            caches.open(CACHE_NAME).then(cache=>{
                cache.put(event.request, responseClone);
            })
            return response;
        }).catch(error=>{
            //fetchに失敗したらキャッシュを返す;
            console.log(error);
            return caches.match(event.request);
        })
    );
}

あれ

2022/8/3 12:11:00

Service Workerで、オフラインの時だけキャッシュを使う> 接続判定にNavigator.onLineを使うのはダメなのかしら

https://html.spec.whatwg.org/multipage/system-state.html#navigator.online
PWAだと使えないとかあるんかな。

Navigator.onLineは知りませんでした。勉強になります。ありがとうございます。
まだNavigator.onLineを試してないですが、以下の理由でfetchを使っています。

  • サーバー側が落ちているときも、利用者はキャッシュでコンテンツを見られてほしい。
  • self.addEventListener('fetch', event => {...はブラウザの通信を置き換える処理のため、return responseで通信結果（fetchの結果）を返さないと、オンラインでもオフラインのような挙動になってしまう（オンラインでも通信ができなくなりコンテンツの取得に失敗する）。
    • self.addEventListener('fetch', event => {...内でevent.respondWithを使わなければ通常の通信を行ってくれそう。そのため、この項に関してはNavigator.onLineを使わない理由としては不適。

オフラインの時だけというのは正確ではなかったですね。正確にはサーバーと通信ができないときになります。