Android WebView加载React PWA报Uncaught SyntaxError错误求助

在Android 5.1.1（LMY47V）的WebView中加载通过create-react-app创建并部署到GitHub Pages的PWA时，出现Uncaught SyntaxError: Unexpected token )错误，该PWA在本地localhost:3000和设备浏览器中可正常运行，仅WebView内无法显示。

问题根源 #

Android 5.1对应的系统WebView内核基于旧版Chromium，不支持ES6及以上的现代JavaScript语法（如箭头函数、简洁写法等）。而create-react-app默认的生产构建配置未针对如此低版本的Android设备做兼容处理，导致打包后的JS代码包含WebView无法解析的语法，触发错误。

解决方案 #

1. 修改PWA项目的浏览器兼容配置

在create-react-app项目中，添加对Android 5.1的兼容规则，让打包工具将代码转译为旧版浏览器支持的ES5语法：

• 方法一：在项目根目录创建.browserslistrc文件，写入以下内容：

> 0.2%
not dead
android 5.1

• 方法二：直接修改package.json中的browserslist字段：

"browserslist": [
  "> 0.2%",
  "not dead",
  "android 5.1"
]

2. 重新构建并部署PWA

执行生产构建命令，然后重新将构建产物推送到GitHub Pages：

npm run build
# 重新执行部署到gh-pages的命令，比如 gh-pages -d build

3. 优化WebView的PWA适配配置（可选）

为了让PWA在WebView中更好地运行，建议补充以下配置：

@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_web_view);

    webView = findViewById(R.id.webView);
    webView.setWebViewClient(new WebViewClient());
    WebSettings webSettings = webView.getSettings();
    
    webSettings.setJavaScriptEnabled(true);
    webSettings.setAllowFileAccess(true);
    // 开启DOM存储，PWA离线缓存需要
    webSettings.setDomStorageEnabled(true);
    // 开启应用缓存
    webSettings.setAppCacheEnabled(true);
    webSettings.setAppCachePath(getCacheDir().getPath());
    // 允许内容访问
    webSettings.setAllowContentAccess(true);
    // 支持JS打开新窗口（如果PWA有相关需求）
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

    webView.loadUrl("https://may293.github.io/PWATest/");
}

额外说明 #

如果后续需要实现PWA与安卓本地.jar库的交互，可使用WebView.addJavascriptInterface()方法，但需注意安全风险：仅暴露必要的方法，避免注入攻击，同时确保交互方法加上@JavascriptInterface注解。

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