背景
随着移动设备的普及，PWA（Progressive Web App）作为一种新型的 Web 应用程序，受到了越来越多的关注和重视。PWA 具有像 Native App 一样的体验，可以离线使用、推送通知等。Vue-CLI 是一个官方支持的 Vue.js 应用程序开发工具，可以快速创建 Vue.js 应用程序。
在 Vue-CLI 中使用 PWA 插件可以轻松地将应用程序转换为 PWA，但有时在上线后，应用程序仍然未展示安装提示，这可能会影响用户的使用体验。
本文将介绍如何解决 Vue-CLI 创建的 PWA 工程上线后仍然未展示安装提示的问题。
解决方案
1. 确认支持 PWA 的浏览器
首先，需要确认用户所使用的浏览器是否支持 PWA。PWA 需要浏览器支持 Service Worker 和 Manifest，目前支持 PWA 的浏览器有 Chrome、Firefox、Opera、Edge、Safari。
2. 确认 Service Worker 是否注册成功
使用 PWA 插件后，会自动生成一个 service-worker.js 文件，用于管理缓存和离线使用等功能。需要确认 Service Worker 是否注册成功。
-- -------
-- ---------------- -- ---------- -
------------------------------------------------------
------------------ -- -
-------------------- ------ ------ -------------
--
------------ -- -
-------------------- ------ ------ ------
--
-3. 确认 Manifest 是否正确配置
Manifest 是一个 JSON 文件，用于描述应用程序的元数据，包括应用程序的名称、图标、主题色等信息。需要确认 Manifest 是否正确配置。
-- -------------
-
------- --- -----
------------- --- -----
------------ ----
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
------ ----------------------------------------
-------- ----------
------- -----------
--
-
------ ----------------------------------------
-------- ----------
------- -----------
-
-
-4. 确认 HTTPS 是否开启
PWA 需要在 HTTPS 环境下才能正常工作，需要确认是否开启了 HTTPS。
5. 确认 Service Worker 是否更新
如果 Service Worker 更新了，需要刷新页面才能生效。可以在 Service Worker 更新时发送通知提醒用户刷新页面。
-- -----------------
------------------------------------ -- -- -
----- ---------------- - ---------------
------------------------------------------------ -- -- -
-- ----------------------- --- ------------ -
-- ------------
--------------------------------------------- -
----- ---------------
----- -----------------------------
--
-
--
--6. 确认 Web App Manifest 是否更新
如果 Manifest 更新了，需要刷新页面才能生效。可以在 Manifest 更新时发送通知提醒用户刷新页面。
-- -------
---------------------------------------------- ----- -- -
----------------------
-- -------- -------- ---
----- ---------------- - -- -- -
----- ------------ - --- ----------------------- -
----- ---------------
----- -----------------------------
--
-------------------- - -- -- ------------------------
-
------------------
--总结
通过以上几个步骤，可以解决 Vue-CLI 创建的 PWA 工程上线后仍然未展示安装提示的问题。需要注意的是，在开发过程中，需要经常测试 PWA 的功能，以确保应用程序的稳定性和用户体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6603b1f1d10417a22202cee7