Capacitor plugin

Hi, can anyone explain to me how to implement the call of Capacitor plugin? My app should understand if there is a connection or not thanks to this plugin: https://capacitorjs.com/docs/apis/network

You can do this within Wappler using the Browser Component. Add the Browser Component to your page. Select an Element. Dynamic Attributes - Show/Hide (a row with a message or content for example), select Browser, select Online. The message/content within the row will then be shown if there is a connection, or vice-versa, is that easy.

In general though, to install Capacitor Plugins, is quite simple. Create a new JavaScript file, paste in the example code, attach the script to your page, should be about it. You could also add it to the main.js or index.js of the Project, can’t remember which one in Capacitor, but if I remember it has a commented area to add third party JavaScript, or like I said just create a new file, lot easier later on if it needs changing.

1 Like

Thanks Dave, so can I paste this code into a javascript page? It seems to me that all the examples of Capacitor are based on angular or am I wrong?

import { Network } from '@capacitor/network';

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

const logCurrentNetworkStatus = async () => {
  const status = await Network.getStatus();

  console.log('Network status:', status);
};
1 Like

Firstly no problem at all @revolution . Secondly I know there is a specific Angular version of Capacitor but not sure if ‘all’ plugins are Angular? @JonL is my go to expert on JavaScript and all things related to it. Maybe he could take a peek? To be honest I could not tell you the differences nor know what I am looking at, if it is one or the other. Currently trying to educate myself in that regard :slight_smile:

Please check: