三星浏览器调用window.history.replaceState时beforeinstallprompt事件不触发问题

问题根因 #

三星互联网v15.0.4.9及同类旧版本存在PWA安装校验的实现缺陷：页面初始加载阶段如果调用history.replaceState或history.pushState修改历史记录，会直接中断安装资格校验流程，导致beforeinstallprompt事件无法触发。
你遇到的点击mailto链接后事件正常触发的现象也符合这个逻辑：唤起外部程序时页面会短暂切出前台，切回后浏览器会重新触发PWA安装校验，此时初始阶段的replaceState已经执行完毕，不会打断新的校验流程，所以事件可以正常触发。

解决方案 #

• 调整replaceState执行时机
  将window.history.replaceState的调用延迟到beforeinstallprompt事件触发之后执行，若超时未触发再兜底执行避免阻塞业务逻辑，参考代码：

let deferredPrompt;
let needReplaceState = true;

window.addEventListener('beforeinstallprompt', function(e) {
  e.preventDefault();
  deferredPrompt = e;
  console.log("beforeinstallprompt!");
  
  // 事件触发后执行replaceState
  if (needReplaceState) {
    window.history.replaceState( {}, "", "" );
    needReplaceState = false;
  }
});

// 3秒超时兜底，避免未触发事件时业务逻辑被阻塞
setTimeout(() => {
  if (needReplaceState) {
    window.history.replaceState( {}, "", "" );
    needReplaceState = false;
  }
}, 3000);

• 按浏览器UA做兼容
  如果业务逻辑对replaceState执行时机要求很高，可以针对三星互联网做单独适配，仅在非三星浏览器中初始化时执行replaceState，三星环境走上述延迟执行逻辑：

const isSamsungInternet = /SamsungBrowser/i.test(navigator.userAgent);
if (!isSamsungInternet) {
  window.history.replaceState( {}, "", "" );
}

• 手动引导降级方案
  如果必须保留初始化阶段的replaceState调用，可以针对三星互联网用户增加手动安装引导提示，引导用户通过浏览器自带的「添加到主屏幕」菜单选项完成安装，不需要依赖beforeinstallprompt事件触发的自动安装流程。

内容的提问来源于stack exchange，提问作者Junior