渐进式web应用（pwa）安装成功与打开页面的事件统计

最新推荐文章于 2024-08-05 17:19:49 发布

qq_38469220

最新推荐文章于 2024-08-05 17:19:49 发布

阅读量966

点赞数

分类专栏：渐进式开发pwa 文章标签：前端 javascript chrome 开发语言 html5

本文链接：https://blog.csdn.net/qq_38469220/article/details/128985761

版权

本文探讨如何统计渐进式Web应用（PWA）的安装情况和通过桌面图标打开的事件。介绍了如何让用户主动触发PWA安装，并利用beforeinstallprompt事件和prompt方法。同时，文章还讲解了通过manifest.json的start_url参数来区分用户是从主屏幕启动还是网页启动PWA的方式。

摘要由CSDN通过智能技术生成

前言：上一篇文章分享了pwa如何添加到主屏幕，本文分享下如何进行通过pwa桌面图标打开网页、以及通过点击事件是否安装的事件统计。

上一篇文章由此访问渐进式 Web 应用(PWA) 添加到主屏幕_qq_38469220的博客-CSDN博客

1、pwa 安装除了被动触发，也可以通过点击事件，由用户主动触发，对于用户更加友好；

使用preventDefault先禁掉再通过prompt方法主动触发。
event事件的prompt方法只能放到监听用户动作里。
beforeinstallprompt事件，在用户拒绝安装后必须设置为空。等待下次触发。

2、具体实现方式

首先在html文件添加一个点击按钮：

<button hidden id="installBtn">安装应用</button>

然后新建一个js文件进行逻辑处理

window.addEventListener('load', function () {

    let appPromptEvent = null;

    // 判断是通过网页启动还是通过主屏幕图标启动
    if(this.window.location.href.match('pwa=client')){
        console.log('通过图标打开')
    }else{
        console.log('网页端打开')
    }

    c