基于React JS的PWA打包APK在华硕Tinker Board运行异常求解

1. 优先确认Tinker Board的WebView环境差异 #

• 华硕Tinker Board的官方默认固件多为Android 6.0/7.0版本，内置的Chromium WebView内核版本远低于普通消费级手机的自动更新版本，且部分定制固件会修改WebView的默认权限规则。你可以在WebView加载的页面中打印navigator.userAgent确认内核版本，也可以开启WebView远程调试功能，通过电脑Chrome的开发者工具直接连接设备查看运行状态。
• 手动确认APP的存储权限已开启：部分Tinker Board固件会默认禁用第三方应用的存储权限，即使你在AndroidManifest.xml中申明了权限，也需要到系统设置的应用权限管理页确认「存储权限」处于允许状态。

2. CSS样式失效排查 #

• 核对失效CSS属性的最低内核支持版本，grid布局、CSS原生变量、aspect-ratio等新特性在Android 7.0对应的WebView 59及更低版本中无法兼容，需要补充前缀或者降级为兼容写法。
• 检查React项目的构建配置：babel的preset-env需要将Android 6/7加入兼容目标，PostCSS的autoprefixer要配置对应低版本内核的前缀生成规则，避免未编译的新CSS语法直接进入生产包。

3. localStorage/Cookie调用黑屏排查 #

• 首先检查WebView初始化配置是否开启了必要的存储开关，必须添加以下配置项：

WebSettings webSettings = webView.getSettings();
// 开启JS支持
webSettings.setJavaScriptEnabled(true);
// 开启DOM存储支持，否则localStorage无法使用
webSettings.setDomStorageEnabled(true);
webSettings.setDatabaseEnabled(true);

// Cookie相关配置
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
// 如果有跨域请求需要开启第三方Cookie支持
cookieManager.setAcceptThirdPartyCookies(webView, true);

• 排查业务代码的异常捕获逻辑：旧WebView内核下存储API调用失败、Cookie读取为空时，如果没有对应的异常捕获逻辑会直接触发JS运行报错，进而导致页面黑屏。建议在localStorage读写、Cookie读取、网络请求逻辑外层统一加try-catch兜底，同时给WebView设置WebChromeClient和WebViewClient的错误回调，打印运行日志定位具体报错点。
• 部分Tinker Board固件存在WebView默认存储目录权限不足的问题，你可以在APP启动时手动清除WebView缓存目录，或者自定义WebView的存储路径，避免权限不足导致存储API调用崩溃。
• 如果你使用HTTP协议而非HTTPS，部分旧版WebView会默认禁止非HTTPS请求的Cookie写入和存储API调用，可以临时添加webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW)配置测试，正式环境建议切换为HTTPS协议。

内容的提问来源于stack exchange，提问作者Damien