Ionic APP在android上因WebView版本问题无法正常显示的解决办法

导致Ionic编译的APP在Android上一片空白的原因

最近用Ionic开发了一个APP，打算在基于Android的广告机上运行。
然而，编译安装以后，运行就只有一片空白。
开始以为是Android版本问题，因为在模拟器上Android 7以下就是这种情况，而当时拿到的广告机Android版本是5.1。
经测试Android 7.1的模拟器运行程序时正常的，于是后来换了一台Android 7.1.2的设备。
但到了真机上，APP仍然显示一片空白，只有换过的背景图。

问题的定位

浏览器测试

因为Ionic原理上就是一个webview打开网站运行。于是用广告机内置的浏览器对Ionic的网站进行测试。
使用

ionic capacitor run android -l --external

从浏览器地址栏直接输入地址：http://<网站IP>:8100
发现内置浏览器也无法正常显示。
后来又下载安装了火狐和Chrome浏览器，发现这两个浏览器是可以正常运行的。

远程连接调试

在真机上安装了调试版 apk-debug.apk，执行起来。
然后用edge浏览器打开 edge://inspect/#devices，发现找不到设备

于是尝试用adb命令连接，连接USB线后，使用：

adb devices -l

发现只列出了模拟器设备，于是要到了网络adb补丁，开启设备的网络adb服务。
开启服务后，使用

D:\Temp>adb connect 192.168.0.108:5555
* daemon not running; starting now at tcp:5037
* daemon started successfully
connected to 192.168.0.108:5555

连接上设备，然后就可以找到设备rk3288了。

点击 inspect 连接，浏览器会打开一个新的浏览器，显示web界面的状态。
这个时候发现，web调试工具的“元素”窗口中，<app-root></app-root>是空的。由此可以断定angular的javascript未正确执行。
由此判断可能是webview版本过低造成的

升级webview版本

获得修改webview的权限

在网上下载了一个Android System WebView的apk安装，但并没有修复问题。
后来又找了一篇关于如何不通过root系统升级webview版本的文章：
https://cloud.tencent.com/developer/article/1388497

按照文章的说法，进入shell，然后执行remount，试图用新的webview.apk取代旧的，但remount并不成功，system目录仍然为只读。

D:\Temp>adb connect 192.168.0.108
connected to 192.168.0.108:5555

D:\Temp>adb shell
rk3288:/ $ su
rk3288:/ $ mount -o rw,remount /system
mount: '/dev/block/platform/ff0f0000.dwmmc/by-name/system' not user mountable in fstab
1|rk3288:/ $

后来找到一篇文章，https://blog.csdn.net/u010684585/article/details/78270171
使用：

D:\Temp>adb root
restarting adbd as root

D:\Temp>adb disable-verity

D:\Temp>adb reboot

待设备重启后就可以使用以下命令remount，这样 /system 目录就可以写了。

D:\Temp>adb root
restarting adbd as root

D:\Temp>adb remount
remount succeeded

使用正确的webview版本

/system目录可写后，就可以通过以下命令，将/system/app/webview下的webview.apk替换掉

adb push ./webview.apk /system/app/webview/webview.apk

由于所使用的设备上的/system/app/webview目录下并没有lib目录，所以也不必解压apk。
然而第一次替换掉以后，仍然运行不起来，而且内置的浏览器也运行不了了(一启动就退出)。
后来发现，旧的webview的包名称是com.android.webview，而新的包名称为com.google.android.webview。
查看webview包名称和版本可以使用命令：

D:\Temp>D:\Android\android-sdk\build-tools\30.0.3\aapt dump badging ./webview.apk
package: name='com.android.webview' versionCode='438910500' versionName='89.0.4389.105' compileSdkVersion='30' compileSdkVersionCodename='11'
sdkVersion:'21'
targetSdkVersion:'30'
uses-permission: name='android.permission.INTERNET'
uses-permission: name='android.permission.ACCESS_NETWORK_STATE'
uses-permission: name='android.permission.FOREGROUND_SERVICE'
application-label:'Android System WebView'

注意：aapt命令在build-tools目录下，直接命令行执行会找不到该命令

于是到 https://www.apkmirror.com 查找 com.android.webview。

由于已经找不到google发布的版本，所以只能找一个第三方的版本，下载后查看包名称，确为com.android.webview。
替换后，程序即可正常显示了。