How to add the push notifications service

The app accepts push notifications that can be controlled from your Wordpress site. Here I will show you how to install the push notifications service for your app and on your site.

Note: This section requires that you have completed cloning and installing your app project. If this is not the case, please visit and complete the 'How to deploy in development' section first.

The Holigo App has the ability to receive push notifications. The service used to Send push notifications is OneSignal, which offers a free plant that provides:

• A Wordpress plugin to send push notifications directly from your Wordpress site.

• GDPR compliance.

• Unlimited unlimited mobile push subscribers.

So let's set this up.

Step 1: Sign up for a OneSignal account and add a new app

I would suggest to start your experience with OneSignal with a free plan first. You always get the opportunity to change to the Growth plan (which gives more options to segment your audience) at a later point in time.

Next, create a new application:

...give it a name, select the Apple iOS setup and press 'Next'.

Step 2: Create an Apple Identifier

OneSignal requires that you upload your Apple push certificate, so let create one for your app. For this, you must sign in to your Apple develop account, and open the 'Certificates, Identifiers and Profiles' section.

We must start by creating an Identity for your app. For this, visit the 'Identifiers' tab and click the '+' icon.

Next, select 'App IDs' and Continue. Then, select 'App' type and Continue.

Next, enter your app name in the 'Description' field and create a 'Bundle ID'. The Bundle ID typically consists of com.yourcompanyname.yourappname and will be used by Apple to identify your app. You will use the Bundle ID later inside Xcode when submitting your app to the Apple store.

Also, make sure to select 'Push Notifications' before pressing Continue.

Finally, check your information and press 'Register'.

Step 3: Create a Certificate Signing Request

To enable Push notifications, we must create a specific Push Notifications Certificate, which Apple uses to register your app for the iOS push notification service. But, in order to create a valid Certificate, you must first set up a Certificate Signing Request on your local machine.

For this, you will use the 'Keychain Access' application.

Once Keychain is active, select 'Request a Certificate From a Certificate Authority...' like so:

In the next window, enter your email address and select 'Saved to disk', then press Continue and save the file to your Desktop.

Step 4: Create a Push Notifications Certificate

Let's create the actual Certificate. For this, return to your Apple Developer Account, 'Certificates, Identifiers & Profiles' section if it is not already opened, and select the 'Certificates' tab.

After pressing the '+' icon, scroll down and select the 'Apple Push Notification service SSL (Sandbox & Productions) option and Continue.

Next, add the App ID that you created in the previous step and Continue.

Next, upload the Certificate Signing Request that you just saved to your Desktop and Continue.

Don't forget to download your new certificate and to double-click the .cer file. Once you do, your signed certificate will appear inside your Keychain app inside the 'My Certificates' section.

Step 5: Create your .p12 file and activate your OneSignal iOS service

In this final step, you need to create your .p12 file from your Keychain access app. To do so, right-click your newly created certificate (inside Keychain Access - My Certificates) and press 'Export'.

Give your file a name and save to your Desktop. You will also be asked to create a password for your p12 (so make sure to remember your password!).

Once completed, open your OneSignal account, visit Settings - Platforms and press the 'Apple iOS' platform option.

Next, upload the .p12 file you stored on your Desktop and enter the password that your created for the p12 in the box below, and press Next:

Next, select 'React Native' for the Platform configuration and press Next:

In the following screen, you will be provided with an App ID string. This string must be added to your ONESIGNAL_APP_ID constant inside the /src/config/constants.ts file of your project:

...

// ONESIGNAL APP ID
export const IOS_ONESIGNAL_ID = '6b1df01f-c24e-4cc2-8067-0cfff87f59bd';

...

Your OneSignal iOS service should now indicate 'active' once you exit the configuration editor:

Step 6: Setting up the OneSignal plugin on your Wordpress site

Let's install the 'Onesignal - Web Push Notifications' plugin on your Wordpress site - despite its name, the plugin also functions for mobile push notifications.

Note: do make sure to backup your site before installing the new plugin.

Once the plugin is installed, visit the plugin settings sections, open the 'Configuration' tab, and add the App ID string - the same string your added to your project constants file in the previous step - as well as the 'REST API key'. Both keys can be found under the 'Keys and IDs' tab in your OneSignal account.

Also, make sure to enable the 'Send notifications additionally to iOS & Android platforms' option and to add a 'Notification Title' value:

Finally, scroll down to 'UTM Tracking Settings' and add the from_notification=true string to the 'Additional Notification URL Parameters' field:

You can now Save your settings. Your site can now send notifications to your iOS device.

Note: push notifications cannot be received when testing the app on iOS Simulator.