Ionic 4 Capacitor Modal Alerts


#1

I’m trying to use Capacitor and Ionic 4 to display alerts that will be native when the APIs are available but use Ionic’s alert service when they are not available. I also noticed that web browser alerts supported by Capacitor are not so good looking so I’d like to use Ionic 4’s alert service when the system isn’t running on something with sleek native APIs.

Here’s my code:

import { ComponentsService } from '../components.service';
...
constructor(private componentsService: ComponentsService) {}
...
this.componentsService.alert({
        title: 'Failed to Subscribe',
        message: message
      });
...
import { Injectable } from '@angular/core';
import { Plugins, WebPlugin } from '@capacitor/core';
import { AlertController } from '@ionic/angular';
const { Modals } = Plugins;

interface AlertData {
  title: string;
  message: string;
}

export class AlertPluginWeb extends WebPlugin {
  constructor(private alertController: AlertController) {
    super({
      name: 'Modals',
      platforms: ['web']
    });
  }

  async alert(data: AlertData) {
    const alert = await this.alertController.create({
      header: data.title,
      message: data.message,
      buttons: ['OK']
    });
    await alert.present();
  }
}

@Injectable({
  providedIn: 'root'
})
export class ComponentsService {

  constructor() { }

  alert(data: AlertData) {
    Modals.alert({
      title: data.title,
      message: data.message
    });
  }
}

How can I make it so that this alert is only used on Android/iOS and then use Ionic 4’s service for all the other alerts?