“Unavailable website”, because the cache emptied when offline?

Question

I must have missed something obvious. I make a pwa for the offline mode. I cache files with a Service Worker. I see them in Cache storage.

But when i go offline, and hit F5, the website appears unavailable. And i see the Cache storage is empty. And when i get online again, the storage is here.

What is going on dear dev?

cache emptied when offline

Answer 1

DevTools will only let you inspect the cache associated with the current origin for the web page that's open.

If you're offline and don't show a fallback page via your service worker, then you'll see the standard "No Internet" page—on Chrome, this is the "offline dino" game.

The URL for this page is set to chrome-error://chromewebdata/ and the origin is set to null :

Because the origin doesn't match the origin of your actual web application, there's nothing shown in the Cache viewer in DevTools.