Awesome Open Source
Awesome Open Source

Push notifications - Capacitor

¡Hi world! This it's a simple mobile application built with Ionic and Capacitor to demonstrate how to register for and receive "push-notifications" on Android/iOS.

💻 Requirements

  • NPM
  • Android Studio & SDK Manager API +30
  • Firebase: Create account and project

⚙Installation

Install Ionic & Angular:

npm install -g @ionic/cli
npm install -g @angular/[email protected]

Install dependencies:

npm install

Compile code to later copy them to platforms (Android / iOS):

ionic build

Create android platform (Native compilation code)

npx cap add android

Android Push Preparation

  1. Create account firebase:

Create account firebase & generate json for connect with your app (android / ios) Add your google-services.json in android/app/.

  • Create project:
  • Add Firebase to Android:
  • It's very important that your android package name is equal to appId of the capacitor file of your project: capacitor.config.json.
  • Download your google-services.json and add in your project in android/app/
  1. Add in build.gradle:

In your android/app/build.gradle

...
apply plugin: 'com.google.gms.google-services'
    ...
    dependencies {
        ...
            implementation platform('com.google.firebase:firebase-bom:29.0.1')
            implementation('com.google.firebase:firebase-iid')
            implementation 'com.google.firebase:firebase-messaging'
        ...
    }

In your android/build.gradle

 buildscript {
    ...
    dependencies {
        ...
        classpath 'com.android.tools.build:gradle:4.2.1'
        classpath 'com.google.gms:google-services:4.3.10'
        classpath 'com.google.firebase:firebase-messaging:21.0.1'
        ...
    }
 }
  1. Copy all changes to an android platform
npx cap sync
  1. Open android project:
npx cap open android

5.Finally Sync project with gradle files > Android studio and RUN App.

That it's all...

** Additional note (summary of push notifications code in angular) :

In angular the code for register and receive push notifaction is in src>app>home>home.page.ts.

  • 4 events that are listening when a device is registered or a push notification is sent.
    // On success, we should be able to receive notifications
      PushNotifications.addListener('registration',
      (token: Token) => {
          alert('Push registration success, token: ' + token.value);
        }
      );
  
      // Some issue with our setup and push will not work
      PushNotifications.addListener('registrationError',
        (error: any) => {
          alert('Error on registration: ' + JSON.stringify(error));
        }
      );
  
      // Show us the notification payload if the app is open on our device
      PushNotifications.addListener('pushNotificationReceived',
        (notification: PushNotificationSchema) => {
          alert('Push received: ' + JSON.stringify(notification));
        }
      );
  
      // Method called when tapping on a notification
      PushNotifications.addListener('pushNotificationActionPerformed',
        (notification: ActionPerformed) => {
          alert('Push action performed: ' + JSON.stringify(notification));
        }
      );
  • 1 function to "request permissions & register device with token". (On Android it doesn't prompt for permission because you can always receive push notifications, but on iOS it depends on the user's selection.
 requestPermissions(){
    if(this.platform.is('capacitor')){
      PushNotifications.requestPermissions().then(result => {
        console.log("PushNotifications.requestPermissions()");
        if (result.receive === 'granted') {
          // Register with Apple / Google to receive push via APNS/FCM
          PushNotifications.register();
        } else {
          // Show some error
        }
      });
    } else {
        console.log("PushNotifications.requestPermissions() -> Its a not device mobile")
    }
    
  }

** skeleton project with functionalities:

  • Register and generate token for push notifications.
  • Subscribe by topics.
Alternatives To Push_notifications Capacitor
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (239,115
Angular (54,892
Firebase (20,824
Push Notifications (1,793
Fcm (756
Firebase Cloud Messaging (276
Capacitor (264
Cloud Messaging (31