PWA部署在Android和iOS上以独立模式运行的node.js中 [英] 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的错误？或者，我的服务器的某些配置是否会影响Android上Chrome的行为？
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控制台中会出现两个warngins：
with ionicPWA two warngins appears in the console:
* vendor.js：1：Native：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或在设备/模拟器中运行
E
*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名服务人员
*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中设置了服务器，并且在Android和iOS中，PWA应用程序已在独立模式下正常工作。
感谢所有。
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部署在Android和iOS上以独立模式运行的node.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
