Ionic Push not Registering, No Pushes Coming Through

So I have an Ionic 2 application, it’s fairly simple and I have been trying to get push notifications integrated.
I have gone other the documentation multiple times but even though there are no errors in the build, the push notifications won’t come through. I have looked at the code and it seems that the “this.push.register()” function is not calling as I have a console.log within it that never displays in the console. Here is my code:

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';
import { Http, HttpModule} from "@angular/http";
import { Storage } from "@ionic/storage";
import { RouterModule } from "@angular/router";
import { QRCodeModule } from 'angular2-qrcode';
import { Angular2TokenService } from 'angular2-token';
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MyApp } from './app.component';
import { HomePage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
import { SettingsbasicPage } from '../pages/settingsbasic/settingsbasic';
import { LanguagePage } from '../pages/language/language';
import { OpendoorPage } from '../pages/open-door/open-door';
import { SettingsPage } from '../pages/settings/settings';
import { CreatepincodePage } from '../pages/create-pincode/create-pincode';
import { VerifypincodePage } from '../pages/verify-pincode/verify-pincode';
import { ActionsPage } from '../pages/actions/actions';
import { ChangeSociasecurityPage } from '../pages/change-social-security/change-social-security';
import { ChangeFirstnamePage } from '../pages/change-first-name/change-first-name';
import { ChangeLastnamePage } from '../pages/change-last-name/change-last-name';
import { ChangeEmailPage } from '../pages/change-email/change-email';
import { ChangePasswordPage } from '../pages/change-password/change-password';
import { EnterSocialsecurityPage } from '../pages/enter-social-security/enter-social-security';
import { BankIDPage } from '../pages/bank-id/bank-id';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': '7f6764b2'
  },
  'push': {
    'sender_id': '660073317521',
    'debug': true,
    'pluginConfig': {
      'ios': {
        'badge': true,
        'sound': true
      },
      'android': {
        'iconColor': '#343434'
      }
    }
  }
};

export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    RegisterPage,
    SettingsbasicPage,
    LanguagePage,
    OpendoorPage,
    SettingsPage,
    CreatepincodePage,
    VerifypincodePage,
    ActionsPage,
    ChangeSociasecurityPage,
    ChangeFirstnamePage,
    ChangeLastnamePage,
    ChangeEmailPage,
    ChangePasswordPage,
    EnterSocialsecurityPage,
    BankIDPage
  ],
  imports: [
    IonicModule.forRoot(MyApp, {
      backButtonText: 'Test'
    }, {}),
    BrowserModule,
    HttpModule,
    RouterModule,
    QRCodeModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings),
    TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        })
  ],
  bootstrap: [IonicApp, MyApp ],
  entryComponents: [
    MyApp,
    HomePage,
    RegisterPage,
    SettingsbasicPage,
    LanguagePage,
    OpendoorPage,
    SettingsPage,
    CreatepincodePage,
    VerifypincodePage,
    ActionsPage,
    ChangeSociasecurityPage,
    ChangeFirstnamePage,
    ChangeLastnamePage,
    ChangeEmailPage,
    ChangePasswordPage,
    EnterSocialsecurityPage,
    BankIDPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Angular2TokenService, Storage ]
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';
import { Push, PushToken } from '@ionic/cloud-angular';
import { Storage } from "@ionic/storage";
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TranslateService } from '@ngx-translate/core';

import { HomePage } from '../pages/login/login';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;
  lang = '';

  constructor(platform: Platform, translate: TranslateService, public push: Push, public storage: Storage) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.backgroundColorByHexString('#343538');
      StatusBar.styleLightContent();
      Splashscreen.hide();
    });
    
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');
    
    this.storage.get('myLang').then((data) => {
      // the lang to use, if the lang isn't available, it will use the current loader to get them
      translate.setDefaultLang(data);
    });
    
    // Push Notifications
    this.push.register().then((t: PushToken) => {
      return this.push.saveToken(t);
    }).then((t: PushToken) => {
      console.log('Token saved:', t.token);
    });
    
    this.push.rx.notification()
    .subscribe((msg) => {
      alert(msg.title + ': ' + msg.text);
    });
  }
}

Those are the only two pages that have any code to do with push as that is how I understood it was to be done. As I said, I never see the “console.log(‘Token saved:’, t.token);” come through on the console but I am getting no build errors. Anyone have any idea why this is? Another question is do I need to implement Ionic Auth for push to work?

Hey,

I found push super difficult to solve too. Here just some clues that I hope may help you:

  • Did you debug with Xcode? The plugin doesn’t work in browser debug

  • Did you debug with a real phone? With simulator push doesn’t work

  • Is Xcode up-to-date? (8.3 or 8.2 … I was using for long 8.0 and that was my problem)

  • Did you see something like following in the Xcode console?

    Push Plugin register success: < aaaaaaa bbbbbbb ccccccc ddddddd aaaaaaa bbbbbbb ccccccc ddddddd >

  • Have you try removing and adding the iOS platform again (ionic remove platform ios / ionic remove platform ios / ionic build ios --prod)

  • There is also the certificates part, check that these are ok

