什么是 PWA 应用
PWA 应用全称为 Progressive Web App，是一种使用现有技术来创建具备本地应用程序（Native App）体验的 Web 应用程序的新型方式。通过使用 Service Worker 和 Web App Manifest，PWA 应用可以脱离网络而独立运行，提供接近原生应用的交互体验，如快速加载、无需等待、离线应用等。
PWA 应用为什么会出现安装提示
PWA 应用可以被安装到设备的主屏幕上，从而在用户点击主屏幕上的图标时，打开一个可独立运行的应用程序。这种安装方式提供了与原生应用程序近乎相同的体验，例如看起来和运行起来都像原生应用程序，与网络连接状态无关，具有可靠性、即时响应等特点，同时可以方便地被用户访问。
如何让用户知道 PWA 应用被安装
在 PWA 应用被安装后，如何让用户知道已经安装成功，以便更好的使用 PWA 应用，提高用户体验呢？
在 PWA 应用中添加安装提示
我们可以通过 Web App Manifest 文件定义一个 "short_name" 属性，用来在安装提示中显示应用程序的名称。
-
------------- --- -----
------- --- ----------- --- -----
-------- --
------ ------------------------
-------- ----------
------- -----------
--
-为了在 PWA 应用界面内展示安装提示，我们可以通过监听 'beforeinstallprompt' 事件来提示用户安装应用程序。
--- --------------- ---------------------------------------------- --- -- - ------------------- -------------- - -- ----------------------- --- -------- ---------------------- - -- --------------------- ------------------------------------------------------------- ------- -
这样，当用户访问 PWA 应用时，如果满足安装条件，即可在应用程序中看到"添加到主屏幕"按钮，点击按钮可以下载并安装应用程序。
安装成功后，发出提示
我们也可以通过监听 "appinstalled" 事件在安装成功后，提示用户应用程序已经安装。
--------------------------------------- ----- -- - -- ------------- ----------- --- --- ---- ------------- ---
当然，如果您的 PWA 应用已经被安装，您可以通过检查是否存在特定 meta 标签来显示您想要的任何内容。
--- ------------------ - ---------------------------- -- -------------------- - -------------------------- - ---- - ---------------------- -
总结
通过添加安装提示，可以引导用户积极地下载并安装 PWA 应用程序，同时通过发出提示来告知用户安装结果。PWA 应用的安装流程丝毫不逊于原生应用程序，尤其对于一些希望离线运行的应用程序，为用户带来了极大的便利。
参考资源
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f91475f6b2d6eab30b1f42