PWA implementado en node.js ejecutándose en modo independiente en Android e iOS
Estoy tratando de implementar PWA en modo independiente en Android e iOS. Tengo un servidor node.js seguro (HTTPS) y aparentemente todo funciona bien (index.html, manifest.json, serviceWorker.js, ...).
La aplicación se ejecuta correctamente desde Chrome y se puede agregar a la pantalla de inicio y ejecutarse en modo independiente en la PC. También funciona en modo independiente en iOS (Safari), pero no en Android (Chrome).
Debido a esto, probé tres PWA diferentes: con un ejemplo básico de ionicPWA, otro ejemplo de angularPWA, y luego con un PWA propio. El comportamiento es el mismo, si implemento aplicaciones en un servidor como Firebase, entonces las aplicaciones funcionan en modo independiente tanto en iOS como en Android. Pero si implemento las aplicaciones en mi servidor node.js, la aplicación solo funciona en modo independiente en iOS pero no en Android.
He probado en diferentes dispositivos Android con la v67.0.3396.87 de Chrome, en Android 8.1.0, 7.0.0 y 6.0.0. El PWA solo se abre en modo navegador.
He visto otras preguntas y respuestas sobre este comportamiento ref1, ref2, ref3) pero no he encontrado la solución.
¿Podría ser esto un error de Chrome-v67? ¿O puede ser alguna configuración de mi servidor que afecta el comportamiento de Chrome en Android?
¿Algunas ideas
ACTUALIZACIÓN1: index.html, manifest.json, seviceWorker (sw.js) y auditar con Chrome devTools
index.html (cabeza)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title-->
<title>PWA Test</title>
<!--icon-->
<link rel="shortcut icon" type="image/png" href="img/favicon.png"></link>
<!--color-->
<meta name="theme-color" content="#FB314E">
<!--for mobile-->
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<!--for Apple devices-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="img/favicon.png"></link>
<link rel="apple-touch-startup-image" href="img/favicon.png"></link>
<!-- pwa configuration-->
<link rel="manifest" href="manifest.json"></link>
<!--style-->
<link rel="stylesheet" href="css/styles.css"></link>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Scripts-->
<script src="main.js"></script>
</head>
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 (trabajador de servicio)
// 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);
})
);
});
Chrome DevTools audit (en PC)
Probar tres aplicaciones (ejemplo ionicPWA, ejemplo angularPWA, mi propio PWA):
with ionicPWA aparecen dos warngins en la consola:
* vendor.js: 1: Nativo: intentó llamar a StatusBar.styleDefault, pero Cordova no está disponible. Asegúrese de incluir cordova.js o ejecutarlo en un dispositivo / simulador E
* DevTools no pudo analizar SourceMap:https: //xxx.xxx.xxx/build/sw-toolbox.js.ma (índice): 28 trabajadores de servicio instalados
with AngularPWA no aparece ningún mensaje / error / advertencia ...
con mi propia aplicación PWA, el mismo comportamiento ... no aparece ningún mensaje / error / advertencia en la consola de Chrome DevTools en la PC