H5资源拦截做离线资源加载

H5通过资源拦截的方式来做离线，其中html和资源（js，css）都可以被拦截。

一个简单的实现是

    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        File file = new File(context.getExternalFilesDir(null), "offline_files");
        if (match(url)) {
            return WebResourceResponse("text/javascript", "UTF-8", FileInputStream(file));
        }
        return null
    }

需要注意的几个个点：

• WebResourceResponse的第一个参数是类型，一般是text/html,text/css等等，可以通过这个方法获取到：MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension)参数是文件后缀

问题

这时候你会发现，我的js明明加载了，怎么没有运行，好像没有加载一样，打log也不生效。

• 一定一定记得给WebResourceResponse添加header：Access-Control-Allow-Origin:*，不然的话如果离线的js依赖服务端js那么就会加载不下来，并且报错。

示例代码：

    private fun addHeaders(response: WebResourceResponse) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            var headers: MutableMap<String, String>? = response.responseHeaders
            if (headers == null) {
                headers = mutableMapOf()
                response.responseHeaders = headers
            }
            headers.put("Access-Control-Allow-Origin", "*")
        }
    }

关于Access-Control-Allow-Origin

Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。 详细讲解：developer.mozilla.org/zh-CN/docs/…