Push Notification Integration In Ionic + Capacitor Web App (React)

Requirements:

• Create a FREE OneSignal account
• Create an Web Push App inside of the OneSignal Dashboard
• Follow the steps of the Typical setup
• This tutorial requires some basic knowledge on React
• Ionic CLI version 6.16.3
• NodeJS version 14.0

Setup:

Creating Your Ionic + Capacitor (React) App Inside your terminal, you will have to run the following command to add the Ionic project globally in your machine to use Ionic in your command line.

npm install -g @ionic/cli

Inside of your terminal run the following command to create a new Ionic + Capacitor (React) project using the Ionic CLI. You will be asked to select a framework, select React.

ionic start

When asked to enter a project name, you can enter whatever name you want. In my case, I named my project ​​OneSignal-Ionic.

Later you will be asked to select a template, feel free to select the template that you want. In my case, I will be selecting tabs.

Adding OneSignal To Your Ionic Capacitor Application

In your Ionic project folder, navigate to the public folder and locate the SDK files you downloaded on your computer and insert them inside your Ionic app’s public folder.

If you need to, you can re-download the OneSignal SDK files.

Install React-OneSignal NPM package

Inside of your project folder, open your terminal and run the following command to install the React OneSignal NPM package.

npm i react-onesignal

After you have successfully installed the npm package, open your App.tsx file, you will enter the following line of code at the top of the file:

import OneSignal from "react-onesignal";

The code above will make the OneSignal object accessible and will allow you to have access to the OneSignal SDK properties. In the same file, we will create a useEffect hook. This hook will have the initialization code needed to trigger OneSignal. Remember to add the dependency array [] to your useEffect hook. The init() method from OneSignal can only be called once and the dependency array will help us to avoid that the useEffect gets triggered multiple times firing the init() method.

useEffect(() => {
   OneSignal.init({
     appId: "YOUR-APP-ID-HERE"
   });
 }, []);

In the appId propety insert the OneSignal App ID you saved somewhere in your computer.