projects_web_nfc.png
Web NFC scanning with a mobile phone (via the WebNFC Community Group)

Near Field Communications (NFC) has been part of mobile phones since 2012, when Google launched the first NFC-enabled phone, the Google Nexus S. Most Android phones have NFC reading technology. Apple added their NFC technology in 2014 with the iPhone 6/6+ but tag reading is limited to the iPhone 7 and newer. Information on how to enable your phones to read NFC tags is here.

While the primary use of NFC technology today is to make electronic payments, reading and writing NFC tags is certainly possible with the proper software and compatible tags.

In May 2021, Chrome for Android 91 came out - that and subsequent versions supports Web NFC – any web developer can experiment and use NFC from simple HTML pages (rather than an app). Apple’s Safari and other browsers may provide limited support beyond Chrome (see this page for current test suite results).

Web NFC lowers the barrier to play for the developers and – more importantly – NFC functionality can now be part of the web: no software installations required.

What is Web NFC

NFC stands for Near Field Communications and is a short range wireless technology operating at 13.56 MHz. Short range really means short range: in order to communicate, the devices have to be just a few centimeters apart or less.

There are four operating modes defined by the NFC Forum: reader/writer, peer-to-peer, card emulation and wireless charging. Of these four modes, only the first one – reader/writer – and only the so-called NDEF specification - is supported by Web NFC. NDEF is the NFC Data Exchange Format and describes a standardized way to encode data onto NFC tags and read it back. For example, it defines how text is encoded or how URLs can be encoded in a byte-saving manner.

So just be clear: you will not be able to emulate a credit card with NFC for in-store payments, nor will you be able to “turn on NFC wireless charging” via Web NFC. But everything that deals with reading and writing little snippets of data to NFC tags in the standardized NDEF format is in.

Parts

The following Adafruit parts were used to test Web NFC functionality:

Hand brings phone close to breakout board, and shows phone recognizing an RFID tag
This RFID tag is really unique: it works with mobile phones just like other RFID tags, but you can reprogram it over I2C. The tag shows up as an ISO/IEC 15693 (13.56MHz) chip which is...
$3.95
In Stock

NTAG203/213 Modern Tags

Rubber bracelet with round disc inside
This is a blank 13.56MHz RFID/NFC Bracelet with an NTAG203 chip - often used for train/bus passes, information sharing,...
$3.95
In Stock
Blank white RFID/NFC card
This is a blank 13.56MHz RFID/NFC Card with an NTAG203 chip - often used for train/bus passes, information sharing, contactless payment, but also...
$2.95
In Stock

To test Web NFC as of the date of this guide (August 2021), the author used a Samsung S21 Ultra phone running Android 11 and Chrome 93.0.4577.15 Beta. If you wish to replicate this using an iDevice and/or another browser, see the compatibility tests link on the Reference page.

projects_Untitled.jpg
Sample JavaScript code to write text to an NFC card

JavaScript

Web NFC can be implemented in a web browser via a scripting language, which for the web is most often JavaScript. Sample code snippets can be found in the article here and in the specification document.

Test Web Page

Sven Haiges at SAP Customer Experience Labs has developed a test web page for reading and writing tags using NDEF. For testing Web NFC, that web page will be used with the tags gathered from the Parts List.

In the video below, The Adafruit Adafruit ST25DV16K I2C RFID EEPROM Breakout is read showing the URL of the product page (https://www.adafruit.com/product/4701). After that, an NDEF card tag is read, then the text "Hello Office of the CTO!" is written to the tag by the test page and then read back.

Every time a tag is read, there is a faint sound and haptic feedback to know the tag has been read.

If you get an error that NDEF is not available, ensure that NFC is enabled in your operating system settings and that you are using the latest browser.

Have fun experimenting with reading and writing to NDEF NFC tags with Web NFC. Of you come up with some projects using Web NFC, tag @Adafruit on social media or at https://forums.adafruit.com/.

Here are resources to learn more about the technology discussed in this guide:

Compatibility with Browsers

There is a chart (linked by the Web NFC Group Report 31 document) which tests the 4 major browsers for compatibility with Web NFC tests suites. Chrome, Edge, Firefox, and Safari are tested.

See the chart on the web page here for the latest test results.

This guide was first published on Aug 03, 2021. It was last updated on 2021-08-03 16:23:49 -0400.