t_wの輪郭

Feedlyでフォローするボタン
Service WorkerキャッシュPWAでページを更新しても内容が更新されないCache API
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);
        })
    );
}
PWAでページを更新しても内容が更新されないスマホでプッシュ通知をタップするとService Workerのコードが表示されるあれ接続判定にNavigator.onLineを使うのはダメなのかしら

あれ

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を使わない理由としては不適。

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