How do I use the Web NFC API to read and write NFC tags from my web application

Make sure your web application is running on a compatible browser.

In order to use the Web NFC API to read and write NFC tags from your web application, you must first make sure that your web application is running on a compatible browser. The Web NFC API is currently supported by Chrome, Firefox, and Edge browsers. To check if your browser is compatible, you can visit Mozilla's Web NFC API page. Once you have confirmed that your browser is compatible, you can move on to the next step of including the Web NFC API in your web application.

Include the Web NFC API in your web application

In order to use the Web NFC API to read and write NFC tags from your web application, you need to include the API in your web application. This can be done by adding the following code snippet to your HTML page:

Once you have included the API, you can start using it to read and write NFC tags from your web application. For more information on how to use the Web NFC API, please refer to the official Web NFC documentation.

Create an Event Listener for the NFC Tag

To use the Web NFC API to read and write NFC tags from your web application, you need to create an event listener for the NFC tag. This event listener will be triggered when an NFC tag is detected by the browser. To do this, you need to include the Web NFC API in your web application and make sure it is running on a compatible browser. Once you have done this, you can use the navigator.nfc.addEventListener() method to create an event listener for the NFC tag. This method takes two parameters: a string that specifies the type of event to listen for, and a callback function that will be executed when the event is triggered.

The type of event you can listen for is either ndef-discovered, which will be triggered when an NDEF message is detected, or tag-discovered, which will be triggered when any type of tag is detected. The callback function will be passed an object containing information about the tag that was detected, such as its type and ID. You can then use this information to read or write data to the tag using the readNDEF() and writeNDEF() methods, respectively. The readNDEF() method takes a single parameter, which is an array of myNdefRecord objects that specify what data should be read from the tag.

readNDEF()

The readNDEF() method of the Web NFC API allows you to read data from an NFC tag. To use this method, you must first make sure your web application is running on a compatible browser. Then, include the Web NFC API in your web application and create an event listener for the NFC tag. After that, you can call the readNDEF() method to read the data from the tag. The method returns a Promise that resolves with an array of NDEFRecords. You can then use the myNdefRecord variable to access the data from the tag.

For more information on using the readNDEF() method, please refer to the official documentation on Mozilla Developer Network. You can also find code examples and tutorials on using the Web NFC API on various websites such as Tutorials Point.

writeNDEF()

The writeNDEF() method of the Web NFC API allows you to write data to an NFC tag. This method takes an NDEFRecord object as an argument, which contains the data you want to write to the tag. To use this method, you must first create an NDEFRecord object with the data you want to write. You can do this by using the myNdefRecord constructor, which takes a byte array as an argument. Once you have created your NDEFRecord, you can pass it to the writeNDEF() method, which will write the data to the NFC tag.

let myNdefRecord = new NDEFRecord(data);
nfc.writeNDEF(myNdefRecord);

For more information on how to use the Web NFC API, please refer to the official documentation at https://developer.mozilla.org/en-US/docs/Web/API/Web_NFC_API.

myNdefRecord

The myNdefRecord is an object that contains the data you want to write to the NFC tag. It is a required parameter for the writeNDEF() method. The myNdefRecord object must contain the following properties: tnf, type, id, and payload. The tnf property is a number that indicates the type of record, the type property is a byte array that indicates the type of data, the id property is a byte array that contains an identifier for the record, and the payload property is a byte array that contains the actual data. You can find more information about creating an NDEF record in the official Web NFC API documentation.

To create an NDEF record, you can use the following code example:

let myNdefRecord = {
  tnf: NDEF.TNF_EXTERNAL_TYPE,
  type: new Uint8Array([0xD2, 0x76, 0x00, 0x00, 0x85, 0x01]),
  id: new Uint8Array([0x01]),
  payload: new Uint8Array([0x02])
};

Useful Links