Unfortunately can’t point out what’s wrong, but hope these ideas could helps

Good luck

Hey reedrichards,

Thanks for getting back to me.

I am actually not building this in Xcode but on a cloud code editing platform called c9. I am also just trying to get the notifications to work on android at the moment as I have no way to test on iOS without using Xcode. To test on android I am building the app everytime and installing it onto my device.

I have tried removing and adding the android platform though. Is there a way to debug push on android? And I am pretty darn sure I have set up the certificates right.

You’re trying to register outside the platform ready, perhaps that’s whats going wrong? So inside your platform ready (not outside!) do something like this:

  // since it's recommended to always register on device startup, do this over here.
    this.push.register().then((t: PushToken) => {
      return this.push.saveToken(t);
    }).then((t: PushToken) => {
      console.log('Token saved:', t.token);
      console.log('Start listening to push notifications..');
      this.startListeningForNotifications();
    });

and the startListeningForNotifcations is your subscribe to this.push.rx.notification()

first the solution provided by @luukschoen make sense, hope gonna solve the problem!

About debugging on android, I would suggest the ugly way, add some alert(‘something’); in your test version

Well I won’t be get out of the topic… but for me I worked with push notif about 3 times and ionic push notification plugin never worked for me, it has a lot of problems.

instead I use oneSignale ( ionic2 native plugin is available in native page ) and it works like charm !! go with it if you can’t solve this.

Thanks for getting back to me luukschoen. I have tried your suggestion and am getting this error:

[12:21:50]  typescript: src/app/app.component.ts, line: 32 
        Property 'startListeningForNotifications' does not exist on type 'MyApp'. 

  L31:    console.log('Start listening to push notifications..');
  L32:    this.startListeningForNotifications();
  L33:  });

I assumed that I was meant to get rid of the this.push.rx.notification() function? Here is my code within the app.component.ts:

constructor(platform: Platform, translate: TranslateService, public push: Push, public storage: Storage) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.backgroundColorByHexString('#343538');
      StatusBar.styleLightContent();
      Splashscreen.hide();
      
      this.push.register().then((t: PushToken) => {
        return this.push.saveToken(t);
      }).then((t: PushToken) => {
        console.log('Token saved:', t.token);
        console.log('Start listening to push notifications..');
        this.startListeningForNotifications();
      });
    });

Oh no sorry, off course you should maintain that function. So, wrap the push.rx.notification function inside a callable function like this:

startListeningForNotifications() {
    this.push.rx.notification()
    .subscribe((msg) => {
      alert(msg.title + ': ' + msg.text);
    });
}

now you can call this.startListeningNotifications() from within the push.register().then function.

Ok so I have done that and I have just noticed this in the console on my browser when I run the app:

Error: Uncaught (in promise): Error: Another registration is already in progress.

Error: Another registration is already in progress.
at Push.register (push.js:132)

Anyone have any idea what this means?

It seems like you’re starting the register function twice? Do you have it somewhere else in your app as well?

use one signal its super easy and you can customise notifications pretty easily

When I search my app for “register”, I get:

Searching for register in/myApp/src (Found 22 matches in 8 files)

/myApp/src/index.html:
	20:       navigator.serviceWorker.register('service-worker.js')

/myApp/src/app/app.component.ts:
	28:       this.push.register().then((t: PushToken) => {

/myApp/src/app/app.module.ts:
	14: import { RegisterPage } from '../pages/register/register';
	57:     RegisterPage,
	94:     RegisterPage,

/myApp/src/pages/login/login.html:
	42:       <button ion-button color="light" (click)="showRegisterPage()" id="logIn-button2" style="font-size:12px;text-align:left;padding-left:0;padding-right:0;border-radius:0px 0px 0px 0px;border:0;background-color:rgba(0,0,0,0);box-shadow:0 0 0">{{ 'notregistered' | translate }}</button>

/myApp/src/pages/login/login.ts:
	5: import { RegisterPage } from '../register/register';
	28:         registerAccountPath:        'auth',
	63:   showRegisterPage() {
	64:     this.navCtrl.push(RegisterPage);

/myApp/src/pages/register/register.html:
	4:       {{ 'register' | translate }}
	25:     <form id="register-form2" class="list max-width-500">

/myApp/src/pages/register/register.scss:
	1: page-register {

/myApp/src/pages/register/register.ts:
	8:   selector: 'page-register',
	9:   templateUrl: 'register.html'
	11: export class RegisterPage {
	29:     this.tokenService.registerAccount({

Found 22 matches in 8 files

I will be sure to look into this if I just can’t get this to work.