Question

我正在尝试在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设备上使用Chrome v67.0.3396.87在Android 8.1.0、7.0.0和6.0.0上进行了测试。 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）：

两个warngins出现在控制台中：

* vendor.js：1：本机：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或在设备/模拟器中运行 E

* DevTools无法解析SourceMap：https://xxx.xxx.xxx/build/sw-toolbox.js.map （索引）：已安装28位服务人员
使用AngularPWA不会显示任何消息/错误/警告...
使用我自己的PWA应用程序，行为相同。.PC上的Chrome devTools控制台中没有消息/错误/警告出现

Answer 1

我已经解决了问题。一位同事告诉我，问题可能出在服务器上配置的端口。我已配置服务器node.js在特定端口（https://mydomain:xxxx）上侦听，而不是在默认端口（443）上侦听，由于某种原因，这导致PWA应用程序无法在Android上以独立模式运行。我将服务器设置为默认端口“ 443”，并且PWA应用程序已在Android和iOS的独立模式下正常运行。谢谢大家。

在Android和iOS上以独立模式运行的node.js中部署的PWA

1 个答案: