ionic-frameworkcapacitorpushwoosh

How to use Pushwoosh in Ionic 5 project with capacitor


Hi everyone I am migrating an app from ionic 1 to ionic 5 and I need to integrate the pushwoosh notification service, my project was started not using cordova, instead I use capacitor and I can't find information about how to integrate this service to an ionic 5 application.

Please, we already know that you can use cordova but when using the cordova plugin add pushwoosh-cordova-plugin@8.0.0 it gives you the following message:

Current working directory is not a Cordova-based project.

because as I said before it is a capacitor project not a cordovan project, Btw I already use ionic integrations enable cordova

So... if anyone can help us, It would be very helpful.


Solution

  • OK guys after many hours trying to integrate Pushwoosh into an ionic 5 application for me it was impossible,

    If you set everything up correctly, the following will happen:

    1. Your app will connect to Pushwoosh correctly
    2. Your app will correctly register your device in pushwoosh

    But your app will not listen to the listeners offered by the official Pushwoosh documentation

    document.addEventListener('push-receive',
        function (event) {
            var message = (<any>event).notification.message;
            var userData = (<any>event).notification.userdata;
                                  
            alert("Push message received: " + message);
            console.info(JSON.stringify((<any>event).notification));
                                  
            //dump custom data to the console if it exists
            if (typeof (userData) != "undefined") {
              console.warn('user data: ' + JSON.stringify(userData));
            }
          }
       );
    

    This does not work in an ionic 5 app 👆🏽

    This does work:

    import { Component, OnInit } from '@angular/core';
    
    import {
      Plugins,
      PushNotification,
      PushNotificationToken,
      PushNotificationActionPerformed,
    } from '@capacitor/core';
    
    const { PushNotifications } = Plugins;
    
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage implements OnInit {
      ngOnInit() {
        console.log('Initializing HomePage');
    
        // Request permission to use push notifications
        // iOS will prompt user and return if they granted permission or not
        // Android will just grant without prompting
        PushNotifications.requestPermission().then(result => {
          if (result.granted) {
            // Register with Apple / Google to receive push via APNS/FCM
            PushNotifications.register();
          } else {
            // Show some error
          }
        });
    
        PushNotifications.addListener(
          'registration',
          (token: PushNotificationToken) => {
            alert('Push registration success, token: ' + token.value);
          },
        );
    
        PushNotifications.addListener('registrationError', (error: any) => {
          alert('Error on registration: ' + JSON.stringify(error));
        });
    
        PushNotifications.addListener(
          'pushNotificationReceived',
          (notification: PushNotification) => {
            alert('Push received: ' + JSON.stringify(notification));
          },
        );
    
        PushNotifications.addListener(
          'pushNotificationActionPerformed',
          (notification: PushNotificationActionPerformed) => {
            alert('Push action performed: ' + JSON.stringify(notification));
          },
        );
      }
    }
    

    I tried to combine Pushwoosh with the capacitor but the tokens of the devices that are generated are different so I still didn't get my notifications.

    At the end of the day and after many hours and days of work I have no other option than to use firebase and now everything is going much better.