如何在Ionic 4应用中提示或强制更新Android System WebView与Google Play Services？

当然完全可行！针对你遇到的因Google Play Services和Android System WebView版本过低导致的Google Maps加载异常、自定义CSS样式错乱问题，我们可以通过一套完整的流程来实现版本检测、用户友好提示甚至强制更新的功能，下面是具体的实现思路和代码示例：

1. 检测Google Play Services版本 #

我们可以借助Cordova插件来快速检测Google Play Services的状态，无需自己写复杂的原生代码：

首先安装对应的Ionic Native插件和Cordova插件：

ionic cordova plugin add cordova-plugin-play-services-checker
npm install @ionic-native/play-services-checker/ngx

然后在你的Angular组件（比如AppComponent）中实现检测逻辑：

import { PlayServicesChecker } from '@ionic-native/play-services-checker/ngx';
import { AlertController } from '@ionic/angular';

constructor(
  private playServicesChecker: PlayServicesChecker,
  private alertController: AlertController
) {}

// 在应用启动时调用这个方法
checkPlayServicesStatus() {
  this.playServicesChecker.checkAvailability()
    .then((status) => {
      // 状态返回值包括：SUCCESS、UPDATE_REQUIRED、SERVICE_MISSING等
      if (status === 'UPDATE_REQUIRED') {
        this.showUpdatePrompt('Google Play Services');
      }
    })
    .catch((error) => {
      console.error('Google Play Services检测失败:', error);
    });
}

2. 检测Android System WebView版本 #

Android System WebView的版本检测需要获取系统包信息，我们可以通过自定义Cordova插件或者借助权限插件配合原生调用实现。这里提供一种简便思路：

先安装权限插件：

ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions/ngx

然后实现检测方法：

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { Platform } from '@ionic/angular';

constructor(
  private androidPermissions: AndroidPermissions,
  private platform: Platform
) {}

async checkWebViewVersion() {
  if (!this.platform.is('android')) return;

  // 先获取获取包信息的权限
  const permissionStatus = await this.androidPermissions.checkPermission(
    this.androidPermissions.PERMISSION.GET_PACKAGE_SIZE
  );
  if (!permissionStatus.hasPermission) {
    await this.androidPermissions.requestPermission(
      this.androidPermissions.PERMISSION.GET_PACKAGE_SIZE
    );
  }

  // 通过Cordova的exec方法调用原生代码获取WebView版本
  return new Promise((resolve, reject) => {
    (window as any).cordova.exec(
      (version: string) => resolve(version),
      (error: any) => reject(error),
      'WebViewVersionChecker',
      'getVersion',
      ['com.google.android.webview']
    );
  });
}

如果觉得写自定义插件麻烦，也可以直接使用第三方插件（比如cordova-plugin-webview-checker）来简化这个流程。

3. 显示更新提示与强制更新逻辑 #

用Ionic的AlertController来打造友好的提示弹窗，引导用户前往Google Play商店更新，同时可以实现强制更新的逻辑：

async showUpdatePrompt(serviceName: string) {
  const alert = await this.alertController.create({
    header: '应用依赖更新提示',
    message: `您的${serviceName}版本过低，可能导致应用显示异常，请前往Google Play商店更新后再使用。`,
    buttons: [
      {
        text: '稍后更新',
        role: 'cancel',
        handler: () => {
          // 如果是强制更新，这里可以限制应用功能或循环提示
          if (this.isForceUpdateEnabled()) {
            setTimeout(() => this.showUpdatePrompt(serviceName), 3000);
          }
        }
      },
      {
        text: '立即更新',
        handler: () => {
          // 打开对应服务的Google Play页面
          const packageId = serviceName === 'Google Play Services' 
            ? 'com.google.android.gms' 
            : 'com.google.android.webview';
          (window as any).cordova.InAppBrowser.open(`market://details?id=${packageId}`, '_system');
        }
      }
    ],
    backdropDismiss: false // 禁止点击背景关闭弹窗，适合强制更新场景
  });

  await alert.present();
}

// 可以根据自己的需求判断是否开启强制更新
isForceUpdateEnabled(): boolean {
  // 比如可以从远程配置获取开关状态，或者针对严重版本问题开启
  return true;
}

注意：要确保你已经安装了cordova-plugin-inappbrowser来打开Google Play商店链接：

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser/ngx

4. 额外注意事项 #

• 部分Android设备会将WebView集成在Chrome浏览器中，所以检测时可以同时检查Chrome的版本，避免遗漏。
• 测试时建议使用低版本的Google Play Services和WebView来验证检测逻辑是否准确。
• 强制更新要谨慎使用，尽量只在影响核心功能的严重版本问题时启用，避免影响用户体验。

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