Tutorial: Installing and using Capacitor and Cordova plugins

[franse]

• Introduction:

Hey everybody, first of all I want to thank all the people who helped me on the way of installing and using plugins on a mobile project, especially Patrick, who has pointed me in the right direction.

What I’m going to explain here is how we can install and run not only capacitor plugins but also cordova plugins.
I’m going to focus this tutorial on some of them, because the way to implement it, it’s practically the same for all of them.

---

• Plugins:

Some things are beyond the code we can handle, we can use plugins to: handle a back button to go back in history, share a link to another app, know the status of the internet and redirect to an offline page, get device info, push notifications, local notifications, etc
You can take a look to the list of Official Capacitor Plugins or Official Cordova Plugins (Note this: Incompatible cordova plugins)
Of course, you have a lot of community plugins, but for security reasons, I won’t share them (you can search and use them at your own risk).

---

• Including capacitor.js on our page:

1. If we don’t have the capacitor.js on our project, we need to include it, by copying the node_modules/@capacitor/core/dist/capacitor.js to our project www folder and calling it, so I add this to index.html: <script src="capacitor.js"></script>

• Renaming capacitor plugins:

1. The most important thing now is renaming the capacitor plugins from plugin to Capacitor.Plugins.plugin.
   For example, in the Network Plugin we rename Network to Capacitor.Plugins.Network
   So Network.addListener is now Capacitor.Plugins.Network.addListener
   On Cordova plugins we don’t change anything.

---

Saying that:

• Capacitor plugin: Network (Retrieving type, status, and listening events)

1. On our Wappler terminal we run npm install @capacitor/network and then npx cap sync
2. We go to the node_modules folder and copy the plugin.js file from:
   node_modules/@capacitor/network/dist to our project. In my case: www/js and renamed to network.js
3. In our index.html we call the file as: <script type="module" src="js/network.js"></script>
4. Now we can use the plugin, for example

<script type="module">
Capacitor.Plugins.Network.getStatus().then(status => {
    console.log("Internet Status:", status.connected,"Internet Type:", status.connectionType);
  });
	</script>

Will return on console: Internet Status: true Internet Type: wifi

await Capacitor.Plugins.Network.addListener('networkStatusChange', status => {
  console.log('Network status changed', status);

});

Will listen to any change of the network, returning true/false the status of the connection.

• Capacitor plugin: Share button (A wonderful share button)

1. On our Wappler terminal we run npm install @capacitor/share and then npx cap sync
2. We go to the node_modules folder and copy the plugin.js file from:
   node_modules/@capacitor/share/dist to our project. In my case: www/js and renamed to share.js
3. In our index.html we call the file as: <script type="module" src="js/share.js"></script>
4. I created a new JS file called “sharing.js” that includes:

function sharing() {
    Capacitor.Plugins.Share.share({
        title: 'Share Title',
        text: 'Share text',
        url: 'Share url'
        dialogTitle: 'Share dialog',
    });
}

And it’s included on my index.html like <script src="js/share.js"></script>
And calling it by:

<button id="btn1" class="btn" onclick="sharing()">Share me</button>

• Cordova plugin: Battery (Getting % and if it is charging)

1. On our Wappler terminal we run npm install cordova-plugin-battery-status and then npx cap sync
2. We go to the node_modules folder and copy the battery.js file from:
   node_modules/cordova-plugin-battery-status/www/ to our project. In my case: www/js and renamed to battery.js
3. In our index.html we call the file as: <script type="module" src="js/battery.js"></script>
4. We can use the plugin like:

<script type="module">
		window.addEventListener("batterystatus", onBatteryStatus, false);
		
function onBatteryStatus(status) {
    console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);}
	</script>

It will return the % of the battery and also a true or false depending if it’s charging or not.
My computer:

My own device:

• Capacitor plugin: Device (Probably my favorite)

1. On our Wappler terminal we run npm install @capacitor/device and then npx cap sync
2. We go to the node_modules folder and copy the plugin.js file from:
   node_modules/@capacitor/device/dist to our project. In my case: www/js and renamed to device.js
