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

洪伟彦

2023-03-14

问题内容：

我正在尝试在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 8.1.0、7.0.0和6.0.0的Chrome
v67.0.3396.87的不同Android设备上进行了测试。PWA仅在浏览器模式下打开。

这可能是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）：

使用ionicPWA，控制台中会出现两个warngins：
vendor.js：1：本机：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或在设备/模拟器E中运行
DevTools无法解析SourceMap：https ://xxx.xxx.xxx/build/sw-toolbox.js.map （index）：28已安装服务工作者
使用AngularPWA时，不会出现任何消息/错误/警告…
与我自己的PWA应用程序相同的行为.. PC上的Chrome devTools控制台中未显示任何消息/错误/警告

问题答案：

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

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

相关阅读

相关文章

相关问答

相关工具

相关文档