Android Kotlin WebView无法渲染amp-story-timeline元素问题求助

问题根因 #

Android端WebView渲染amp-story时timeline元素空白，主要由3个配置缺失导致：

• Android WebView默认用户代理未携带移动环境标识，AMP框架会将其识别为非兼容环境，主动不渲染timeline组件
• 未开启硬件加速，amp-story的动效类组件依赖GPU渲染，软渲染环境下会出现元素加载失败留白
• Referer请求头格式不符合AMP跨域校验规则，导致timeline相关的静态资源加载被拦截

修复步骤 #

1. 开启硬件加速 #

首先在承载WebView的Activity的AndroidManifest.xml配置中添加硬件加速属性：

<activity 
    android:name=".YourWebActivity"
    android:hardwareAccelerated="true" />

2. 修正WebView配置 #

调整WebView的UA、硬件加速、请求头配置，修正后的完整代码如下：

WebView(it).apply {
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )
    // WebView层级开启硬件加速
    setLayerType(View.LAYER_TYPE_HARDWARE, null)

    webViewClient = WebViewClient()
    webChromeClient = WebChromeClient()
    settings.cacheMode = WebSettings.LOAD_DEFAULT
    setCookiesEnabled(true)
    CookieManager.getInstance().acceptThirdPartyCookies(this)
    settings.domStorageEnabled = true
    settings.databaseEnabled = true
    settings.useWideViewPort = true
    settings.loadWithOverviewMode = true
    settings.mediaPlaybackRequiresUserGesture = false
    settings.javaScriptEnabled = true
    // 给UA追加Mobile标识，让AMP框架识别为移动兼容环境
    settings.userAgentString = "${settings.userAgentString} Mobile"

    val extraHeaders: MutableMap<String, String> = HashMap()
    // 修正Referer格式为符合URL规范的取值，避免AMP跨域校验拦截资源
    extraHeaders["Referer"] = "https://${context.packageName}.internal"
    loadUrl(urlToRender, extraHeaders)
}

3. 异常排查 #

如果修改配置后仍未正常显示，可以通过Chrome的chrome://inspect工具连接WebView，查看控制台报错：

• 若提示跨域资源加载失败，可额外开启settings.allowFileAccess = true、settings.allowUniversalAccessFromFileURLs = true
• 若提示AMP框架初始化错误，检查WebView内核版本是否匹配当前加载的AMP资源版本要求

内容的提问来源于stack exchange，提问作者E.Egorov