Chrome Application Cache deleted when going Offline

Question

I intend using a Service Worker to make a Web App available offline. The cache Storage shows the files when I have Internet Connection. However if I go Offline the cache seems to disappear. I do not have enabled the checkbox of Update on Reload in the Service Workers tab.

The fetch event of my service worker is:

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

When I am Online the print for the console is:

An unknown error occurred when fetching the script. Failed to load resource: net::ERR_INTERNET_DISCONNECTED service-worker.js

However when I am offline the console ouptut is the following:

[ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/bootstrap/CSS/bootstrap.css service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/logo.png cocoa.pythonanywhere.com/:1 Adding master entry to Application Cache with manifest https://cocoa.pythonanywhere.com/static/login/Offline/HTML/manifesto service-worker.js:113 [ServiceWorker] Fetch https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css service-worker.js:113 [ServiceWorker] Fetch https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/js/app.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/bootstrap/js/jquery-3.1.1.min.js service-worker.js:113 [ServiceWorker] Fetch https://cocoa.pythonanywhere.com/static/login/bootstrap/js/bootstrap.min.js service-worker.js:113 [Servic eWorker] Fetch https://cocoa.pythonanywhere.com/static/login/js/diem.js cocoa.pythonanywhere.com/:1 Slow network is detected. Fallback font will be used while loading: https://cocoa.pythonanywhere.com/static/login/bootstrap/fonts/glyphicons-halflings-regular.woff2 app.js:2 CLIENT: service worker registration in progress. app.js:4 CLIENT: service worker registration complete.

When I am Online the application tab looks:

The Application Cache is poblated and the Service Worker registered.

When I am Offline it appears like this:

The Cache is not poblated and the service worker not active.

Answer 1

I found the code that I needed for the service-worker in the following GitHub repository:

https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/custom-offline-page

The only thing I did was updating the Cahce File requested. In:

const OFFLINE_URL = 'name_of_the_file';