PWA déployé dans node.js fonctionnant en mode autonome sous Android et iOS

J’essaie d’implémenter PWA en mode autonome sur Android et iOS. J’ai un serveur sécurisé node.js (HTTPS) et tout fonctionne apparemment bien (index.html, manifest.json, serviceWorker.js, …).

L’application fonctionne correctement à partir de Chrome et peut être ajoutée à l’écran d’accueil et s’exécuter en mode autonome sur le PC. Il fonctionne également en mode autonome sur iOS (Safari), mais pas sur Android (Chrome).

À cause de cela, j’ai testé trois PWA différents: avec un exemple de base de ioniquePWA, un autre exemple de angular PWA, puis avec un propre PWA. Le comportement est identique, si je déploie des applications sur un serveur tel que Firebase, les applications fonctionnent en mode autonome sur iOS et Android. Mais si je déploie les applications sur mon serveur node.js, l’application ne fonctionne qu’en mode autonome sur iOS mais pas sur Android.

J’ai testé sur différents appareils Android avec la v67.0.3396.87 de Chrome, sur Android 8.1.0, 7.0.0 et 6.0.0. Le PWA ne s’ouvre qu’en mode navigateur.

J’ai vu d’autres questions et réponses à propos de ce comportement ( ref1 , ref2 , ref3 ) mais je n’ai pas trouvé la solution.

Serait-ce un bug de Chrome-v67? Ou peut-il y avoir une configuration de mon serveur qui affecte le comportement de Chrome sur Android?

Des idées?

UPDATE1: index.html, manifest.json, seviceWorker (sw.js) et audit avec Chrome devTools

index.html (tête)

      PWA Test                      

manifest.json

  { "name": "PWA 3002 Test", "short_name": "PWA 3002", "description": "PWA aplication", "background_color": "#FFF", "theme_color": "#FB314E", "orientation": "portrait", "display": "standalone", "start_url": "./index.html?utm_source=web_app_manifest", "scope": "./", "lang": "es-ES", "icons": [ { "src": "./img/favicon-1024.png", "sizes": "1024x1024", "type": "image/png" }, { "src": "./img/favicon-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "./img/favicon-384.png", "sizes": "384x384", "type": "image/png" }, { "src": "./img/favicon-256.png", "sizes": "256x256", "type": "image/png" }, { "src": "./img/favicon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "./img/favicon-128.png", "sizes": "128x128", "type": "image/png" }, { "src": "./img/favicon-96.png", "sizes": "96x96", "type": "image/png" }, { "src": "./img/favicon-32.png", "sizes": "32x32", "type": "image/png" }, { "src": "./img/favicon-16.png", "sizes": "16x16", "type": "image/png" } ] } 

sw.js (travailleur de service)

 // name and version of cache const CACHE_NAME = 'v1_cache_pwa'; // for cache var urlsToCache = [ './', './css/styles.css', './img/favicon.png', './img/1.png', './img/2.png', './img/3.png', './img/4.png', './img/5.png', './img/6.png', './img/favicon-1024.png', './img/favicon-512.png', './img/favicon-384.png', './img/favicon-256.png', './img/favicon-192.png', './img/favicon-128.png', './img/favicon-96.png', './img/favicon-64.png', './img/favicon-32.png', './img/favicon-16.png' ]; // install event self.addEventListener('install', e => { e.waitUntil( caches.open(CACHE_NAME) .then(cache => { return cache.addAll(urlsToCache) .then(() =>{ self.skipWaiting(); }); }) .catch(err => { console.log('No se ha registrado el cache', err); }) ); }); // activate event self.addEventListener('activate', e => { const cacheWhiteList = [CACHE_NAME]; e.waitUntil( caches.keys() .then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if(cacheWhiteList.indexOf(cacheName) === -1){ // Borrar elementos que no se necesitan return caches.delete(cacheName); } }) ); }) .then(() => { //Activar cache self.clients.claim(); }) ); }); // fetch event self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); }); 

Audit Chrome DevTools (sur PC)

Test de trois applications (exemple ionicPWA, exemple angularPWA, mon propre PWA):

  • avec ionicPWA, deux warngins apparaissent dans la console:

    * vendor.js: 1: Native: essayé d’appeler StatusBar.styleDefault, mais Cordova n’est pas disponible. Assurez-vous d’inclure cordova.js ou de l’exécuter dans un appareil / simulateur E

    * DevTools n’a pas réussi à parsingr SourceMap: https://xxx.xxx.xxx/build/sw-toolbox.js.map (index): 28 opérateurs de service installés.

  • avec AngularPWA, aucun message / erreur / avertissement ne s’affiche …

  • Même comportement avec ma propre application PWA. Aucun message / erreur / avertissement ne s’affiche dans la console de Chrome devTools sur PC.

    J’ai résolu le problème. Un collègue m’a dit que le problème était peut-être dû au port configuré sur le serveur. J’avais configuré le serveur node.js à l’écoute sur un port spécifique ( https: // mydomain: xxxx ), pas dans le port par défaut (443), ce qui, pour une raison quelconque, a empêché l’application PWA de fonctionner en mode autonome sous Android. J’ai configuré le serveur dans le port par défaut “443” et l’application PWA fonctionne déjà correctement en mode autonome sous Android et iOS. Merci à tous.