报错信息:
"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.", source: file:///storage/emulated/0/Android/data/com.baidu.yy/cache/h5/cded73abd4131c0a544d508aa155b9c0/funterApp/assets/index-599bc40d.js (0)"
原因:Android系统WebView的Chrome浏览器版本太低,导致不支持es6开发的H5页面; es6开发的页面返回的MIMEType是空,导致页面内容不显示;
查看手机的:Android系统WebView的Chrome浏览器版本号信息,下面的代码亲测好用:
WebView mWebView = new WebView(mContext);
String userAgent = mWebView.getSettings().getUserAgentString();
Logger.d("WebViewVersion-Chromium版本----", userAgent);
日志打印:Mozilla/5.0 (Linux; Android 12; M2102J2SC Build/SKQ1.211006.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/96.0.4664.104 Mobile Safari/537.36
测试:Chrome/96.0 和 Chrome/92.0 都是白页,用了一个手机是:Chrome/116.0的可以正常显示。
解决方法:android拦截请求路径,给h5的文件设置mimeType
@Nullable
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
Uri uri = request.getUrl();
String path = uri.getPath();
// 自定义处理路径
if (path != null && path.startsWith("/storage/emulated/0/Android/data/com.baidu.yy/cache/h5/")) {
try {
// 处理文件请求
FileInputStream fileInputStream = new FileInputStream(path);
String mimeType = getH5MimeType(path);
return new WebResourceResponse(mimeType, "UTF-8", fileInputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
return super.shouldInterceptRequest(view, request);
}
private String getH5MimeType(String path) {
if (path.endsWith(".js")) return "application/javascript";
if (path.endsWith(".html")) return "text/html";
if (path.endsWith(".css")) return "text/css";
return "application/octet-stream";
}