Integration

Cordova, formerly called PhoneGap, is a platform to build native mobile applications using HTML5, CSS, and JavaScript. It acts as a container for running a web application written in HTML, CSS, JS. Ionic uses Cordova to deploy native apps.

Android

Here's how you can integrate the Notify Visitors SDK with your android app.

Configure google-service.json

1.1 Goto FCM (https://console.firebase.google.com/) and register your app.

1.2 Copy Sender Id and Legacy server key from Fcm.

1.3 Download the latest config JSON file (google-service.json) and paste it in your-project-root folder (yourProject/google-service.json).

1.4 Goto Notifyvisitors panel and from the App push menu goto Android inside configuration section from the left side menu panel and Paste Sender Id and Legacy server key.

Configuration of Push Notification Icon (For Android Notification Icon)

a. Create a monochrome png icon with size 200*200.

b. Name of the icon should be sm_push_logo.png.

c. And paste it in your-project-root folder (yourProject/sm_push_logo.png).

Configure NotifyVisitors Brand-ID and Secret-Key in Project Config.xml file.

Paste this code on your app config.xml under android & IOS platform section.

Under Android Platform Section

<config-file parent="application" target="AndroidManifest.xml">
           <meta-data android:name="notifyvisitors_bid" android:value="5499" />
           <meta-data android:name="notifyvisitors_bid_e" android:value="DAXXXXXXXXXXXXXXXXXXXXXXXXX" />          
</config-file>

Under IOS Platform Section

<config-file parent="nvBrandID" target="*-Info.plist">
       <string>54XX</string>
</config-file>
<config-file parent="nvSecretKey" target="*-Info.plist">
       <string>DA85XXXXXXXXXXXXXXXXXXXXXXXXX8</string>
</config-file>

Install NotifyVisitors Plugin

npm install cordova-plugin-notifyvisitors

Add Plugin to Project

ionic cordova plugin add cordova-plugin-notifyvisitors --variable NV_LINK_URL=www.your_deep_link_url.com

Example:-

ionic cordova plugin add cordova-plugin-notifyvisitors --variable NV_LINK_URL=www.myApp.com
 
 Note:- If you added the plugin correctly you will see the following in your CLI.
********************************************************************
* cordova-plugin-notifyvisitors version:x.x.x  successfully installed *
********************************************************************

📘

Note :

In above example Dummy Brand ID and Secret keys shown. Kindly login your NV_account to see your account credentials (i.e. your BrandID and your SecretKey)

AAPT Error

Now build your project if you will get an AAPT error from App Config.xml. Import following line under widget section.

xmlns:android="http://schemas.android.com/apk/res/android"

IOS

Configuration Settings

• Open yourApp.xcworkspace file inside ios directory.

• Goto Capabilities Tab and turn the Background Modes switch on. To do that select the project from the Project Navigator then select the app target then select the Capabilities tab, and turn the Background Modes switch on.

• Select 3 check boxes (i.e. Background fetch, Remote notifications).

• Select Your App Target from your targets and If you are using Xcode 10 or below Goto Capabilities Tab Turn On Push Notifications and if Push Notifications was already turned on then turn off Push Notifications and turn it on again to configure push notification properly.

• If you are using Xcode 11 then goto Signin & Capabilities Tab and click on + sign (i.e. + Capabilities) on the top left corner inside this tab and click on Push Notifications from the popup list shown on the + sign clicked.

• In the Capabilities Tab Turn On App Groups and click on + sign and add a new app group giving the group name as group.nv.{Your App Bundle Identifier}.

Example: if Your App’s Bundle Identifier is com.example.myapp then the App Group must be named as group.nv.com.example.myapp make sure this newly created app group must be checked (Turned on)

📘

Notification Service Extension

For Rich Push Notifications in ios you have to configure a Notification Service Extension.

IOS Notification Service Extension

1. Create a Notification Service Extension in your project. To do that, in Xcode, select File >> New >> Target and choose the Notification Service Extension template.

• Define a name for the Notification Service Extension as given below :

Now close your xcode.

2. If you already have a Podfile in your project. Please skip this step. Goto your ios folder
   from your project root folder by using the following command.

$ cd platforms && cd ios && pod init

3. Now open your Xcode and add the notifyvisitors dependency on the pod file under your Notification Service Extension name target like below.

target 'YourNotificationServiceExtension' do
       pod 'notifyvisitors', '6.1.0'
 end

4. Now Run the following commands in the terminal from the ios folder directory.

pod repo update && pod install && cd .. && cd ..

Once the target is created, Activate the scheme for Extension when prompted for the same. After this your extension will be added to the project you will see a class with the extension name provided by you while creation and .plist file associated with it.

5. Now Open info.plist of your Notification Service Extension as source code (right click on info.plist and click on Open as >> Source code) and add the following code in it.

<key>App Bundle identifier</key>
   <string>”Your App’s Project Identifier Name”</string>
 <key>NSExtension</key>
   <dict>
      <key>NSExtensionAttributes</key>
          <dict>
             <key>UNNotificationExtensionDefaultContentHidden</key>
             <true/>
             <key>UNNotificationExtensionInitialContentSizeRatio</key>
              <real>0.7</real>
          </dict>
       <key>NSExtensionPointIdentifier</key>
       <string>com.apple.usernotifications.service</string>
       <key>NSExtensionPrincipalClass</key>
       <string>NotificationService</string>
   </dict>

OR

You can simply open the info.plist and add the keys which works as the same as above for this.

1.1. Add a new row by going to the menu and clicking Editor > Add Item. Set a key App Bundle identifier as a String and set its value to your app’s main target Bundle Identifier.

1.2. Expand the NSExtension and add NSExtensionAttributes as a Dictionary. Inside NSExtensionAttributes dictionary add a key UNNotificationExtensionDefaultContentHidden as Boolean its value should be YES and add another key UNNotificationExtensionInitialContentSizeRatio as Number its value should be 0.7 as the following preview.

6. Select Notification Service Extension Target from your target and If you are using Xcode 10 or below Goto Capabilities Tab Turn On Push Notifications and if here Push Notifications was already turned on then turn off Push Notifications and turn it on again to configure push notification properly.

If you are using Xcode 11 then goto Signin & Capabilities Tab and click on + sign (i.e. + Capabilities) on the top left corner inside this tab and click on Push Notifications from the popup list shown on the + sign clicked.

7. Now inside Capabilities Tab Turn On App Groups and select the app group created in the previous step.

Example: We have previously created an app group named group.nv.com.example.myapp make sure this app group must be visible here and make it checked (Turned on).

8. Goto NotificationService.m file and update didReceiveRequestWithContentHandler delegate method as follows:

Import the notifyvisitors header file ServiceExtension.m file.

#import <notifyvisitors/notifyvisitors.h>

Update didReceiveRequestWithContentHandler delegate method as follows:

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
self.contentHandler = contentHandler;
self.bestAttemptContent = [request.content mutableCopy];
[notifyvisitors LoadAttachmentWithRequest:request bestAttemptContent:self.bestAttemptContent withContentHandler:self.contentHandler];
}

Import NotifyVisitors package

Now in your JavaScript code, you can import the NotifyVisitors package

declare var NotifyVisitors: any;