我试图在Android和iOS上以独立模式实现PWA。我有一个安全的node.js服务器（HTTPS），一切都显然工作正常（index.html，manifest.json，serviceWorker.js，...）。
该应用程序可以从Chrome正确运行，并可以添加到主屏幕并在PC上以独立模式运行。它也适用于iOS（Safari）上的独立模式，但不适用于Android（Chrome）。
因此，我测试了三种不同的PWA：使用ionicPWA的基本示例，angularPWA的另一个示例，然后使用自己的PWA。行为是相同的，如果我在像Firebase这样的服务器上部署应用程序，那么这些应用程序在iOS和Android上都以独立模式运行。但是如果我在我的node.js服务器上部署应用程序，该应用程序仅在iOS上以独立模式运行，但在Android上不运行。
我已经在Android 8.1.0,7.0.0和6.0.0上使用v67.0.3396.87 Chrome在不同的Android设备上进行了测试。 PWA仅在浏览器模式下打开。
我已经看到了关于这种行为的其他问题和答案（ref1，ref2，ref3），但我还没有找到解决方案。
这可能是Chrome-v67的错误吗？或者可以是我的服务器的某些配置会影响Android上Chrome的行为？
有任何想法吗？
UPDATE1：index.html，manifest.json，seviceWorker（sw.js）并使用Chrome devTools进行审核
index.html（头）
<!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（服务工作者）
// 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审核（在PC上）
测试三个应用程序（ionicPWA示例，angularPWA示例，我自己的PWA）：
我已经解决了这个问题。一位同事告诉我，问题可能是由于服务器上配置的端口造成的。我已将服务器node.js配置为侦听特定端口（https://mydomain:xxxx），而不是默认端口（443），这由于某种原因导致PWA应用程序无法在Android上以独立模式运行。我在默认端口“443”中设置服务器，并且在Android和iOS中，PWA应用程序已在独立模式下正常工作。谢谢大家。