cordova-plugin-unvired-universal-sdk

This cordova plugin is published as a npm package

Using this plugin

1. Uninstall the existing dependency plugins (if any)

$ cordova plugin rm cordova-plugin-device --force

2. Uninstall the previous version (if any) of the plugin

$ cordova plugin rm cordova-plugin-unvired-universal-sdk

3. Install this plugin

$ cordova plugin add cordova-plugin-unvired-universal-sdk

4. Verify the installation by checking the version number with package.json file or by listing the Cordova plugins installed for your project

$ cordova plugin ls   // List Cordova plugins

5. Make sure that the following JS dependencies are updated in index.html file. These JS dependencies should have been copied to the respective locations when you install the plugin.

  <script src="assets/js/codemirror.js"></script>
  <script src="assets/js/sql.js"></script>
  <script src="assets/js/jquery-3.2.1.js"></script>
  <script src="assets/js/unvired-db-worker.js"></script>

6. Make sure the file plugin is installed. If not, install the file plugin.

$ cordova plugin add cordova-plugin-file

Building this plugin

This contains source code for Unvired Cordova Plugin. In order to test this plugin locally, generate a debug version by building using build-debug.xml

$ ant -buildfile build-debug.xml

This produces the output in a folder called cordova-plugin-unvired-universal-sdk.

Adding a new method.

Any new method should have the implementation in www/kernel.js file. Accordingly, all the native cores should have an implementation for this method.

Exposing the new method to ionic apps.

This plugin is repackaged as ionic native plugin. https://ionicframework.com/docs/native/unvired-cordova-sdk

The source code of the ionic native plugin is located here: https://github.com/ionic-team/ionic-native/tree/master/src/%40ionic-native/plugins/unvired-cordova-sdk

The source contains a single file, index.ts which contains declarations of all the functions available in www/kernel.js file of this repo. To expose newly added methods in kernel.js, you will have to fork https://github.com/ionic-team/ionic-native repo to your GitHub repo, make changes and submit a pull request.

Once the Pull request is approved, the new method should be available publicly for all the users.

Push Notifications (Firebase)

Electron Setup

For push notifications to work in an Electron environment, your app must install the firebase-electron package.

Additionally, you must expose an Inter-Process Communication (IPC) bridge so the web app can communicate with the main process for Firebase Cloud Messaging (FCM).

In your Electron project's main script (e.g., cdv-electron-main.js), initialize the push receiver:

const { setup: setupPushReceiver } = require('firebase-electron');

// Call this with a reference to your window's webContents (e.g., inside createWindow)
setupPushReceiver(mainWindow.webContents);

// To set app name:
app.setAppUserModelId('Your App Name');

// To display notification popup
ipcMain.on('show-desktop-notification', (event, title, body) => {
    const { Notification } = require('electron');
    if (Notification.isSupported()) {
        new Notification({
            title: title,
            body: body,
            icon: path.join(__dirname, 'img/app.png')
        }).show();
    }
});

In your Electron project's preload script (e.g., cdv-electron-preload.js), ensure you expose the electronAPI with the fcm object as shown below:

const { contextBridge, ipcRenderer, shell } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // ... other exposed APIs ...

  fcm: {
    startService: (firebaseCredentials) => ipcRenderer.send('PUSH_RECEIVER:::START_NOTIFICATION_SERVICE', firebaseCredentials),
    onNotification: (callback) => {
      ipcRenderer.on('PUSH_RECEIVER:::NOTIFICATION_RECEIVED', (event, notification) => {
       
        // To display notification popup
        // Extract the title and body depending on your FCM payload structure
        const title = notification?.notification?.title || notification?.title || 'New Notification';
        const body = notification?.notification?.body || notification?.body || 'You have a new message.';
       
        // Ask the main process to show the native desktop notification
        ipcRenderer.send('show-desktop-notification', title, body);
 
        callback(notification);
      });
    },
    onToken: (callback) => {
      ipcRenderer.on('PUSH_RECEIVER:::TOKEN_UPDATED', (event, token) => {
        callback(token);
      });
      ipcRenderer.on('PUSH_RECEIVER:::NOTIFICATION_SERVICE_STARTED', (event, token) => {
        callback(token);
      });
    },
    onError: (callback) => {
      ipcRenderer.on('PUSH_RECEIVER:::NOTIFICATION_SERVICE_ERROR', (event, error) => {
        callback(error);
      });
    }
  }
});

Web / Browser Setup

For web apps running in a standard browser, you must include the firebase-messaging-sw.js service worker file at the root level of your web application (e.g., in the same directory as your index.html or in your public folder).

This service worker is mandatory for the browser to successfully register for FCM tokens and receive background push messages from Firebase.