iOS WKWebView cookie 写入慢以及易丢失
现象：
原因：WKWebView 对 NSHTTPCookieStorage 写入 cookie，不是实时存储的。从实际的测试中发现，不同的 IOS 版本，延迟的时间还不一样。同样，发起请求时，也不是实时读取，无法做到和 native 同步，导致页面逻辑出错。
两种解决办法：
各位可以选择适合自己项目的方式，有更好的处理方式欢迎留言。
客户端手动干预一下 cookie 的存储。将服务响应的 cookie，持久化到本地，在下次 webview 启动时，读取本地的 cookie 值，手动再去通过 native 往 webview 写入。但是偶尔还有 spa 的页面路由切换的时候丢失 cookie 的问题。
将 cookie 存储的 session 持久化到 localSorage，每次请求时都会取 localSorage 存储的 session，并在请求头部添加 cookieback 字段，服务端鉴权时，优先校验 cookieback 字段。这样即使 cookie 丢失或存储的上一次的 session，都不会有影响。不过这种方式相当于绕开了 cookie 传输机制，无法享受 这种机制带来的安全特性。
iOS 登陆后立即进入网页，会出现 cookie 获取不到或获取的上一次登陆缓存的 cookie
重启 App 后，cookie 会丢失
input 标签在部分安卓 webview 上无法实现上传图片功能
因为 Android 的版本碎片问题，很多版本的 WebView 都对唤起函数有不同的支持。我们需要重写 WebChromeClient 下的 openFileChooser()（5.0 及以上系统回调 onShowFileChooser()）。我们通过 Intent 在 openFileChooser()中唤起系统相机和支持 Intent 的相关 app。
input 标签在 iOS 上唤起软键盘，键盘收回后页面不回落（部分情况页面看上去已经回落，实际结构并未回落）
input 焦点失焦后，ios 软键盘收起，但没有触发 window resize，导致实际页面 dom 仍然被键盘顶上去--错位。解决办法：全局监听 input 失焦事件，当触发事件后，将 body 的 scrollTop 设置为 0。
document.addEventListener('focusout',()=>{
document.body.scrollTop =0;
});
唤起软键盘后会遮挡输入框
当 input 或 textarea 获取焦点后，软键盘会遮挡输入框。解决办法：全局监听 window 的 resize 事件，当触发事件后，获取当前 active 的元素并检验是否为 input 或 textarea 元素，如果是则调用元素的 scrollIntoViewIfNeeded 即可。
window.addEventListener('resize',()=>{
// 判断当前 active 的元素是否为 input 或 textarea
if(
document.activeElement!.tagName ==='INPUT'||
document.activeElement!.tagName ==='TEXTAREA'
) {
setTimeout(()=>{
// 原生方法，滚动至需要显示的位置
document.activeElement!.scrollIntoView();
},0);
}
});
唤起键盘后position: fixed;bottom: 0px;元素被键盘顶起
解决办法：全局监听 window 的 resize 事件，当触发事件后，获取 id 名为 fixed-bottom 的元素（可提前约定好如何区分定位在窗口底部的元素），将其设置成display: none。键盘收回时，则设置成display: block;。
constclientHeight =document.documentElement.clientHeight;
window.addEventListener('resize',()=>{
constbodyHeight =document.documentElement.clientHeight;
constele =document.getElementById('fixed-bottom');
if(!ele)return;
if(clientHeight > bodyHeight) {
(eleasHTMLElement).style.display ='none';
}else{
(eleasHTMLElement).style.display ='block';
}
});
点击网页输入框会导致网页放大通过 viewport 设置 user-scalable=no 即可，（注意：当 user-scalable=no 时，无需设置 minimum-scale=1, maximum-scale=1，因为已经禁止了用户缩放页面了，允许的缩放范围也就不存在了）。代码如下：
name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=0,viewport-fit=cover"
/>
webview 通过 loadUrl 加载的页面运行时却通过第三方浏览器打开，代码如下
// 创建一个 Webview
Webview webview = (Webview) findViewById(R.id.webView);
// 调用 Webview loadUrl
webview.loadUrl("http://www.baidu.com/");
解决办法：在调用 loadUrl 之前，设置下 WebviewClient 类，当然如果需要也可自己实现 WebviewClient（例如通过拦截 prompt 实现 js 与 native 的通信）
webview.setWebViewClient(newWebViewClient());
网友评论