A Developer’s Guide to Adding a Cordova Barcode Scanner

When integrating barcode scanning into your Cordova application, you must go beyond basic plugins and camera settings to make it efficient and effective for users. Implementing helpful user experience (UX) elements and tailoring performance for real-world use increases adoption rates and ensures productivity, customer, and other business goals are met.

This blog explains the key UX and performance principles for successfully adding a Cordova barcode scanner to iOS and Android applications. It also includes a step-by-step tutorial for implementing these principles using SparkScan for Cordova, a pre-built barcode scanning component that puts a minimalistic UI on top of any Cordova application.

To create a Cordova barcode scanner, we’ll walk through these steps:

• Add the SparkScan SDK for Cordova to your project.
• Create a Data Capture Context instance.
• Change supported symbologies for your use case.
• Set up and customize the user interface.
• Register a listener for new barcode scans.

If you want to try barcode scanning on your device now, download and run one of our Cordova samples.

Start Barcode Scanning with Cordova

Add enterprise-class Cordova barcode scanning in minutes

Try for free

Why UX matters for Cordova barcode scanning

There are numerous UX approaches to take when building your Cordova barcode scanning capability. If you don’t know how to invest your time to gain the biggest benefit, you may end up with unhappy users and constant fixes after release.

Getting navigation, interaction, and feedback right helps users do their jobs. Conversely, getting it wrong leads to frustration, failure, and complaints. Our blog on how barcode scanners work explains the scanning hardware and software complexities that lead to integration and usability challenges (it’s a technical blog like this one).

Key UX workflows for Cordova barcode scanning

Understanding the following UX workflows helps you build a Cordova barcode scanner that works for your users rather than holds them back.

• The last thing users want to worry about is navigating complex menus or waiting for your Cordova barcode scanner plugin to start. Good UX requires a fast and seamless transition into scanning mode regardless of the device platform’s capabilities.
• To improve ergonomics, allow tapping anywhere on the camera interface to start and resume scanning. If a button is preferred, make the touch area large enough for comfortable repeat use.
• UI elements for barcode scanning shouldn’t make it harder to use existing app workflows. Ensure the capture button, viewfinder, and scan results positions don’t obscure critical app controls.
• Assist with aiming by implementing an appropriately-sized viewfinder to indicate that scanning is live and indicate how far to hold the camera.
• Restrict the scan area or use an aimer viewfinder when barcode are crowded.

The following video demonstrates how SparkScan for Cordova enables you to build rich UIs without worrying about UX design or interference with existing app controls.

This example shows a collapsed floating button that users swipe or tap to open a camera preview for barcode scanning. They can then adjust the preview’s location to directly behind the hardware camera for more accurate aiming and capture.

Supporting different scan modes

Providing options to switch between scanning single and multiple barcodes helps users work more efficiently when the number or configuration of barcodes varies (like a shipping warehouse or retail store):

• Single scan: Users trigger scanning for every barcode, providing greater control over their scanning experience.
• Continuous scan: Users trigger the scanner once and your app scans multiple barcodes without further interaction. This accelerates workflows in situations where there’s little risk of unwanted or unintentional scans.

Strong and clear feedback

Your Cordova app should provide immediate and unambiguous feedback on a barcode scan’s success or failure. Slow responses lead to user frustration, and unclear results may lead to missing or incomplete data on the backend.

A combination of feedback techniques can be used to help the user, such as:

• Drawing a brush overlay at the location of the detected barcode on the camera view, confirming to the user that the intended item was scanned.
• Playing sound, vibrating and haptic feedback on capture.

Advanced assistive features

AI and newer image processing techniques enable smart assistive features that weren’t possible even five years ago. These features take in real-world factors, such as barcode label distance, user behavior, and the locations of multiple barcodes, to guide users to the right barcode without extra effort.

For example, all Scandit software includes context-based AI scanning that reduces unwanted scans by up to 100%. As shown in the following video, this Smart Scan Intention feature uses contextual data, such as device movement and barcode characteristics, to capture the correct barcode even with imprecise aiming.

Which Cordova barcode scanner is best?

An open-source Cordova barcode scanner may not be the best choice for business-critical environments. Warehouses, retail stockrooms, and last-mile delivery have high employee performance goals. Low light, awkward scan angles, torn barcodes, and poor internet connectivity can impede scanning success.

