Getting started with NFC in websites | chrome 81's new coolest update

Posted by Adarshreddy Adelli

Sunday, May 24, 2020

Well, somehow this new chromium update has filled my todo list for this week. Among this NFC support is quite interesting for me.  If you are new to this term, let me provide some short info for you. NFC stands for Near Field Communication, which is used to transport a small amount of data between devices that are less than 10 cm. If you have ever used Google Pay for contactless payments then you have used NFC.

This could help us to write unique features for a website, like for an event website we could scan the NFC tags during the event. But don't expect to build websites for peer to peer communication mode because here it is restricted to NDEF(NFC Data Exchange Format) itself. And mostly this is only supported by NFC enabled devices like android. I thought this would help me to read NFC based credit cards on the web.

Enable NFC using Chrome flags:

As NFC is in origin trial in chrome 81 enable it using chrome flags chrome://flags/#experimental-web-platform-features

Scan an NFC tag:

We start the scanning by calling  scan() method from NDEFReader object. There comes a pop up for user permission.

Now reading the message

We can also read the message  of certain media types using mediaType in scan() for example mediaType: "application/*json" for reading json data.

Writing to NFC tag:

We can write to NFC tag by calling NDEFWriter() method.

We have come to the end! Thank you, see you with the next post.

Adarshreddy Adelli Sunday, May 24, 2020 javascript web development