Progressive Web App: Offline-Cache funktioniert nicht auf Android, es funktioniert auf Chrome-Dev-Tools

Question

Ich habe eine einfache PWA, die online funktioniert. Ich habe auch das Offline-Verhalten in den Chrome-Entwicklungstools getestet und der Service-Mitarbeiter macht seine Arbeit perfekt. Aber wenn ich die App von meinem Android-Telefon aus starte, funktioniert es nicht offline, da der Cache-Speicher im Offline-Modus nicht mehr vorhanden ist.

Dies ist der Servicemitarbeiter:

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 

    }) 
); 
}); 

Wenn auf der entsprechenden URL von Chrome Dev Tool, um die App zu testen, ist es auch offline reagiert. Aber da es am Telefon nicht funktionierte, habe ich das Gerät mit Chrome verbunden und debuggte. Dies ist der Cache-Speicher, wenn das Telefon ist online:

aber wenn ich den Offline-Flag im Servicemitarbeiter Bereich überprüfen und aktualisieren Sie die Seite, verschwindet der Cache (siehe folgende Screenshot)!

Es ist wie der Cache aussieht, ist nicht persistent offline !! Was ist los?

Danke.

EDIT

Es wird von dem mobilen Gerät zu arbeiten, wenn auf Chrome läuft. Das Offline-Problem wird nur angezeigt, wenn das Symbol "Home" als PWA ausgeführt wird.

Answer 1

Ich habe es behoben, und ich detailliere das Problem, wenn jeder Benutzer sich in dem gleichen Zustand befindet.

Das Problem war, dass in der manifest.json ich eine Start-URL für Google Analytics eingegeben hatte:

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

Wenn offline, die Anwendung nicht wissen, was zu tun ist, damit es angezeigt, die „Keine Verbindung "Bildschirm.

Um es zu beheben, habe ich eine Fehlerfunktion in der Service Worker Fetch Funtion hinzugefügt, um die App auf index.html umzuleiten. Auf diese Weise:

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'); 

    }) 
); 
});