OneSignal Push with Ionic + Vue.js

Ionic Framework Ionic Vue
1

Hi,
I am trying to install one signal push notifications with the plugin written on the documentation but I have tried many different solutions to install it but it seems not works with Ionic + Vue.js.

After I have installed the plugin with Capacitor, one of the solutions was to insert the code in the App main component like this:

created() {
    if (this.loggedUser) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const $vm = this
      setInterval(() => $vm.getUnreadNotifications(), 5000);
    }
    this.handlerNotifications();
  },
  watch: {
    queryField: function () {
      this.searchFriend()
    }
  },
  methods: {
    handlerNotifications() {
      OneSignal.startInit('XXXXXX', 'XXXXX');
      OneSignal.handleNotificationOpened()
          .subscribe(async jsonData => {

            const confirmAlert = await alertController
                .create({
                  header: jsonData.notification.payload.title,
                  message: jsonData.notification.payload.body,
                  buttons: ['OK']
                });
            confirmAlert.present();
            console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
          });
      OneSignal.endInit();
    },

Nothing happens on Android Emulator and the code does not enter in OneSignal.handleNotificationOpened().subscribe method.

2

So a few things to remember, push notifications on an emulator/simulator a bit tricky. They don’t really behave the same way as they would a real device since the sims end up removing push notifications from the functionality.

Also, how are you importing/referencing one signal? The OneSignal object appears to indicate imports? Could you expand on the script tag?

3

Thank you, I am importing OneSignal by native ionic plugin:

import {OneSignal} from '@ionic-native/onesignal';
.....

setup() {
  ....
    return {
    ....
      OneSignal
    }
  }
4

Mike,

Any update or suggestions on this?