Atitit pwa app prblm sulo目录1.1.1. 安卓的chrome没有弹添加到桌面的弹窗 11.1.2. 如何判断是否从主屏幕访问 11.1.3. 如何监听添加到桌面事

本文主要讨论了安卓Chrome浏览器在PWA应用中未弹出添加到桌面提示的问题,提供了判断是否从主屏幕访问、监听添加到桌面事件、处理添加失败以及捕获安装成功动作的方法,并给出了全局本页面打开a标签的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Atitit pwa app prblm sulo

目录

1.1.1. 安卓的chrome没有弹添加到桌面的弹窗 1

1.1.2. 如何判断是否从主屏幕访问 1

1.1.3. 如何监听添加到桌面事件 2

1.1.4. 添加到主屏幕失败 3

1.1.5. 如何捕捉安装成功动作 3

2. 3

2.1. 全局本页面打开  a标签  self 3

      1. 安卓的chrome没有弹添加到桌面的弹窗

检查你的manifest.json, sw.js文件是否在项目根目录下。以及sw是否注册成功。

      1. 如何判断是否从主屏幕访问

因为埋点等需求,我们需要区分用户是从浏览器访问的还是从主屏幕访问的,可以这样判断:

export const isFromDesktop = () => {

  // window.navigator.standalone used for safari

  if (window.navigator.standalone) {

    return true;

  }

  if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) {

    return true;

  }

  return false;

};

      1. 如何监听添加到桌面事件

let deferredPrompt

window.addEventListener('beforeinstallprompt', event => {

  console.log('install event trigger', event);

  // 禁止浏览器自动显示添加到桌面提示框

  e.preventDefault();

  // 存储事件对象,方便后面自定义弹窗时机

  deferredPrompt = e;

  // 然后可以显示一个自定义的提示框给用户,告诉用户

  // 可以将应用添加到桌面,同时可以告知如何操作

})

// 再监听自定义提示框的按钮点击事件

buttonInstall.addEventListener('click', (e) => {

  // 隐藏我们自定义的弹窗

  hideMyInstallPromotion();

  // 显示添加到桌面提示框(浏览器提供的)

  deferredPrompt.prompt();

  // 这里可以获取到用户的选择,同时做一些埋点相关操作

  deferredPrompt.userChoice.then((choiceResult) => {

    if (choiceResult.outcome === 'accepted') {

      console.log('用户接受');

    } else {

      console.log('用户拒绝');

    }

  })

});

      1. 添加到主屏幕失败

安卓浏览器添加到主屏幕权限可能没打开,如果没打开,也不会有添加到主屏幕那个提示框的,需要开启权限再次尝试(所以一个自定义的提示框还是很重要的,可以告知用户如何处理失败的情况,经过测试,因为权限导致的失败并没有什么提示给到用户)

      1. 如何捕捉安装成功动作

window.addEventListener('appinstalled', (evt) => {

  console.log('app installed', evt);

})

    1. 全局本页面打开  a标签  self

<base target="_self" />

<script defer>
    function portionA(){
        //getElementById("portionA").
        var aN = document.getElementsByTagName("a");
        for(var i =0; i < aN.length; i++){
            aN[i].target ="_self";/*遍历局部a标签并设置target属性值*/
        }
    }
    portionA();//调用函数
    window.setInterval(portionA,100);

</script>

  1. Ref

Atiti pwa app的初步安装体系

Atitit atit it pwa Service Worke重要api

Atitit pwa prblm重大问题与解决总结v2

Atitit pwa 技术总结 v2

Atitit pwa调试渐进式 Web 应用程 v2

Atitt pwa net first cache 策略core code

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值