Scandit logo, to the homepage

A Developer’s Guide to Adding a Cordova Barcode Scanner

| Developers

Share

x

facebook

linkedin

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 pre-built component of the Scandit Cordova Barcode Scanner SDK.

PDF417 with DataMatrix with SparkScan

Start Barcode Scanning with Cordova

Add enterprise-class Cordova barcode scanning in minutes with SparkScan

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.

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.
  • 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.

Supporting different scan modes

Providing options to switch between scanning single and multiple barcodes help 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 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.
Close up damaged label with SparkScan boxes on shelves

Testing the Scandit Cordova Plugin is easy

Integrate with just a few lines of code or use our samples

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 app, performance is as much about how your plugin is written as it is about the code you write around it.

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. Even a 95% success rate may not be good enough – you should look for greater than 99% success.
  • Speed: A Cordova barcode scanner that helps users capture and process barcodes fast means accelerated business operations.
  • Start-up time: To avoid frustrated users and slower workflows, your barcode scanner should support a “standby mode” that minimizes camera start-up delays between scans.
  • Scanning barcodes in degraded conditions: A barcode may be torn, obscured, wrapped in plastic or moving — your library should work under all these scenarios.
  • Field-of-view and distance: Scanners must handle barcodes on items of various sizes, shapes and distances from the camera. The video below shows how Scandit helps users scan tiny electronic shelf labels (ESLs) comfortably without bending over or crouching down.

2. Low-light environments

Lighting conditions in the real world vary widely between dark to brightly lit. Consider your stockrooms, back-of-store areas, or nighttime deliveries. Your chosen Cordova plugin should maintain speed and accuracy under these conditions.

3. Large device fleets with diverse models

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.

The Scandit Barcode Scanner SDK is built on a C/C++ foundation, ensuring the core barcode scanning features are loaded efficiently in the background and consume minimal system resources.

4. 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 and Android), React Native, Flutter, Capacitor, and Titanium.

Sparkscan Samsung device

How do I create a barcode scanner with Cordova?

SparkScan, part of the Scandit Data Capture SDK, allows developers to add pre-built and user-friendly barcode scanner capabilities to 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. It provides a pre-built scanning interface that floats on top of any smartphone application, reducing your development time and solving many common scanning pitfalls for you.

The SparkScan interface is customizable for different needs. For example, the plugin provides options for audio cues, haptic feedback, triggering scans from the phone’s physical button, and scanning in left-handed mode.

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

Graphic showing a React Native barcode scanner UI using the Scandit SparkScan pre-built barcode scanning component.

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 Scandit Barcode Scanner SDK Cordova samples on GitHub.

If you get stuck, visit our Cordova documentation for detailed help, our API reference, and instructions on using advanced features like adjusting scan areas, 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 11.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.

Although not covered here, the Scandit Barcode Scanner SDK also supports scanning multiple barcodes at once (batch scanning). The instructions for setting up and using this capability are located in our Batch Scanning and AR documentation.

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

The Scandit Barcode Scanner SDK depends on WKWebView on iOS, so you’ll manually have to 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 git 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 @<version>. You can also specify the version #<version> for GitHub dependencies.

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="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 Scandit Barcode Scanner SDK, 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, the Scandit Barcode Scanner SDK uses content providers to initialize the scanning capabilities properly. If your own content providers depend on the Scandit Barcode Scanner SDK, choose an initOrder lower than 10 to make sure the SDK 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 register one or more 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).

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 the 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.

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);

SparkScanListener.didScan() is called when 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.

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 →