Progressive Web App: cache hors ligne ne fonctionne pas sur Android, il fonctionne sur Chrome dev Outils

Question

J'ai un simple PWA qui fonctionne bien en ligne. J'ai également testé le comportement hors ligne dans Chrome Dev Tools, et le technicien de service fait parfaitement son travail. Mais lorsque je lance l'application à partir de mon téléphone Android, elle ne fonctionne pas en mode hors connexion, car le stockage en mémoire cache n'est plus disponible en mode hors connexion.

C'est le travailleur de service:

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 

    }) 
); 
}); 

Lors du test de l'application sur son URL à partir d'outils Chrome Dev, il répond également hors ligne. Mais comme il ne fonctionnait pas au téléphone, j'ai connecté l'appareil à Chrome et débogué. Ceci est le stockage du cache lorsque le téléphone est en ligne:

mais si je vérifie le drapeau hors ligne dans le volet des travailleurs de service et actualiser la page, le cache disparaît (voir capture d'écran ci-dessous)!

Il semble que le cache est pas persistant en ligne !! Que ce passe-t-il?

Merci.

EDIT

Il travaille à partir de l'appareil mobile si vous travaillez sur Chrome. Le problème hors ligne apparaît uniquement lors de l'exécution à partir de l'icône "Accueil", en tant que PWA.

Answer 1

Je l'ai corrigé, et je détaille le problème si un utilisateur se retrouve dans le même état.

Le problème est que dans le manifest.json j'étais entré une URL de départ pour Google Analytics:

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

En mode hors ligne, l'application ne savait pas quoi faire, il affiche le « Pas de connexion " écran. Pour corriger cela, j'ai ajouté une fonction d'erreur dans la fonction de récupération du service worker, pour rediriger l'application vers index.html. De cette façon:

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

    }) 
); 
});