PWA 应用中 install button 消失的解决方法

PWA(Progressive Web App)应用在近年来逐渐成为了前端开发的热门话题。PWA应用与原生应用相比,具有更小的应用容量、更快的启动速度、更流畅的用户体验等优点。但是,我们有时候会遇到一些奇怪的问题,例如在某些浏览器上,PWA应用的 install button(安装按钮)会突然消失,用户无法再使用这个按钮添加应用到桌面。这是一种非常令人头疼的问题,但是我们可以采取一些解决方法。

产生问题的原因

PWA应用的 install button 消失的原因,在不同浏览器上有所不同。通常,这个问题出现在以下情况下:

  • 浏览器不支持 PWA 应用
  • 手动隐藏安装按钮
  • PWA 应用没有通过 HTTPS 发布
  • PWA 应用未达到 PWA 集成要求

解决方法

检查浏览器支持情况

在 Safari 浏览器上,PWA 需要用到 Web App Manifest 和服务工作线程。如果浏览器不支持这些功能,那么就不会展示出 install button。如果使用其他浏览器的时候,也无法看到安装按钮,就需要检查浏览器是否支持 PWA 应用。不支持的浏览器,可以考虑提供一个提示页面,让用户将浏览器更新到最新版本或者换用支持的浏览器。

以下代码可以用来进行检查浏览器是否支持 PWA 的功能:

-- ---------------- -- --------- -- ------------- -- ------- -
  ---------------- -- ------------
- ---- -
  ---------------- -- --- ------------
-

检查安装按钮是否被隐藏

在一些移动设备浏览器中,可能会手动隐藏 install button。这种情况下,需要给用户提供安装提示,例如卡片、弹窗等提示,使用户知道如何将 PWA 应用添加到桌面上。

以下代码可以用来检查安装按钮是否隐藏:

---------------------------------------------- ------- -- -
  --------------------- - ------
  -----------------------
  -- -- --------- ----- ---- ---- - ------ -- - ------
---

检查 HTTPS 情况

通过 HTTPS 发布 PWA 应用是必要的。现代浏览器不支持通过非 HTTPS 方式提供服务工人线程,而安装流程中也需要安全的环境来保证用户信息的安全。如果您的 PWA 应用没有通过 HTTPS 发布,你需要尽快让它从外网销售。部署后,您应该确保您的服务工人线程映射的 URL 是 HTTPS。

检查 PWA 集成已到达要求

PWA 集成因存在性能瓶颈问题,其对网络连接和页面加载速度有严格要求。必须支持离线时能够呈现基础内容,以及能够响应最小请求。这也是 PWA 的优势所在。如果您的 PWA 应用没有达到集成要求,那么是否提供 install button 即取决于浏览器是否能够触发这个信号。

我们通常会在 PWA 应用的 head 中设置 meta 标签来定义应用的基础信息,你必须确保以下内容的正确性:

----- --------------- ---------------------------- ---------------- --
----- ------------------ ----------------- --
----- -------------- --------------------- --

其中,manifest.json 是定义 PWA 应用的基础配置文件,你需要确保其正确且有效。

结论

在应用 PWA 开发时,常常会遇到这些问题,需要针对性的解决它们。对于 install button 消失的问题,您可以通过一系列方法来检查其是否存在,并作出相应的提醒与提示。该问题的出现通常源于多种情况,解决起来可以说是比较繁琐的。同时,您还需要为 PWA 应用设置一系列 GZip、代码压缩等优化措施,以实现 PWA 工程的极致优化。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671b72fe9babaf620fabab19