Compile cross-platform components

[achacofe]

Good Morning,

I want to open a debate to collect feedback on how the webpack behaves. I have a basic project in Capacitor, in it I have installed two plugins:

1. Badge
2. Barcode Scanner

Following the tutorial I see that Capacitor does not have an instruction to generate build's and you have to perform a normal build (For web) that this generates the compilation in the dist/ folder.

I'm interested in better understanding, when you build for the various platforms (Android, iOS and Web), how the code of that plugin is built for that specific platform.

Does Capacitor modify Webpack configuration?

Thank you very much!

[kensodemann]

Here is the "high-level leave out the messy details" version, but hopefully it answers your question.

Plugins can conceptually be thought of consisting of four parts:

• the API: The JavaScript bits you call from your web app
• web: JavaScript code that is executed in a web context
• Android: Kotlin/Java code that is executed natively on Android
• iOS: Swift/Objective-c code that is executed natively on iOS

A Capacitor app is a web app embedded inside a native app. The native app launches a webview and serves the web app into the webview. It also sets up a bridge so messages can be passed between the web app and the native app.

Then when you do an npm cap sync or npm cap update, the web app is copied into the native app and so is the proper code from the plugins. See this from Xcode:

The App/App/public contains your dist/ from the web build, and Pods/DevelopmentPods will have your plugin code.

If you call Plugin.foo() the plugin code figures out if it should just call the JavaScript web API or send a message over the bridge. If the web-app is running in the context of a Capacitor native app, the following will basically happen:

• The web-app sends a message over the Capacitor bridge stating that Plugin.foo() was called and also passing a params object if applicable.
• The native app is listening for messages, and it gets the message.
• The native app figures out how to process the message and calls the proper native code
• The native code completes and send a message back to the web-app, potentially with some sort of payload

So, basically:

• the web-app is the web-app, and it is built how it is built
• the web-app is embedded in part of the native app so it can be served up into the webview
• the plugin code itself is embedded in a different part of the native app so it can be called when told to
• when a plugin is called from the web-app, either web-API code is called directly or a message is sent across a bridge to the native app depending on context

Does that answer your question?

[achacofe]

Your answer is great, it helps me a lot to understand how to communicate between native and web. Yes, I would like to understand the case of:

When I compile my angular code for the ios or android platform, in case I have implemented a code scanning SDK for example:

For the case of capacitor (mobility) I have one solution and for the case of web another, then, in the build's, (which in the case of capacitor is the same as web), how do you apply one solution and another? Is there a configuration file or something that can be seen?

I don't understand what you mean by this:
If you call Plugin.foo() in the plugin code, find out if you should just call the JavaScript web API or send a message through the bridge.

[jcesarmobile]

That's automatically handled by Capacitor, nothing you should worry about.

If you create a Capacitor plugin it will contain java/kotlin code for Android, Swift/Objective-C code for iOS and javascript/typescript for web as explained by kensodemann.

When you execute from javascript the Plugin.foo() function, when the code is run inside an Android application, the Capacitor's Android implementation will search for a foo function in your plugin's java class and execute it. When the code is run inside an iOS application, Capacitor's iOS implementation will search for the foo function in your plugin's Swift file and execute it. When the code is run inside a regular web browser, the Capacitor's web implementation will search for the foo function in your plugin's javascript file and execute it.

If you installed a plugin with npm install command, the plugin will be added to your package.json, capacitor will inspect the package.json and detect the capacitor plugins in it and configure the native projects to use them.
On iOS it will add all the plugins it detects to the ios/App/Podfile
On Android it will add all the plugins it detects to android/capacitor.settings.gradle
Those files are just to tell Capacitor where the native Swift/java files are located so Android Studio and Xcode can find them when compiling the native projects.

If you want to learn more about how to build plugins you can check this tutorial

[achacofe]

Hi, thank you very much for your clarification. Now with this I have another question. I am making use of the Barcode-Scanner plugin from the capacitor community Barcode-Scanner
It says that it is compatible for all three platforms, but I don't understand how I can make it work on the web, I have tried downloading the project itself and launching it but there is no way, it gives me this error:

core.mjs:6484
ERROR Error: Uncaught (in promise): Error: Not implemented on web.
Error: Not implemented on web.
    at BarcodeScannerWeb.unimplemented (index.js:376:16)
    at web.js:7:20
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new ZoneAwarePromise (zone.js:1349:1)
    at asyncToGenerator.js:21:1
    at BarcodeScannerWeb.hideBackground (web.js:6:28)
    at index.js:196:35
    at resolvePromise (zone.js:1262:1)
    at resolvePromise (zone.js:1216:1)
    at zone.js:1329:1
    at _ZoneDelegate.push.3279._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.mjs:25463:33)
    at _ZoneDelegate.push.3279._ZoneDelegate.invokeTask (zone.js:442:1)
    at Zone.push.3279.Zone.runTask (zone.js:214:1)
    at drainMicroTaskQueue (zone.js:632:1)

I leave a screenshot of the visual part of the miniproject:

In the SCAN button I have implemented that calls this method:

async scan() {
  BarcodeScanner.hideBackground(); // make background of WebView transparent

  const result = await BarcodeScanner.startScan(); // start scanning and wait for a result

  // if the result has content
  if (result.hasContent) {
    console.log(result.content); // log the raw scanned content
  }
}

I have it imported in the following way:
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

To launch it on the web I am executing it with the command:
ionic cordova run browser

I have done the installation as follows:

npm install @capacitor-community/barcode-scanner
npx cap sync

I have opened an issue in the plugin repo: capacitor-community/barcode-scanner#113