NFC Tags are used extensively in agri-tech, warehouse, and logistics operations to track real-life objects.

With COVID-19, contactless technology has acquired importance in commercial and consumer applications. We see a need to scan NFC tags with mobile applications beyond the above well-known industrial applications.

Image for post
Image for post

Cordova

Cordova is a cross-platform mobile framework for apps in Android and iOS. Building a Cordova mobile app is easy for web developers as it uses the standard HTML, CSS, and JavaScript technologies. One use either plain JavaScript or one of the more expressive Single Page Application (SPA) frameworks, such as React, Vue, or Angular.

While Cordova may seem like a browser packaged in a mobile app, it is quite powerful in contactless technology in general and NFC in particular.

Cordova and NFC

The PhoneGap NFC Plugin provides a simple way to read and write NFC tags using the NDEF format for data.

In passing, we should mention that PhoneGap is a now-defunct version of Cordova, provided at some point by Adobe.

Reading NFC with Cordova

Image for post
Image for post

We used it in a Cordova mobile app, built using Vue.js with Vuetify for the user interface.

A UI component for reading NFC is activated with a button click,

<v-card-actions>
<v-btn flat color="orange" v-on:click="scanNFC()">Scan NFC</v-btn>
</v-card-actions>

The function scanNFC first checks if NFC is enabled. If it is disabled and NFC is available on the device, it triggers the phone Settings app to allow its NFC sensor to interact with NFC tags.

window.nfc.enabled(
() => {
// NFC enabled
this.registerTagEvent()
},
(error) => {
if (error === 'NFC_DISABLED') {
// Trigger the phone settings to enable the NFC settings
window.nfc.showSettings()
} else if (error === 'NO_NFC') {
navigator.notification.alert('Cannot scan NFC', () => {}, 'No NFC', 'OK')
}
}
)

If NFC is enabled, we register to listen to it:

registerTagEvent () {
window.nfc.addNdefListener(
this.displayNDEF,
() => {
console.log('succeess registering ndef listener')
},
(error) => {
console.log('failure registering ndef listener', error)
}
)
}

The listener, displayNDEf decomposes the NDEF message:

displayNdef (nfcEvent) {
// Decode tag data from the plugin
let tag = nfcEvent.tag
let tagId = window.nfc.bytesToHexString(tag.id)
let message = window.nfc.bytesToString(tag.ndefMessage[0].payload)
}

Generally, in Vue.js, one should clean listeners when leaving the component. But for NFC, there is an additional important reason to do it. We do not want to keep reading the nearby NFC tag once we leave the view. So we add a lifecycle hook,

deactivated () {
this.unregisterTagEvent()
},

unregisterTagEvent () {
// Test if the plugin is defined
if ((typeof nfc) !== 'undefined') {
window.nfc.removeNdefListener(this.displayNdef)
}
},

Written by

Open source, Mobile, Web, Cloud, Server - Independent Information Technology and Services Professional http://yoramkornatzky.com kornatzky@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store