时间戳

首页 > 解决方案 > 通过 VPN 在 Android 上创建 WebAPK 失败

progressive-web-apps - 通过 VPN 在 Android 上创建 WebAPK 失败

问题描述

我的公司 VPN 阻止来自 Android 设备的所有外部流量。我正在尝试测试内部托管的 PWA（防火墙内的所有资源）。我观察到的是，尽管通过了 Lighthouse 审核，但我的 PWA 在设备上的 WebAPK 创建过程中失败了。具体来说，安装过程需要很长时间，最终会降级为应用程序快捷方式安装。

我做了什么：

  1. 构建了我能想到的最简单的 PWA（index.html 注册 service worker + sw.js 甚至可以离线处理 index.html 请求 + Web manifest）并将其托管在内部服务器上
  2. 在桌面上运行 Lighthouse 审计并确保它通过所有 PWA Lighthouse 审计
  3. 在清单上运行 bubblewrap init 以仔细检查图标/名称是否正常
  4. 尝试从防火墙后面的 Chrome 点点菜单在 Pixel 手机上安装 PWA
  5. 过了很久，安装了应用快捷方式（带有Chrome覆盖图标）
  6. 在我的手机上检查了 chrome://webapks/ - 这并不奇怪，我没有为我的应用找到 WebAPK
  7. 打开我的公司 VPN 解决方法，它允许我绕过 VPN 限制并访问外部地址（有根电话 + ProxyDroid 黑客）
  8. 现在 WebAPK 创建工作

问题一：

有人可以解释一下 WebAPK 创建过程中涉及的哪些内容会使其在严格的公司防火墙后失败？这里是否有任何外部资源（可能是服务？）我可以提倡我的公司 VPN 将其列入白名单？如果没有，任何关于如何对 WebAPK 创建进行自动测试的建议将不胜感激。我曾想过使用bubblewrap 构建，但由于它是用于TWA 的，我没想到它会通过我的简单PWA。

问题2：

一般来说，为通过 Lighthouse 审核的 PWA 诊断 WebAPK 创建失败的最佳技术是什么？

标签： progressive-web-appswebapk

解决方案

WebAPK 由 Chrome 在服务器端生成。Chrome 将清单中的详细信息连同图标一起发送到其服务器，然后服务器返回 WebAPK。正如您所指出的，您的公司防火墙很可能正在阻止对该服务器的请求，从而阻止 Chrome 生成 WebAPK。

在 Chrome 中生成 WebAPK 的代码可以在这里找到

对于你的第二个问题，我们真的没有很好的调试工具，如果 Lighthouse 通过，它应该构建 WebAPK（除了上面提到的例外）。我怀疑您可以将设备连接到您的计算机并使用 ADB 查看日志，但这……丑陋。对不起。

推荐阅读