Lighthouse pwa 检查在气泡包装中失败，即使它在 chrome 中通过答案

【问题标题】：Lighthouse pwa check fails in bubblewrap even though it passes in chromeLighthouse pwa 检查在气泡包装中失败，即使它在 chrome 中通过
【发布时间】：2021-05-17 06:47:00
【问题描述】：

我正在尝试使用bubblewrap 从pwa 构建一个apk。我的 pwa 托管在 Chemistry for CSE 当我使用上面提到的webpage 的根目录中的manifest 启动bubblewrap 时，使用bubblewrap init

bubblewrap init --manifest https://rahman24.github.io/chemistryforcse/manifest.json

然后我使用 bubblewrap build 构建 apk。在构建时，这会生成一个 app-release-signed.apk 文件，在构建之后，当它进行灯塔检查时，得分为 88，但灯塔 pwa 检查说 no 并且检查失败但 apk 文件在同一个位置。这是第一个问题...它没有通过灯塔 pwa 检查，即使它在 chrome 工具中通过了这个检查

第二个问题是，在没有通过灯塔检查的情况下生成的 apk，我可以安装它。但是 url 栏显示在顶部的 app like in this screenshot 中。但我 pwa，一切都好请让我知道我可以为这两个做些什么来纠正它提前致谢

【问题讨论】：

标签： android progressive-web-apps lighthouse trusted-web-activity bubblewrap

【解决方案1】：

只有当您满足所有条件时，Lighthouse 才会显示 PWA 的完整通行证。目前您缺少一些必需的（可能是您无法正确创建 apk 的原因）

您的网络 PWA 似乎工作正常，但您应该执行以下操作：-

主题彩条

将<meta name="theme-color" content="#4d084d"/> 添加到您的文档<head> 中，使其与您的清单相匹配，一些旧版本的Chrome 需要同时工作，这就是它要求您添加它的原因。

iOS 图标

要在 iOS 上使用自定义图标正确安装，您需要将以下内容添加到您的 <head> 并带有指向相关图标的链接： <link rel="apple-touch-icon" href="/example.png">

无论如何你都应该拥有这个，因为任何将页面保存到主屏幕的人都会得到页面的屏幕截图。

图标必须是 180px 或 192px 正方形才能始终如一地工作。

安卓图标

最后，您需要在清单中添加一个可屏蔽的图标：

{ 
    "src": "path/to/maskable_icon.png",      
    "sizes": "196x196",     
    "type": "image/png",      
    "purpose": "any maskable"    
}

否则，在较新的 Android 设备上，您的图标将默认为白色背景。

我的猜测是解决上述问题将解决您的其他问题。

【讨论】：