PWA развернут в файле node.js, работающем в автономном режиме на Android и iOS
Я пытаюсь реализовать PWA в автономном режиме на Android и iOS. У меня есть безопасный сервер node.js (HTTPS), и все, очевидно, работает нормально (index.html, manifest.json, serviceWorker.js, ...).
Приложение правильно запускается из Chrome и может быть добавлено на домашний экран и запущено в автономном режиме на ПК. Он также работает в автономном режиме на 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 (head)
<!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 (на ПК)
Тестирование трех приложений (пример 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 сервисных работников
с AngularPWA никаких сообщений / ошибок / предупреждений не появляется...
с моим собственным приложением PWA, такое же поведение.. никаких сообщений / ошибок / предупреждений не появляется в консоли Chrome devTools на ПК
1 ответ
Я решил проблему. Коллега сказал мне, что, возможно, проблема связана с портом, настроенным на сервере. Я настроил сервер node.js, прослушивающий определенный порт ( https://mydomain:xxxx), а не порт по умолчанию (443), и это по некоторым причинам привело к тому, что приложение PWA не работает в автономном режиме на Android. Я настроил сервер на порт по умолчанию "443", и приложение PWA уже работает корректно в автономном режиме как на Android, так и на iOS. Спасибо всем.