首先通过浏览器菜单或地址栏提示将支持PWA的网站添加到桌面,具体步骤包括打开网站、点击安装选项并确认;开发者还可利用JavaScript监听beforeinstallprompt事件,自定义安装按钮并控制安装流程,实现用户友好地将PWA应用安装至桌面。

如果您希望将一个支持PWA的网站像原生应用一样从桌面快速启动,谷歌浏览器提供了便捷的功能来实现这一操作。该功能依赖于网站本身已配置好相应的清单文件和服务工作线程。
本文运行环境:Google Chrome 最新版,Windows 11
一、通过浏览器菜单添加
此方法适用于大多数支持PWA的网站,通过浏览器右上角的菜单直接触发添加到桌面的功能。
1、在谷歌浏览器中打开您想要添加到桌面的PWA网站。
2、点击浏览器右上角的三个垂直排列的圆点,打开主菜单。
3、在下拉菜单中找到并点击“安装‘应用名称’”或“添加到桌面”选项。
4、在弹出的确认窗口中点击“安装”或“添加”按钮。
5、等待图标创建完成,前往您的电脑桌面即可找到新添加的应用快捷方式。
二、通过地址栏安装提示
当访问的网站满足PWA条件时,谷歌浏览器的地址栏可能会直接显示一个安装提示图标,用户可直接通过该图标进行安装。
1、使用谷歌浏览器访问一个符合PWA标准的网站。
2、观察浏览器地址栏右侧是否出现一个加号(+)或应用图标。
3、点击该图标,会弹出“安装此应用”的提示框。
4、点击提示框中的“安装”按钮以确认操作。
5、安装完成后,可在桌面或开始菜单中找到该PWA应用的独立入口。
三、使用JavaScript控制安装流程
网站开发者可以利用BeforeInstallPromptEvent事件捕获浏览器的安装提示,并自定义页面上的安装按钮,引导用户将PWA添加到桌面。
1、确保网页已监听beforeinstallprompt事件,并将事件对象保存下来。
2、在页面上设置一个可见的安装按钮,例如“添加到桌面”。
3、为该按钮绑定点击事件,在点击时调用保存的事件对象的prompt()方法来显示安装对话框。
4、处理用户的选择结果,通过userChoice.then()获取用户是接受还是拒绝了安装请求。
5、监听appinstalled事件,以便在应用成功安装后执行后续逻辑,如隐藏安装按钮。