Like any Cordova app, performance is as much about how your plugin is written as it is about the code you write around it.

Testing the Scandit Cordova plugin is easy

Integrate with a few lines of code or use our samples

Try for free

Here are some considerations for choosing your Cordova barcode scanner plugin for effective real-world operation.

1. Performance

Different device models and OS versions have different impacts on barcode scanning performance. Consider the following requirements to ensure scanning works effectively on your devices:

• Accuracy: Barcode scanning for inventory management, asset tracking, and similar operations requires a Cordova plugin that users can rely on for extremely high levels of accuracy. For high-volume operations, look for advanced features such as context-based scanning to capture the right data on every scan and reduce the number of unwanted scans.
• Speed: A Cordova barcode scanner that helps users capture and process barcodes fast means accelerated business operations.
• Multiple barcode capture: Users often scan multiple barcodes in quick succession, so why not give them the ability to do it in one shot? Plugins built for single scanning can’t distinguish between multiple labels in the camera’s field of view or track them over time. Software built for multiple barcode capture, such as Scandit MatrixScan, identifies and tracks tens of codes simultaneously without getting confused by device movement or duplicates.
• Scanning barcodes in degraded conditions: A barcode may be torn, obscured, under low-light conditions, wrapped in plastic, or moving — your library should work under all these scenarios.
• Multi-modal data capture: Leading-edge plugins that can extract barcode and text data simultaneously reduce overall scan times and errors due to manual data entry. Scandit’s Cordova Barcode Scanner SDK includes multi-modal data capture, making data entry up to seven times faster than scanning labels separately.
• Field-of-view and distance: Scanners must handle barcodes on items of various sizes, shapes and distances from the camera. A scanning plugin like Scandit helps users scan tiny barcodes and electronic shelf labels (ESLs) comfortably without bending over or crouching down.

Our blog on optimizing barcode scanning app performance lists the features you should compare when selecting a plugin that stands up to real-world operations.

2. Device support

Enterprises often have a diverse fleet of employee devices — especially in Bring-Your-Own-Device (BYOD) situations. These will have different camera specifications and processor architectures.

Your barcode scanner plugin must be designed to support efficient operations on different platforms. They could range from the latest multi-core smartphone to a legacy, resource-constrained device.

You can see SparkScan’s system requirements here and we list some performance tests below to gauge how your Cordova scanning solution performs.

3. Support for different development frameworks

For developers working across platforms, check that your barcode scanner component supports it. Scandit’s barcode scanning products are also available for Native iOS, Native Android, JavaScript, Xamarin and Xamarin Forms, .NET (iOS/Android and MAUI), React Native, Flutter, Capacitor, and Titanium.

4. Advanced scanning features

As users scan more barcodes under different situations, they will inevitably ask for improvements. Based on their performance, managers will ask for the app to do more. The effort you spend to fine-tune barcode scanning is directly related to the features that come with the plugin from the start.

Choosing a Cordova barcode scanner plugin that scales to different business needs makes it easier to satisfy changing business needs. Ideally, you find one that integrates fast at the start and extends with minimal effort when you need to.

Scandit’s Cordova barcode scanning library includes these features:

• Support for scanning and tracking multiple barcodes at once with MatrixScan. This reduces the time it takes to capture inventory, pick and pack items, and other high-volume barcode scenarios.
• Smart Label Capture for multi-modal data capture that extracts data up to 7 times faster from labels. This could be any combination of barcodes and printed text, such as pricing information, serial numbers, and item weights.
• Augmented reality (AR) with MatrixScan Find that highlights the right item among many to eliminate the need for users to “hunt and capture.”

5. Support

A Cordova app built for business use cases requires enterprise-level developer support. For your barcode scanner, look for:

• Cordova code samples to kickstart integration.
• Comprehensive and searchable documentation that includes tutorials and API reference guides.
• Regular updates to ensure you have the latest features, bug fixes, and security patches. Always check the plugin’s release notes to see how well it’s maintained.
• Options for technical help from experts familiar with barcode scanning and integration with Cordova apps.

Scandit’s Enterprise-Level Success Team helps you go from free trial to day-to-day operations in production. They can ensure your Android barcode scanning integration goes smoothly and fine-tune the application software for high-volume scanning.

