PWA 部署在 node.js 中，在 Android 和 iOS 上以独立模式运行 [英] PWA deployed in node.js running in Standalone mode on Android and iOS
问题描述
我正在尝试在 Android 和 iOS 上以独立模式实现 PWA.我有一个安全的 node.js 服务器 (HTTPS)，并且一切正常(index.html、manifest.json、serviceWorker.js、...).
I am trying to implement PWA in standalone mode on Android and iOS. I have a secure node.js server (HTTPS) and everything is apparently working fine (index.html, manifest.json, serviceWorker.js, ...).
该应用程序可以从 Chrome 正常运行，并且可以添加到主屏幕并在 PC 上以独立模式运行.它也适用于 iOS (Safari) 的独立模式，但不适用于 Android (Chrome).
The application runs correctly from Chrome and can be added to the home screen and run in standalone mode on the PC. It also works in standalone mode on iOS (Safari), but not on Android (Chrome).
因此，我测试了三种不同的 PWA:使用 ionicPWA 的基本示例、angularPWA 的另一个示例，然后使用自己的 PWA.行为是相同的，如果我在 Firebase 这样的服务器上部署应用程序，那么这些应用程序在 iOS 和 Android 上都以独立模式运行.但是，如果我在 node.js 服务器上部署应用程序，则该应用程序只能在 iOS 上以独立模式运行，而不能在 Android 上运行.
Because of this, I tested three different PWAs: with a basic example of ionicPWA, another example of angularPWA, and then with an own PWA. The behavior is the same, if I deploy applications on a server like Firebase, then the apps work in standalone mode on both iOS and Android. But if I deploy the apps on my node.js server, the application only works in standalone mode on iOS but not on Android.
我已经在不同的 Android 设备上使用 Chrome v67.0.3396.87、Android 8.1.0、7.0.0 和 6.0.0 进行了测试.PWA 仅在浏览器模式下打开.
I have tested on different Android devices with the v67.0.3396.87 of Chrome, on Android 8.1.0, 7.0.0 and 6.0.0. The PWA only opens in browser mode.
我已经看到有关此行为的其他问题和答案(ref1, ref2, ref3) 但我还没有找到解决方案.
I have seen other questions and answers about this behavior (ref1, ref2, ref3) but I have not found the solution.
这可能是 Chrome-v67 的错误吗?还是我的服务器的某些配置会影响 Chrome 在 Android 上的行为?
Could this be a bug of Chrome-v67? Or can it be some configuration of my server that affects the behavior of Chrome on Android?
有什么想法吗?
UPDATE1: index.html、manifest.json、seviceWorker (sw.js) 和 Chrome devTools 审计
UPDATE1: index.html, manifest.json, seviceWorker (sw.js) and audit with 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(服务工作者)
sw.js (service worker)
// 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):
Testing three apps (ionicPWA example, angularPWA example, my own PWA):
使用ionicPWA，控制台中会出现两个警告:
with ionicPWA two warngins appears in the console:
*vendor.js:1:本机:尝试调用 StatusBar.styleDefault，但 Cordova 不可用.确保包含 cordova.js 或在设备/模拟器中运行
*vendor.js:1: Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator E
*DevTools 解析 SourceMap 失败:https://xxx.xxx.xxx/build/sw-toolbox.js.map(索引):28 个 service worker 安装
*DevTools failed to parse SourceMap: https://xxx.xxx.xxx/build/sw-toolbox.js.map (index):28 service worker installed
使用 AngularPWA 时不会出现消息/错误/警告...
with AngularPWA no messages/errors/warnings appears...
使用我自己的 PWA 应用程序，行为相同.. PC 上 Chrome devTools 的控制台中未出现任何消息/错误/警告
with my own PWA app, the same behavior.. no messages/errors/warnings appears in the console of Chrome devTools on PC
推荐答案
我已经解决了这个问题.一位同事告诉我，问题可能是由于服务器上配置的端口造成的.我已经配置了服务器 node.js 侦听特定端口(https://mydomain:xxxx)，而不是在默认端口 (443)，出于某种原因，这导致 PWA 应用程序无法在 Android 上的独立模式下运行.我在默认端口443"中设置了服务器，并且 PWA 应用程序已经在 Android 和 iOS 的独立模式下正常工作.谢谢大家.
I have solved the problem. A colleague told me that maybe the problem was due to the port configured on the server. I had configured the server node.js listening on a specific port (https://mydomain:xxxx), not in the default port (443), and this for some reason caused the PWA application not work in standalone mode on Android. I set up the server in the default port "443" and the PWA application already works correctly in standalone mode in both Android and iOS. Thanks to all.
这篇关于PWA 部署在 node.js 中，在 Android 和 iOS 上以独立模式运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
