Web steps closer to baking-in support for NFC payments and data swapping

The web standards body W3C has published a draft specification for an API to allow web apps to use NFC-enabled hardware in mobile devices.
Written by Nick Heath on

The web is steadily gaining new features as it moves from being an online library of documents to a platform for computing.

The latest technology getting ready to be added to the web is support for the short-range wireless communication standard Near Field Communication (NFC), which allows data to be transferred between NFC-enabled devices about 1cm or so apart.

Though NFC is not in widespread use, it is starting to be used to allow shoppers to rapidly pay for goods by touching smartphones and smart cards to shop terminals, with payment systems being rolled out by the likes of handset maker Samsung and payment provider Visa.

The technology is also used for sharing contacts, web links or other data between phones and for transferring data stored on NFC-enabled tags onto mobile devices, for example a poster for an event containing an NFC-enabled tag that can automatically load the event website when touched by an NFC-enabled phone or tablet.

Support for NFC is found in a wide range of modern phones, including handsets from BlackBerry, HTC, LG, Motorola, Nokia, Samsung and Sony. While various Windows Phone and Android handsets have supported NFC-enabled features in native apps for some time, iPhones lack the necessary hardware to use NFC.

Support for NFC-enabled transactions is currently being added to the web by the standards body W3C, which this week published its first public working draft of a specification for an API to allow web applications to access NFC devices.

When implemented the spec would allow web pages and apps to read and write to NFC tags; to send and receive messages between NFC-enabled devices and provide a way to initiate a wireless connection via wifi or Bluetooth.

The API would enable a range of capabilities for web sites and apps such as tapping two devices together to initiate a two player game; tapping devices to share data such as coupons or contacts; and tapping a device to read a message from an NFC tag.

Other computing platforms designed to run HTML5 web apps outside the browser, such as Firefox OS and Tizen, already provide APIs that add various NFC-enabled capabilties to web apps.

The specification for the API is a working draft, which means it may have significant differences from the specification that is agreed upon as a W3C endorsed standard. Under the current timetable for the spec it appears as if it won't be endorsed as a W3C standard until next year

A closer look at the NFC API

The draft spec gives an example of how a developer could use the web API to write a message to an NFC tag using Javascript.

The spec introduces the NFCManager, an interface that is exposed via HTML's navigator object. The interface defines access to NFC functionality and offers methods to control local NFC behavior, such as polling for targets.

First the developer creates an NDEFRecordText object that will set the message that is to be written to the NFC tag. When calling the object's constructor three arguments are passed in: first, the message to be written; second, the language code; and third, the character encoding. The NDEFRecordText object is assigned to the variable hello. 

           var hello = new NDEFRecordText("hello world", "en-US", "UTF-8");

In the example the developer next sets the ontagfound event handler, an attribute of NFCManager, to determine what instructions should be carried out once a new NFCTag object is detected by the NFCManager and it fires off the tagfound event.

The ontagfound event handler is set to first write 'NFC Tag found!' to the console. Next the NFCTag object stored in the tag property of the captured tagfound event e is assigned to the variable tag. The method writeNDEF(), part of the NFCTag object assigned to the variable tag, is then called. This method writes a message to the physical NFC tag associated with the NFCTag object that is referenced by the variable tag. The contents of the message are set by a new NDEFMessage object that is passed as an argument to writeNDEF(). The constructor for the NDEFMessage object is passed an argument that sets the actual contents of the message to be written to the tag, in this case the 'hello world' string that was passed to the NDEFRecordText object, which was assigned to the variable hello earlier. A Promise object is returned by writeNDEF() that will notify the caller of the success or failure of the operation.

           navigator.nfc.ontagfound = function(e) {

               window.console.log('NFC Tag found!');

               var tag = e.tag;

               tag.writeNDEF(new NDEFMessage([hello]));


Next the NFCManager method startPoll() is called, which starts the device's NFC hardware polling for NFC tags or peer devices. The method returns a Promise object that notifies the caller that the NFC hardware is now polling. The catch() method of the returned Promise is also called to append a rejection handler to the Promise object that will print any resulting error message to the console.

           navigator.nfc.startPoll().catch( function(e) {



Further reading on web development


A United Airlines pilot made a big speech to passengers. Not everyone will love it

A United Airlines pilot made a big speech to passengers. Not everyone will love it

Dear American Airlines customers, your pilot today is a United Airlines trainee

Dear American Airlines customers, your pilot today is a United Airlines trainee

An Apple employee told me the truth about the M2 MacBook Air (that was the problem)

An Apple employee told me the truth about the M2 MacBook Air (that was the problem)