Webview on Website of SauceWu

WebView实现离线缓存

Tue, 10 Mar 2020 20:00:00 +0000

WebView实现离线缓存

场景

在App在长期发展之中，对动态性要求很高的活动页面或是一些带有简单功能的详情页面都可能会有大量Webview使用的情况。但是webview初始化时极有可能遇到网络波动的影响导致加载不出或者会重复下载一些公共资源造成性能问题。这时我们希望有一种缓存方案能够暂时解决这些初始化变慢的问题

原理

android WebViewClient提供了shouldInterceptRequest的接口供我们使用这个接口会拦截webview所有请求。如果错误缓存了资源，可能会出现web页面无法更新的情况。所以用的时候要谨慎只对我们需要使用缓存的部分进行拦截

override fun shouldInterceptRequest(view: WebView?, request: WebResourceRequest?): WebResourceResponse? {
 if (view != null && request != null) {
 //判断需要使用缓存的url
 if (WebViewCacheUtils.needCache(request.url.toString())) {
 //从缓存池中获取缓存
 val cache = WebViewCacheUtils.getCache(request)
 if (cache != null) {
 return cache
 }
 }
 }
 //未找到缓存文件或者不需要缓存 还是正常走请求
 return super.shouldInterceptRequest(view, request)
}

 fun getCache(webResourceRequest: WebResourceRequest): WebResourceResponse? {
 val uri = webResourceRequest.url
 try {
 //获取加载资源类型
 var mimeType: String? = MimeTypeMapUtils.getMimeTypeFromUrl(uri.toString())
 val type: String
 val header = HashMap<String, String>()
 //我们可能对多个域名进行缓存 先设置跨域
 header["Access-Control-Allow-Origin"] = "*"
 header["Access-Control-Allow-Headers"] = "Content-Type"
 if (mimeType == null) {
 if (uri.path!!.contains("js")) {
 type = "js"
 mimeType = "application/javascript"
 header["content-type"] = "application/javascript; charset=utf-8"
 } else {
 mimeType = "text/html"
 type = "html"
 header["content-type"] = "text/html; charset=utf-8"
 }

 } else if (mimeType.contains("img") || mimeType.contains("image")) {
 type = "img"
 } else {
 //这里主要是css 格式是 text/css
 type = mimeType.split("/".toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()[1]
 }
//确定是否获取了资源类型
 if (!TextUtils.isEmpty(mimeType)) {
 val name = (if (type == "html") {
 //由于多个url可能使用的是同一个html 这里需要判断下 返回的是 该html的md5
 needCacheHtml(uri.path)
 } else {
 MD5Utils.encode(uri.path)
 })
 //从缓存池中获取缓存
 val cacheSteam=getWebCache(name, type)
 //构造响应体 并返回
 return WebResourceResponse(mimeType, "", 200, "ok", header, cacheSteam)
 }
 } catch (e: FileNotFoundException) {
 e.printStackTrace()
 }

 return null
 }

注意事项

HTML的缓存一定要小心最好是由前端同学出一份目录的接口并且做好版本管理防止误操作否则线上可能会出严重问题
存储的文件名都是用md5过的防止有特殊字符影响持久化
如果有大文件缓存最好需要有文件完整性验证

关于 Androidx 的5.x版本 webview crash

Tue, 10 Mar 2020 15:00:00 +0000

关于 Androidx 的5.x版本 webview crash

这两更新了androidx compat 在5.x一下版本手机上遇到crash问题

android.content.res.Resources$NotFoundException: String resource ID #0x2040002

确定是androidx 1.1.0版本问题 google issue

而且是只有 1.1.0 正式包才会有问题。以后还是少升级这种基础包为好

WebView页面软键盘弹出无法正确折叠页面的问题

Thu, 03 May 2018 18:30:00 +0000

WebView页面软键盘弹出无法正确折叠页面的问题

问题出在webview页面选中webview中edit控件弹出的软键盘无法正确折叠页面遮挡了输入框。一开始认为是webview的适配问题，想当然的加上了

<activity android:name=".WebViewActivity" android:windowSoftInputMode="adjustPan" >
...
</activity>

结果当然是毫！无！反！应！

在一番调试之后发现时隐藏了状态栏之后屏幕尺寸计算出现问题的缘故也是个老google issue了

网上有很多解决办法最通用的当然还是原理很简单就是每当页面有变动的时候自行去计算页面高度- -

public class AndroidBug5497Workaround {
 public static void assistActivity(Activity activity) {
 new AndroidBug5497Workaround(activity);
 }

 private View mChildOfContent;
 private int usableHeightPrevious;
 private FrameLayout.LayoutParams frameLayoutParams;
 private int contentHeight;
 private boolean isfirst = true;
 private int statusBarHeight;

 private AndroidBug5497Workaround(Activity activity) {
 if (activity == null) {
 return;
 }
 //获取状态栏的高度
 int resourceId = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
 statusBarHeight = activity.getResources().getDimensionPixelSize(resourceId);
 FrameLayout content = activity.findViewById(android.R.id.content);
 mChildOfContent = content.getChildAt(0);

 //界面出现变动都会调用这个监听事件
 mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
 if (isfirst) {
 contentHeight = mChildOfContent.getHeight();//兼容华为等机型
 isfirst = false;
 }
 possiblyResizeChildOfContent();
 });

 frameLayoutParams = (FrameLayout.LayoutParams)
 mChildOfContent.getLayoutParams();
 }

 //重新调整跟布局的高度
 private void possiblyResizeChildOfContent() {

 int usableHeightNow = computeUsableHeight();

 //当前可见高度和上一次可见高度不一致 布局变动
 if (usableHeightNow != usableHeightPrevious) {
 //int usableHeightSansKeyboard2 = mChildOfContent.getHeight();//兼容华为等机型
 int usableHeightSansKeyboard = mChildOfContent.getRootView().getHeight();
 int heightDifference = usableHeightSansKeyboard - usableHeightNow;
 if (heightDifference > (usableHeightSansKeyboard / 4)) {
 // keyboard probably just became visible
 //frameLayoutParams.height = usableHeightSansKeyboard - heightDifference;
 frameLayoutParams.height = usableHeightSansKeyboard - heightDifference + statusBarHeight;
 } else {
 frameLayoutParams.height = contentHeight;
 }

 mChildOfContent.requestLayout();
 usableHeightPrevious = usableHeightNow;
 }
 }

 /**
 * 计算mChildOfContent可见高度
 ** @return 高度
 */
 private int computeUsableHeight() {
 Rect r = new Rect();
 mChildOfContent.getWindowVisibleDisplayFrame(r);
 return (r.bottom - r.top);
 }
}

Webview on Website of SauceWu

WebView实现离线缓存

WebView实现离线缓存

场景

原理

注意事项

关于 Androidx 的5.x版本 webview crash

关于 Androidx 的5.x版本 webview crash

WebView页面 软键盘弹出无法正确折叠页面的问题

WebView页面 软键盘弹出无法正确折叠页面的问题

WebView页面软键盘弹出无法正确折叠页面的问题

WebView页面软键盘弹出无法正确折叠页面的问题