WebVivw嵌入开发总结,白屏、兼容

488 阅读1分钟

白屏问题涉及三个端,H5、安卓、IOS、所以出现白屏问题不能直接定位是H5的问题。

  1. 之前开发内嵌H5的时候就出现了一个问题,在三星手机上面打开app内嵌的H5页面,在切换app到后台然后在打开app就会出现白屏。像这种情况就是因为三星手机的WebView的问题需要和APP对接。
  2. 如果是H5的问题,可以通过一些远程上报错误的的tool管理和修复。如Sentry Or 神策 之内的。
  3. 然后就是通过APP帮你打一个debugger包,在本地进行调试。app内的H5也是可以在浏览器上面抓到的。

安卓和IOS开发中遇到的兼容性问题

  1. location.replace 安卓会有兼容性问题。不往浏览器添加路由栈。
    if(history.replaceState){ 
        history.replaceState(null, document.title, url); history.go(0);
    } else { 
        location.replace(url); 
        } 
    }

2、cookie 问题

在IOS中存储cookie或者更新或者覆盖、会有问题这个地方。可以让APP往window上面挂载一个方法,然后通过方法的方式获取。

  const { BossJobApp } = window
  // Not IOS
  if (!isIOS) {
    return getCookie(refreshToken)
  }

  //IOS
  try {
    if (BossJobApp && BossJobApp?.getRefreshToken) {
      const refreshToken = BossJobApp?.getRefreshToken()
      if (refreshToken && refreshToken?.length) {
        setCookie('refreshToken', refreshToken, false)
        return refreshToken
      } else {
        return getCookie(refreshToken)
      }
    } else {
      return getCookie(refreshToken)
    }
  } catch (error) {
    return getCookie(refreshToken)
  }
}

3、IOS关闭掉WebView之后还是会继续执行js代码,也就是说WebView关闭更像是一种隐藏。所以如果你有轮询之类的,需要在用户关闭web view的时候让IOS通知你一下。