Create a Customized Cordova Plugin in 2024 | by way of Kevin Alexander Soto | Jan, 2024

Ahead of beginning with the code, my recommendation to create the local section is first to create the function in a local challenge, check the local function, after which paste the code to the plugin, together with the imports.

Once more and to renew the submit 🙂 , that is the code within the Android facet.

public elegance CordovaHelloWorld extends CordovaPlugin {
@Override
public boolean execute(String motion, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (motion.equals("sayHello")) {
String message = args.getString(0);
this.sayHello(message, callbackContext);
go back true;
}
go back false;
}
non-public void sayHello(String message, CallbackContext callbackContext) {
if (message != null && message.period() > 0) {
Toast.makeText(webView.getContext(), message, Toast.LENGTH_LONG).display();
callbackContext.good fortune(message);
} else {
callbackContext.error("Anticipated one non-empty string argument.");
}
}
}

Now, lest ruin down the code.

1. Elegance Definition:

• public elegance CordovaHelloWorld extends CordovaPlugin { ... }
• The CordovaPlugin elegance is the bottom elegance for customized Cordova plugins on Android, offering the construction for interacting with JavaScript code.

2. execute Way:

• @Override public boolean execute(String motion, JSONArray args, CallbackContext callbackContext) throws JSONException { ... }
• This technique is named when JavaScript code invokes one way from the plugin.
• It receives:
• motion: The identify of the process being referred to as.
• args: JSONArray of arguments handed from JavaScript.
• callbackContext: A context object used to ship effects or mistakes again to JavaScript.
• It assessments the motion and, if it is “sayHello”, it calls the sayHello means.

3. sayHello Way:

• non-public void sayHello(String message, CallbackContext callbackContext) { ... }
• This technique presentations a Toast message with the equipped message.
• It assessments if the message is legitimate and both:
• Calls callbackContext.good fortune(message) to ship a good fortune reaction again to JavaScript.
• Calls callbackContext.error(...) to ship an error reaction.

By means of default the Cordova plugin is in Purpose-c, however we will be able to use Swift in our customized plugin, we wish to upload the well-known notation @objc() and we’d like a type of “bride”, referred to as Bridging-Header.h Fortunately now day in Cordova 11 this report is generated robotically 🙂 , lest cross with the local code.

/********* CordovaHelloWorld.m Cordova Plugin Implementation *******/
import Basis
import Cordova
import UIKit
@objc(CordovaHelloWorld)
elegance CordovaHelloWorld: CDVPlugin {
@objc func sayHello(_ command: CDVInvokedUrlCommand) {
var pluginResult = CDVPluginResult(
standing: CDVCommandStatus_ERROR
)
let msg = command.arguments[0] as? String ?? ""
if msg.characters.depend > 0 {
let toastController: UIAlertController =
UIAlertController(
name: "",
message: msg,
preferredStyle: .alert
)
self.viewController?.provide(
toastController,
animated: true,
final touch: nil
)
DispatchQueue.primary.asyncAfter(closing date: .now() + 3) {
toastController.brush aside(
animated: true,
final touch: nil
)
}
pluginResult = CDVPluginResult(
standing: CDVCommandStatus_OK,
messageAs: msg
)
}
self.commandDelegate!.ship(
pluginResult,
callbackId: command.callbackId
)
}
}

1. Imports and Elegance Definition:

• @objc(CordovaHelloWorld) elegance CordovaHelloWorld: CDVPlugin { ... }: Defines an Purpose-C elegance named CordovaHelloWorld that extends the CDVPlugin elegance, the bottom elegance for Cordova plugins on iOS.

2. sayHello Way:

• @objc func sayHello(_ command: CDVInvokedUrlCommand) { ... }: This technique is named when JavaScript invokes the “sayHello” means from the plugin.
• var pluginResult = CDVPluginResult(standing: CDVCommandStatus_ERROR): Initializes a CDVPluginResult object to ship a reaction again to JavaScript, to start with set to an error standing.

3. Dealing with Message and Showing Alert:

• let msg = command.arguments[0] as? String ?? "": Retrieves the primary argument handed from JavaScript (the message to show) and safely handles doable lacking arguments.
• if msg.characters.depend > 0 { ... }: If the message isn’t empty:
• Creates a UIAlertController to show as a short lived alert.
• Gifts the alert controller at the primary view controller.
• Makes use of DispatchQueue.primary.asyncAfter to brush aside the alert robotically after 3 seconds.
• Updates the pluginResult to a good fortune standing with the message.

4. Sending Reaction to JavaScript:

• self.commandDelegate!.ship(pluginResult, callbackId: command.callbackId): Sends the pluginResult again to JavaScript, indicating good fortune or error and probably returning the message.