6. Security and privacy

Enterprise deployments must protect sensitive information and comply with organizational security and privacy policies.

Scandit takes a security by design approach to all its software, where you have complete control over data collection and processing. This means:

• All image processing happens on he device to ensure confidentiality and high availability of scanning.
• Any data you choose to share with Scandit is encrypted during transit and at rest.
• Scandit is ISO 27001:2022 Certified and compliant with applicable privacy regulations that include GDPR and CCPA.

How do I create a barcode scanner with Cordova?

SparkScan gives you pre-built barcode scanner capabilities and a minimalistic UI that floats on top of any Cordova application.

The SparkScan Cordova barcode scanner plugin is built upon well-researched UX principles and feedback from thousands of customers across various enterprise environments. Its customizable interface includes a small camera preview and a large, semi-transparent trigger button that users can move to any screen position. When capture is completed, the preview window disappears and the trigger button collapses to free up space on the user’s screen.

The next sections explain how to use SparkScan to implement a customizable Cordova barcode scanning interface in just a few steps.

Get started with SparkScan for Cordova

Integrating SparkScan is simple: you don’t need Ionic or any additional toolkits to get started.

Follow these steps to add single barcode scanning to your Cordova app using SparkScan. You can also browse our Cordova samples on GitHub.

If you get stuck, visit our Cordova documentation for detailed help, our API reference, and instructions for deploying features like multiple barcode scanning, text capture, and augmented reality (AR).

The prerequisites for these steps are:

• The latest stable version of Cordova, Node.js, and npm.
• A project with a minimum iOS deployment target of 14.0 or higher; or an Android project with target SDK version 23 (Android 6, Marshmallow) or higher.
• A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

1. Add the SparkScan SDK to your project

We support adding our Cordova plugins to your project in two ways. The simplest way is to use npm. Alternatively, you can manually download the plugins and add them to your Cordova project.

You should always add the scandit-cordova-datacapture-core plugin first, as all other plugins depend on it.

1. If you don’t have an existing Cordova project, create a new project

> cordova create helloscandit --id "com.scandit.helloscandit"
> cd helloscandit
> cordova platform add [ios | android]

2. For iOS, add dependencies

SparkScan depends on WKWebView on iOS, so you must add this dependency if your project doesn’t use WKWebView yet.

> cordova plugin add cordova-plugin-wkwebview-engine

3. To add the Scandit Barcode Scanner SDK via npm or GitHub repo

To add our plugins via npm or GitHub repo, run these commands from your project’s root folder. In the following snippet, we’re adding ScanditBarcodeCapture API.

# npm package
cordova plugin add scandit-cordova-datacapture-core
cordova plugin add scandit-cordova-datacapture-barcode

# git repo
cordova plugin add https://github.com/Scandit/scandit-cordova-datacapture-core.git
cordova plugin add https://github.com/Scandit/scandit-cordova-datacapture-barcode.git

For npm dependencies, you can also specify a version using @<version>. You can also specify the version using #<version>.

4. To add the Scandit Barcode Scanner SDK manually

After you download the archive containing all the plugins here, unzip the archive. It includes the available Cordova plugins, including the scandit-cordova-datacapture-core plugin that all other plugins depend on.

Use the Cordova CLI to add the plugin(s) to your already existing project:

cordova plugin add <path to scandit-cordova-datacapture-core plugin>
cordova plugin add <path to scandit-cordova-datacapture-barcode plugin>

For iOS, if your project is not yet configured to use Swift, you’ll need to add the following line to your config.xml file to specify the Swift version you’d like to use:

<platform name="ios">
  ...
<preference name="deployment-target" value="14.0" />  
<preference name="SwiftVersion" value="5" />
  ...
</platform>

To update plugins, follow Cordova best practices and remove the plugins before adding the new versions:

cordova plugin remove <id of the plugin being updated>
cordova plugin add <local path, id or GitHub repo url of the plugin being updated>

5. Additional steps

When using the SparkScan you must set the camera as the frame source for various capture modes. The plugins handle the camera permissions, so you don’t need to specify anything explicitly.

On Android, SparkScan uses content providers to initialize the scanning capabilities properly. If your own content providers depend on SparkScan, choose an initOrder lower than 10 to make sure the library is ready first. If not specified, initOrder is zero by default and you have nothing to worry about. For more details, check the official Android <provider> documentation.

