Skip to main content

Onesignal Push Notifications With Firebase step by step in ionic 4

To integrate OneSignal with Firebase for sending push notifications to an Ionic 4 mobile app, you will need to follow these detailed steps:

1. Create an account on OneSignal and create a new app to get your App ID and REST API Key.

2. Create a new project in Firebase and enable Cloud Messaging. This will provide you with a Server Key and Sender ID, which will be needed for OneSignal configuration.

3. In OneSignal, go to the Settings -> App Settings and configure the Firebase Cloud Messaging (FCM) settings by adding the Server Key and Sender ID from Firebase.

4. In your Ionic 4 project, install the OneSignal plugin by running the following command:



    ionic cordova plugin add 
    onesignal-cordova-plugin
    npm install @ionic-native/onesignal

5.In the app.module.ts file, import the OneSignal module and add it to the providers array:



6. In the app.component.ts file, import the OneSignal module, and in the constructor, initialize the OneSignal plugin with your App ID and REST API Key:



7. In your app, use the OneSignal SDK to subscribe and unsubscribe users, and to display notifications. For example, to subscribe a user, you can use the following code:


And to unsubscribe a user, you can use the following code:

Test the integration by sending a test notification to your app through OneSignal.

Note: You will need to use the actual App ID and REST API Key from OneSignal in step 6 and make sure to use the correct certificate while configuring OneSignal settings.

After the integration, OneSignal will use Firebase Cloud Messaging to send push notifications to your app users. You can also use the Firebase Cloud Messaging API to send notifications from your own backend.

Comments

Post a Comment

Popular posts from this blog

Set ANDROID_HOME and Path Variables

  Set ANDROID_HOME and Path Variables for android studio SDK 1. Right-click on 'My Computer'/'This PC' and select Properties. Go to Advanced system settings and select ‘Environmental Variables’ option.  2. Under the User Variable table, click New to open New User Variable dialog.  3. Put ANDROID_HOME as Variable name and provide the path of the SDK folder next to Variable value.  4. Click OK to close the dialog box  5. Go to the folder where SDK has been installed.  6. Inside the SDK folder look for ‘tools’ and ‘platform-tools’ folder.  7. Copy the path for both tools and platform-tools.  8. Open ‘Environmental Variables’ dialog box.  9. Go to System Variables table and locate the Path variable.  10. Edit the path variable from ‘Edit system Variables’ dialog box.  11. Add the ‘tools’ and platform-tools’ folder’s full path.  12. Close the entire opened dialog box.  13. This configures the Android. However, to check ope...
Post a Comment
Read more

Js and CSS CDN For Jcrop

JS and CSS CDN for Image cropping : <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css"/>   <link rel="stylesheet" href="https://unpkg.com/jcrop/dist/jcrop.css"
Post a Comment
Read more