ionic5+Angular8 状态栏通知+震动+自定义音频

ionic3 即时通讯（待机/后台运行可用）
github官方文档
ionic官方文档
blog实例

ionic3本地通知加震动和原生音频
简书Ionic3 消息推送

使用的是ionic5 + Angular8（package.json如下图）

image.png

1、安装本地通知插件 local-notification

① 安装

ionic cordova plugin add cordova-plugin-local-notification
npm install --save @ionic-native/local-notifications

② app.module.ts

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
providers: [
    LocalNotifications,
]

③我的例子：

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

export class MinePage implements OnInit {

  constructor(
    private localNotifications: LocalNotifications,
  ) { }

  notice() { // html点击触发的函数
    this.localNotifications.schedule({
      id: 1,
      title: '通知标题mine',
      text: '这是显示通知栏的内容',
      trigger: { at: new Date() },
      lockscreen: true
    });
  }
}

④总结遇到的问题
使用某个博主的案例尝试时，没注意到triggers属性：特定条件触发
该案例属于延迟提醒，在当前时间的9s后才会显示该消息，没耐心的等了2、3s，消息栏没显示，还以为用错了，折腾了好久

this.localNotifications.schedule({
   id: 1,
   title: '通知标题',
   text: '这是显示通知栏的内容',
   trigger: {at: new Date(new Date().getTime() + 9000)},
});

2、安装震动插件 vibration

① 安装

ionic cordova plugin add cordova-plugin-vibration
npm install --save @ionic-native/vibration

② app.module.ts

import { Vibration } from '@ionic-native/vibration/ngx';
providers: [
    Vibration,
]

③我的例子：

import { Vibration } from '@ionic-native/vibration/ngx';

export class MinePage implements OnInit {

  constructor(
    private vibration: Vibration,
  ) { }

  notice() { // html点击触发的函数
    this.vibration.vibrate(1000);
    this.localNotifications.schedule({
      id: 1,
      title: '通知标题mine',
      text: '这是显示通知栏的内容',
      trigger: { at: new Date() },
      lockscreen: true
    });
  }
}

3、安装音频插件 nativeaudio

① 安装

ionic cordova plugin add cordova-plugin-nativeaudio
npm install --save @ionic-native/native-audio

② app.module.ts

import { NativeAudio } from '@ionic-native/native-audio/ngx';
import { AudioService } from './../../@core/utils/audio.service';

providers: [
    NativeAudio,
    AudioService
]

③audio.service

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { NativeAudio } from '@ionic-native/native-audio/ngx';

interface Sound {
    key: string;
    asset: string;
}

@Injectable({
    providedIn: 'root'
})
export class AudioService {
    private sounds: Sound[] = [];
    private audioPlayer: HTMLAudioElement = new Audio();
    private forceWebAudio = false;
    private isNative = false;

    constructor(private platform: Platform, private nativeAudio: NativeAudio) {
        platform.ready().then(() => {
            if (platform.is('cordova')) {
                this.isNative = true;
            }
        });
    }

    preload(key: string, asset: string): void {
        if (!this.sounds.filter((sound) => sound.key === key).length) {
            if (this.isNative && !this.forceWebAudio) {
                this.platform.ready()
                    .then(() => this.nativeAudio.preloadSimple(key, asset));
                this.sounds.push({
                    key: key,
                    asset: asset
                });
            } else {
                const audio = new Audio();
                audio.src = asset;
                this.sounds.push({
                    key: key,
                    asset: asset
                });
            }
        }
    }

    play(key: string): boolean {
        const soundToPlay: Sound = this.sounds.find((sound) => sound.key === key);
        if (soundToPlay) {
            if (this.isNative) {
                this.platform.ready()
                    .then(() => this.nativeAudio.play(soundToPlay.key)
                        .then((res) => console.log(res),
                            (err) => console.log('play error', JSON.stringify(soundToPlay), err))
                    );
            } else {
                this.audioPlayer.src = soundToPlay.asset;
                this.audioPlayer.play()
                    .catch(() => {}); // ignore web player errors
            }
            return true;
        } else {
            return false;
        }
    }

    getSounds() {
        return this.sounds;
    }
}

③我的例子：

import { Component, OnInit } from '@angular/core';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { Vibration } from '@ionic-native/vibration/ngx';
import { NativeAudio } from '@ionic-native/native-audio/ngx';
import { AudioService } from './../../@core/utils/audio.service';

@Component({
  selector: 'app-mine',
  templateUrl: './mine.page.html',
  styleUrls: ['./mine.page.scss']
})
export class MinePage implements OnInit {
  constructor(
    private localNotifications: LocalNotifications,
    private vibration: Vibration,
    public audio: AudioService
  ) {  }

  ionViewDidEnter() {
    this.audio.preload('kakao', 'assets/sounds/kakao.m4a');  // 路径直接写assets下的文件即可
  }

  test() {
    this.vibration.vibrate(1000);
    this.audio.play('kakao');
    this.localNotifications.schedule({
      id: 3,
      title: '通知标题mine',
      text: '这是显示通知栏的内容',
      trigger: { at: new Date() },
      lockscreen: true
    });
  }
}

参考案例github上的ionic5音频