Question

我遇到了一个特殊的问题，我无法确定为什么会发生这种情况。如果有人经历过类似的事情并且可以解决问题，请帮忙。

我在本地设置了开发服务器。我使用xampp并设置了https等等。因此，我的本地开发内容由服务器提供，地址为https://local-site.test/

我还有生产环境，可以将网站部署到设置为https://production-site.com的共享托管服务器上

我的文件结构对于本地（开发）站点和生产站点都是相同的。因此，在一个环境与另一个环境之间，路径或文件夹结构不存在任何问题。完全一样。

当我在本地开发服务器上运行我的应用程序时，它运行良好。所有页面都被缓存（静态和动态），当我模拟离线时，将返回缓存的页面。（它在Chrome，Firefox和Opera中完美运行）

但是，当我将文件移植到生产服务器时，我在清单选项卡中收到一条警告通知，即chrome无法显示所有图标。（在“可安装性”部分下）。这不是我的本地服务器上的问题。三个图标都位于同一文件夹中，并且可以从json清单文件中调用并可以显示。

在生产服务器上，它仅显示第一个192x192。它不会显示其他两个256和512像素。在本地服务器上，它显示了全部三个，并且它们都从同一位置提供。

不过，当我为pwa运行灯塔审核时，我的应用程序通过了所有测试。在我访问过我的应用程序的所有设备上，当我收到来自chrome的安装横幅提示以将该页面安装到主屏幕时，便能够安装该应用程序。因此，我能够从实时服务器上成功在手机和平板电脑上安装应用程序。

主要问题是，当我从一个页面导航到另一个页面时，我看到所有缓存均已创建-静态和动态，但是当我进入飞行模式或使用离线模拟器时，它总是说页面处于离线状态。

除非有可能影响此问题的Web服务器配置，否则我一生都无法弄清楚是什么原因引起的。

下面是屏幕截图和我正在使用的代码。（就像我说的那样，我对本地内容和生产内容的设置都是相同的，因此我在两端所做的操作都没有什么不同）。它在我的测试服务器上很好用，但是在共享主机服务器上却有提到的问题。

    {
        "name": "My site",
        "short_name": "Site",
        "icons": [
            {
                "src": "android-chrome-192x192.png",
                "sizes": "192x192",
                "type": "image/png"
            },
            {
                "src": "android-chrome-256x256.png",
                "sizes": "256x256",
                "type": "image/png"
            },
            {
                "src": "android-chrome-512x512.png",
                "sizes": "512x512",
                "type": "image/png"
            }
        ],
        "theme_color": "#0A78A8",
        "background_color": "#ffffff",
        "start_url": "/",
        "scope": "/",
        "description":"The short description",
        "display": "standalone",
        "dir":"ltr",
        "lang":"en_US"
    }

上面是我的manifest.json文件。

    let CACHE_STATIC_NAME = 'static-v1';
    let CACHE_DYNAMIC_NAME = 'dynamic-v1';

    self.addEventListener('install', function (event) {
        event.waitUntil(
            caches.open(CACHE_STATIC_NAME)
                .then(function (cache) {
                  return  cache.addAll([
                        '/',
                        '/assets/img/logo-white-name-200-long.png',
                        '/assets/css/styles.css',
                        '/assets/css/fonts/icofont.woff',
                        '/assets/css/fonts/icofont.woff2',
                        '/assets/fonts/michroma.woff2',
                        '/assets/fonts/roboto-italic.woff2',
                        '/assets/fonts/roboto.woff2',
                        '/assets/js/fetch.js',
                        '/assets/js/promise.js',
                        '/assets/js/global-app.js',
                        '/assets/css/img/home/home-hero-800.jpg'
                    ]);
                })

        )
    });


    self.addEventListener('activate', function (event) {
        event.waitUntil(
            caches.keys()
                .then(function (keyList) {
                    return Promise.all(keyList.map(function (key) {
                        if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
                            return caches.delete(key);
                        }
                    }));
                })
        );
        return self.clients.claim();
    });


    self.addEventListener('fetch', function (event) {
        event.respondWith(
            caches.match(event.request)
                .then(function (response) {
                    if (response) {
                        return response;
                    }
                    else {
                        return fetch(event.request) 
                            .then(function (res) {
                                return caches.open(CACHE_DYNAMIC_NAME)
                                    .then(function (cache) {
                                        cache.put(event.request.url, res.clone());
                                        return res;
                                    })
                            })
                            .catch(function (err) {

                            }); 

                    }
                })
        );
    });

以上是我的服务工作者文件

warning on chrome dev tools that manifest could not load two of the icons. It loaded all three icons successfully on development web server

This is dev tools showing that my content is being cached in local storage on page visits

Lighthouse PWA audit, my app passes all tests

第二次访问后，我可以从生产服务器上获取“来自chrome的安装提示”提示，然后将其安装在不同的手机和平板电脑上。但是，当我尝试离线查看内容时，它不能提供服务工作者提供的任何缓存内容。

仅需添加其他内容，我就调出了Web主机，并在它们的整个场景中进行了浏览，他们从侧面看不到任何可能阻止文件脱机显示的原因。

此外，当我在Firefox上进行全部测试时，无论是在台式机还是移动设备上，它都能完美运行。我可以在离线模式或飞行模式下访问所有页面。

这真令人困惑。仅在Chrome和Opera（也使用chrome渲染引擎）上，它们无法在离线模式下工作。

如果有人可以找出导致问题的原因，我将为您提供帮助。

我知道这是一篇冗长的文章，但我尝试发布尽可能多的信息来帮助调试问题。

谢谢。

Answer 1

因此，我终于弄清楚了是什么原因阻止了我的Progressive Web App在使用相同渲染引擎的Chrome和Opera浏览器中以离线模式工作。

在生产服务器上，我使用gzip / mod_deflate将页面文件和脚本以压缩形式发送到浏览器。这是通常推荐的优化技术。加快文件的下载速度，浏览器可以将其解压缩。

我通过gzip / mod_deflate压缩了以下文件

文本/ html文本/纯文本/ xml文本/ css应用程序/ x-javascript应用程序/ javascript

就像我说的那样，当我第一次提出问题时，使用相同的设置，我的应用程序在Firefox的脱机模式下可以完美运行！但是，对于chrome，现在看来只有在我使用mod_gzip而不是mod_deflate进行压缩时才可以工作。

渐进式Web应用程序可以在Firefox中离线运行，但不能在chrome中运行，原因是？网络服务器问题？

1 个答案: