【发布时间】：2019-01-11 15:32:39
【问题描述】：
我正在尝试在 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 设备上进行了测试，使用了 v67.0.3396.87 的 Chrome，在 Android 8.1.0、7.0.0 和 6.0.0 上。 PWA 仅在浏览器模式下打开。
我已经看到有关此行为的其他问题和答案（ref1、ref2、ref3），但我还没有找到解决方案。
这可能是 Chrome-v67 的错误吗？还是我的服务器的某些配置会影响 Chrome 在 Android 上的行为？
有什么想法吗？
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）：
-
对于 ionicPWA，控制台中会出现两个警告：
*vendor.js:1: Native: 尝试调用 StatusBar.styleDefault，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行 E
*DevTools 无法解析 SourceMap：https://xxx.xxx.xxx/build/sw-toolbox.js.map (index): 28 service worker 已安装
使用 AngularPWA 不会出现任何消息/错误/警告...
使用我自己的 PWA 应用程序，行为相同.. PC 上的 Chrome devTools 控制台中不会出现任何消息/错误/警告
【问题讨论】：
-
部署到不工作的服务器时，您是否使用 chrome 开发审计工具进行了测试？您是否看到“可以提示用户安装 Web 应用程序”且没有其他错误？
-
谢谢@mathias。我在帖子中添加了更多详细信息（一些文件的内容和使用 Chrome devTools 进行的审核）。是的！当我第一次在手机上打开三个测试应用程序中的任何一个时，会出现将应用程序添加到主屏幕的选项，并且添加正确。
-
您可能想在 Chrome Beta 68 中尝试 - 如果它在那里工作，那么它很可能是 67 错误（我认为）。此外，您可能需要考虑将您的应用程序上传到免费网站（如 Glitch.me）几分钟，看看它是否是您的环境。如果您使用它，请记住为您的 URL 输入 HTTPS。如果您不这样做，它们不会重定向到 https。
-
感谢@mathias，我尝试了 Chrome Beta 68，但它不起作用。但是，我不明白发生了什么......当应用程序部署在我的 node.js 服务器上时，必须有一些配置或某些东西使 Android 独立模式无法工作，因为当我在 Firebase 中部署应用程序时应用程序工作:np-2805.firebaseapp.com（ionicPWA 示例）
-
很遗憾，您可能正在调试 Google 应该解决的问题。
标签： node.js ionic-framework google-chrome-app progressive-web-apps