Progressive Web App: offline cache does not work on Android, it works on Chrome dev Tools

Question

I have a simple PWA that works fine online. I have also tested the offline behaviour in Chrome Dev Tools, and the service worker is doing its job perfectly. But when I run the app from my Android phone, it doesn't work offline as the Cache Storage is no more present when offline.

This is the service worker:

var dataCacheName = 'myappData-v3n';
var cacheName = 'myapp-3n';
var filesToCache = [
  '/meteosurf/',
  '/meteosurf/index.html',
  'scripts/hammer.min.js',
  'images/play_white.svg', 
  'images/stop_white.svg',
  'images/back_white.svg',
  'images/forward_white.svg',
  'images/sfondo.jpg',
  'images/ic_refresh_white_24px.svg',
  'scripts/meteo-zoom.js',
  'scripts/meteosurf_200.js',
  'scripts/jquery3-2-1.min.js',
  'scripts/jqueryui1-12-1.min.js',
  'styles/inline_01.css',
  'styles/meteosurf_200.css',
  'styles/jqueryui-smoothness.css',
  'styles/images/ui-bg_glass_65_ffffff_1x400.png',
  'styles/images/ui-icons_454545_256x240.png',
  'images/icons/icon-64x64.png',
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});


self.addEventListener('fetch', function(event) {
  console.log('Fetch event for ', event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found ', event.request.url, ' in cache');
        return response;
      }
      console.log('Network request for ', event.request.url);
      return fetch(event.request)

    }).catch(function(error) {

      // TODO 6 

    })
  );
});

When testing the app on its url from Chrome Dev tools, it responds also offline. But as it was not working on the phone, I connected the device to Chrome and debugged. This is the cache storage when the phone is online:

but if I check the Offline flag in service worker pane and refresh the page, the cache disappears (see following screenshot)!

It looks like the cache is not persistent offline!! What's happening?

Thanks.

EDIT

It is working from the mobile device if running on Chrome. The offline problem appears only when running from the "Home" icon, as a PWA.

Answer 1

I have fixed it, and I detail the problem if any user will find himself in the same condition.

The problem was that in the manifest.json I had entered a start url for Google Analytics:

 "start_url": "/meteosurf/?utm_source=mobile&utm_medium=device&utm_campaign=standalone",

When offline, the application didn't know what to do, so it displayed the "No Connection" screen.

In order to fix it, I have added an error function in the service worker fetch funtion, to redirect the app to index.html. This way:

self.addEventListener('fetch', function(event) {
  console.log('Fetch event for ', event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found ', event.request.url, ' in cache');
        return response;
      }
      console.log('Network request for ', event.request.url);
      return fetch(event.request)

    }).catch(function(error) {

      return caches.match('index.html');

    })
  );
});