3. In our index.html we call the file as: <script type="module" src="js/device.js"></script>
4. We can use it like:

	<script type="module">
		const info = await Capacitor.Plugins.Device.getInfo();
			console.log(info);
	</script>

Will return something like this on a computer:

And something like this in Android:

Also, we can get a unique identifier of the device which I’m not going to share, but we can use with:

<script type="module">
const id = await Capacitor.Plugins.Device.getId();
console.log(id);
    </script>

• Capacitor plugin: App (BackButton/Exit/Etc)

1. On our Wappler terminal we run npm install @capacitor/app and then npx cap sync
2. We go to the node_modules folder and copy the plugin.js file from:
   node_modules/@capacitor/app/dist to our project. In my case: www/js and renamed to app.js
3. In our index.html we call the file as: <script type="module" src="js/app.js"></script>
4. We can now use a lot of things from this plugin
   Like some ways to handle the back button. I’m going to show two of them

• Capacitor plugin: App (Going back on history or closing the app)

await Capacitor.Plugins.App.addListener('backButton', ({canGoBack}) => {
  if(!canGoBack){
    CapacitorApp.exitApp();
  } else {
    window.history.back();
  }
});

• Capacitor plugin: App (Going to main or close the app)

await Capacitor.Plugins.App.addListener('backButton', () => {
    if (window.location.pathname === "/index.html") {
    CapacitorApp.exitApp();
    } else {
  window.location.href = 'index.html#!';
    }
});

• Reminders and tips:

1. Make sure to copy the capacitor.js to your project folder and call it

2. Remember always click on build and then on preview

3. Console.log is one of your best friends, so when you’re previewing an app try to debug it and see the console, for example on Android, you need to go to: chrome://inspect/#devices

4. As Patrick said, we can use any information on any element as we want, for example, If I need to getStatus from the network plugin:

<script type="module">
  dmx.global.set('networkStatus', await Capacitor.Plugins.Network.getStatus());
</script>

Then I can use the interfaces, in this case, connected and connectionType using:
{{networkStatus.connectionType}} and {{networkStatus.connected}}

5. Remember you can console each plugin by something like Capacitor.Plugin.XXXX:
   For example: Capacitor.Plugins.Device:
   

This is just a simple return to all the people who have helped me on this journey.
PS: Any adjustment will be very appreciated, I just shared something that works, but maybe there are better ways
PS2: By reading this you must know English’s not my first language, DM me if I can make it clear
PS3: I tested this tutorial on 3 different computers with many blanks Android projects but should be ok on ios as we tested the cookies plugin with @milo but anything you need, you can text me

I hope this can help someone in the future

Fran

[kfawcett]

Thank you, Fran! This is extremely helpful.

[franse]

Thanks for your reply Keith!
I’ll try adding as many as my free time allow it.

Also I’ll be uploading a repository on these days, with a debug-apk, so everybody can test it.

[guptast]

Thank you for the tutorial, Fran. This will be a very useful resource when developing a mobile app. Thank you for taking the time to write this tutorial

[famousmag]

Hey Francisco,

I love when members of our community share their knowledge and solutions…
That means that we can go all forward faster, cleaner and in the correct way.
Your tutorial is much appreciated!!!
Thank you very much brother

[Rubens_Bentes_da_Sil]

Thank you very much, I was suffering with this for weeks. I will try to apply it to the Push Notification plugin. If I have problems (as I’m a complete beginner) I come here for help! =D

[Teodor]

Please check the following tutorial and the official capacitor plugins integrated in Wappler:

Using Capacitor Native Plugins

Intro If you’re looking to supercharge your mobile app development, understanding how to leverage Capacitor plugins is a game-changer. Capacitor plugins are powerful extensions that enhance the functionality of your applications by providing access to native device features. Whether you’re targeting iOS or Android, these plugins act as bridges between your web codebase and native APIs, enabling seamless integration of device-specific capabilities. In this tutorial, we’ll walk you through the…