2. Create a new Data Capture Context instance

To add capture capabilities to your application, you must create a new Data Capture Context. The context expects a valid Scandit Barcode Scanner SDK license key during construction.

const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

3. Configure the SparkScan Mode

The SparkScan Mode is configured through SparkScanSettings, allowing you to set the supported symbologies and register the listeners that are informed whenever a new barcode is scanned.

For this blog, we set up SparkScan for scanning EAN13 codes. Change this to the symbologies for your use case (for example, Code 128, Code 39, QR code).

const settings = new Scandit.SparkScanSettings();
settings.enableSymbologies([Symbology.EAN13UPCA]);

Next, create a SparkScan instance with the settings initialized in the previous step:

const sparkScan = Scandit.SparkScan.forSettings(settings);

4. Setup the SparkScan View

The SparkScan built-in user interface includes a minimalistic camera preview and scanning UI elements. These guide the user through the scanning process.

The SparkScanView appearance can be customized through SparkScanViewSettings.

const viewSettings = new Scandit.SparkScanViewSettings();
// setup the desired appearance settings by updating the fields in the object above

Adding a SparkScanView automatically adds the scanning interface (camera preview and scanning UI elements) to your Cordova application.

See SparkScan Workflow Options for how to change the scanning mode, set camera preview behavior, and set the scanning behavior to either single scan or continuous scan.

Next, add a SparkScan View to your view hierarchy by constructing a new SparkScan view. The SparkScan view is automatically added to the provided parentView:

const sparkScanComponent = (
	<SparkScanView
		context={context}
		sparkScan={sparkScan}
		sparkScanViewSettings={viewSettings}
	/>
);

Additionally, call SparkScanView.stopScanning() in your app state handling logic. You have to call this for SparkScanView to function correctly.

componentWillUnmount() {
sparkScanComponent.stopScanning();
}

handleAppStateChange = async (nextAppState) => {
if (nextAppState.match(/inactive|background/)) {
sparkScanComponent.stopScanning();
}
}

5. Register the listener to be informed when a new barcode is scanned

To keep track of the scanned barcodes, implement the SparkScanListener interface and register the listener to the SparkScan mode.

// Register a listener object to monitor the spark scan session.

const listener = {
	didScan: (sparkScan, session, getFrameData) => {
		// Gather the recognized barcode
		const barcode = session.newlyRecognizedBarcodes[0];

		// Handle the barcode
	},
};

sparkScan.addListener(listener);

The app calls SparkScanListener.didScan() whenever a new barcode is scanned. This result is retrieved from the first object in the provided barcodes list: SparkScanSession.newlyRecognizedBarcodes. This list only contains one barcode entry.

6. Customize the scanning UI with advanced configurations

You can customize SparkScan’s UI and UX using advanced configurations. For example, you can change the colors of UI elements (i.e. icons, buttons, toolbar), the trigger button icon, the preview window’s default size, and more.

The following graphic illustrates the different ways you can adjust colors, positions, and sizes to suit different UX requirements.

Now your Cordova app is ready to scan!

How to test barcode scanning performance in Cordova

The best way to test a potential Cordova barcode scanning plugin is to run it using real-world scenarios. Whether you’re using the SparkScan or another barcode scanning library, here are several performance-testing questions to ask:

• Is there clear guidance to foster a smooth workflow and instant feedback to avoid user confusion?
• Can you scan barcodes in different orientations, such as upside down and sideways? If you flip the device upside down, can you still scan easily and successfully?
• Can you scan barcodes with reflections and glare?
• Can you scan barcodes at a distance? Are you able to zoom in and capture barcodes if needed?
• Do you receive scanning feedback in loud environments and while wearing headphones?

You can also use our sample sheet of barcodes to evaluate your app’s performance quickly and find out more about how to measure barcode scanning performance in our in-depth best practice guide.

Your Cordova barcode scanner is more than just a technical choice

Helpful UX and high performance are critical goals when selecting and implementing a Cordova barcode scanner. Fewer user frustrations and adaptability to growing business demands are far preferable to low adoption rates, bug reports, and unhappy business leaders.

Next: Dive deeper into how to make a barcode scanning app performant →