Help with webintent using Ionic/React

[acegautam]

Hello Darryn,

First of all, thanks a ton for your efforts and contributions on making it so easy to work with web intents. I am trying to use the plugin in my React-based Ionic app which is capacitor-enabled. I am trying to read the button-push barcode scanner on my Zebra TC57 device via DataWedge. All the relevant examples that I have seen so far are mostly Angular and some vanilla JS (browser).

I am also a bit confused between the statements - "using the web intent plugin" and "using the cordova plugin directly".

Based on the docs, I tried setting up a broadcast receiver like below but React/Typescript just doesn't let you use the window object with plugins. Throws a compiler error - "Property 'plugins' does not exist on type 'Window & typeOf globalThis'". I tried tricking it with window['plugins'], but still no luck. Is that the right way to use in an Ionic/React app?

window.plugins.intentShim.registerBroadcastReceiver({ filterActions: [ 'com.darryncampbell.cordova.plugin.broadcastIntent.ACTION' ] }, function(intent) { // Broadcast received console.log('Received Intent: ' + JSON.stringify(intent.extras)); var parentElement = document.getElementById('broadcastData'); parentElement.innerHTML = "Received Broadcast: " + JSON.stringify(intent.extras); } );

I am kind of really stuck right now, and would really appreciate if you could point me in the right direction, preferably if you have a Ionic/React-based example using the web intent plugin interacting via DataWedge. Thanks.

Cheers, Gautam

[darryncampbell]

Hi, I'm on mobile so apologies for brief response but where you looking for this sort of thing? https://github.com/ZebraDevs/DataWedge-Ionic-Demo/tree/Transition_To_WebIntent_Ionic_6

[acegautam]

Hey @darryncampbell, thank you so much for the quick response, sorry I could not get back to you earlier. But yes that branch definitely helped me get on the right track. I have now got it to work using the following:

import { WebIntent } from '@ionic-native/web-intent';
....
WebIntent.sendBroadcast({
        action: 'com.symbol.datawedge.api.ACTION',
        extras: {
          [extraName]: extraValue,
        }
})
....
WebIntent.registerBroadcastReceiver({
      filterActions: ['com.myapp.ACTION'],
      filterCategories: ['android.intent.category.DEFAULT'],
    }).subscribe((intent) => {
      const result = intent.extras;
      console.log(
        ' ====================> Received Intent: ' + JSON.stringify(result)
      );
      const codeString = result['com.symbol.datawedge.data_string'];
      console.log(result['com.symbol.datawedge.label_type']);
      console.log(codeString);
      setScannedCodes((s) => [...s, codeString]);
    });

And its now scanning & reflecting all barcodes perfectly on hardware trigger press. Hope what I have done is the right way to do it. Please do let me know if its not, and again thank you so much for your help. Appreciate mate!

[darryncampbell]

Looks good 👍 glad it is now working.