Read Write NFC Tags In Javascript (Simple Examples)

Welcome to a tutorial on how to read and write NFC tags in Javascript. Yes, you read that right. It is totally possible to work with NFC tags in web apps – Read on for the examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • Take note that https:// and permission access is required for Web NFC to work properly.
  • Web NFC is still in the experimental phase at the time of writing – It may change over time.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

JAVASCRIPT NFC

All right, let us now get into the examples of reading and writing NFC tags in Javascript.

 

1) READ & WRITE TO NFC TAGS

1A) THE HTML

1-read-write.html
<!-- (A) NFC TAG ACTIONS -->
<div id="demoNFC">
  <input type="text" id="demoT" value="Hello World" required>
  <input type="button" id="demoW" value="Write" disabled onclick="nfc.write();">
  <input type="button" id="demoR" value="Read" disabled onclick="nfc.read()">
</div>
 
<!-- (B) "CONSOLE MESSAGES" -->
<div id="demoMSG"></div>

First, let us start with a little bit of the HTML interface. This should be pretty self-explanatory.

  • <input id="demoT"> Write this text into the NFC tag.
  • <input id="demoW"> Engage NFC write mode.
  • <input id="demoR"> Engage NFC read mode.
  • <div id="demoMSG"> Well, debugging is still a pain on Android devices… You have to enable developer mode and connect to a PC to show console messages. So this little section will show the “debug messages” without the need to connect to a PC.

 

1B) JAVASCRIPT – INIT

1-read-write.js
var nfc = {
  // (A) INIT
  hTxt : null, // html data to write
  hWrite : null, // html write button
  hRead : null, // html read button
  hMsg : null, // html "console messages"
  init : () => {
    // (A1) GET HTML ELEMENTS
    nfc.hTxt = document.getElementById("demoT"),
    nfc.hWrite = document.getElementById("demoW"),
    nfc.hRead = document.getElementById("demoR"),
    nfc.hMsg = document.getElementById("demoMSG");
 
    // (A2) FEATURE CHECK + GET PERMISSION
    if ("NDEFReader" in window) {
      nfc.logger("Ready");
      nfc.hWrite.disabled = false;
      nfc.hRead.disabled = false;
      nfc.hReadOnly.disabled = false;
    } else { nfc.logger("Web NFC is not supported on this browser."); }
  },
 
  // (B) HELPER - DISPLAY LOG MESSAGE
  logger : msg => {
    let row = document.createElement("div");
    row.innerHTML = msg;
    nfc.hMsg.appendChild(row);
  },
  // ...
};
window.onload = nfc.init;

The first 2 sections of the Javascript do nothing more than “boring initialization”.

  • init() Runs on window load. Gets all the HTML elements, checks if Web NFC is supported, and enables the HTML interface accordingly.
  • logger() A helper function to display a message in <div id="demoMSG">.

 

 

1C) JAVASCRIPT – WRITE TO NFC TAG

1-read-write.js
// (C) WRITE NFC TAG
write : () => {
  nfc.logger("Approach NFC Tag");
  const ndef = new NDEFReader();
  ndef.write(nfc.hTxt.value)
  .then(() => nfc.logger("Write OK"))
  .catch(err => nfc.logger("ERROR - " + err.message));
},

No sweat, ndef.write() is all you need. This simple example writes a flat string into the NFC tag, but NFC tags actually offer a lot more… Will go through more below.

 

1D) JAVASCRIPT – READ FROM NFC TAG

1-read-write.js
// (D) READ NFC TAG
read : () => {
  nfc.logger("Approach NFC Tag");
  const ndef = new NDEFReader();
  ndef.scan()
  .then(() => {
    ndef.onreadingerror = err => nfc.logger("Read failed");
    ndef.onreading = evt => {
      const decoder = new TextDecoder();
      for (let record of evt.message.records) {
        nfc.logger("Record type: " + record.recordType);
        nfc.logger("Record encoding: " + record.encoding);
        nfc.logger("Record data: " + decoder.decode(record.data));
      }
    };
  })
  .catch(err => nfc.logger("Read error - " + err.message));
}

No sweat, just use ndef.scan() to read an NFC tag. But a little bit of text decoding is required.

 

 

2) NFC RECORD FORMATS

2-write-types.js
ndef.write({
  records: [
    { recordType:"text", data:"Hello World" },
    { recordType:"url", data:"https://code-boxx.com/" },
    { recordType:"url", data:"sms:12345678" },
    { recordType:"url", data:"tel:12345678" },
    { recordType:"url", data:"mailto:jon@doe.com?subject=Title&body=Body" },
    { recordType:"url", data:"geo:35.698723,139.772639" },
    { recordType:"empty" }
  ]
})
.then(() => nfc.logger("Write OK"))
.catch(err => nfc.logger("ERROR - " + err.message));

Apart from plain text – We can also write URLs, SMS, telephone, email, geolocation, and this list is not even exhaustive. NFC is capable of WIFI records (tap to connect to WIFI network), vCard, Bitcoin wallet, opening an app, smart posters, and even storing entire files.

P.S. Yes, an NFC tag is capable of storing multiple records.

P.P.S. To “erase” an NFC tag, just write a single empty record.

 

3) SET NFC TAG TO READ-ONLY

3-read-only.js
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => nfc.logger("Tag is now read only."))
.catch(err => nfc.logger("ERROR - " + err.message));

To “lock an NFC tag”, run the ndef.makeReadOnly() function. Take extra note though, this is permanent. There is seemingly no way to make the tag writable again, at least in Web NFC.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

At the time of writing, Web NFC is pretty much an experimental feature supported on Android Chrome and Baidu browser only. It can also be enabled in Opera by toggling the “enable experimental features” flag.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *