Ionic5打包APK在Chrome93运行时剪贴板写入权限被拒绝如何解决

1. 配置APK原生权限 #

找到Ionic项目安卓平台路径下的android/app/src/main/AndroidManifest.xml，添加以下权限声明：

<!-- 基础WebView运行权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 剪贴板访问权限 -->
<uses-permission android:name="android.permission.READ_CLIPBOARD_IN_BACKGROUND" />
<uses-permission android:name="android.permission.WRITE_CLIPBOARD" />

如果使用Cordova打包，还需要在主Activity的onCreate方法中添加WebView配置：

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowContentAccess(true);

如果使用Capacitor打包，在capacitor.config.ts中添加安卓配置：

export default defineConfig({
  android: {
    allowMixedContent: true,
    webContentsDebuggingEnabled: true
  }
})

2. 调整前端调用逻辑 #

Chrome 93版本的移动端WebView默认不支持navigator.permissions接口，不要做预权限校验，直接调用剪贴板API同时添加兜底兼容逻辑：

// 复制触发逻辑必须放在用户主动交互的回调内，比如按钮click事件
handleCopy() {
  const copyText = this.url;
  if (navigator.clipboard) {
    navigator.clipboard.writeText(copyText).then(() => {
      // 复制成功逻辑
    }).catch(() => {
      // 报错时触发兜底方案
      this.fallbackCopy(copyText);
    })
  } else {
    this.fallbackCopy(copyText);
  }
}

// 兼容旧版WebView的复制方案
fallbackCopy(text: string) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  // 隐藏输入框避免影响页面
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  textarea.style.left = '-9999px';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
    // 复制成功逻辑
  } catch (e) {
    // 复制失败逻辑
  }
  document.body.removeChild(textarea);
}

3. 手动确认权限 #

APK安装后首次触发复制操作时，系统会弹出剪贴板权限申请弹窗，手动选择允许即可。如果没有弹出弹窗，可以到系统设置→应用管理→找到你的应用→权限管理，手动开启剪贴板权限。

注意：剪贴板API只能在用户主动触发的交互事件（点击、触摸等）回调中调用，不能在异步请求回调、页面自动执行逻辑中调用，否则Chrome会直接拦截请求报权限错误。

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