Check out a free preview of the full A Tour of Web Capabilities course
The "Web NFC" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:
Max demonstrates the Web NFC API by reading data from an NFC card and an Apple Airtag. The data transmitted depends on the tag/device. Developers process the data manually using the "reading" event.
Transcript from the "Web NFC" Lesson
[00:00:00]
>> NFC is another cool API that is also compatible only with Chrome. NFC is Near Field Communication. It will let you access to Tap to Pay, Tap to Share, or to whatever. You can be here and we can have an NFT tag near the wall, and you, on a web app, you put your phone near the wall, and you can get information.
[00:00:31]
Something that you can also get with a QR code, or you can actually change data. Because the API gateway you are technically and you know more about this. The web NFC API is just a subset of everything that can be done with NFC. You can only access tags that are close to you.
[00:00:51]
There are many technologies when this case tags are really less than 10 centimeters or 4 inches. And is limited only to an aspect known as NDEF, that is NFC data exchange format. That is like the simplest protocol that we have on NFC that will let you read data from a tag and write data to a tag.
[00:01:15]
So we can read tags, we can write tags on compatible browsers, because some browser will tell you, no, no, only read, only write,okay. So and then you can if you want to do low-level IO operations like execute code that sometimes is available on some tags, that's not possible with the spec.
[00:01:40]
I know it sounds abstract, so we can try this. So I have some ways to try this. I have here with me two NFC tags. This one is an NFC tag, and this one you may know, that's an air tag from Apple. It has many things, and one of the things, it's an NFC title.
[00:02:04]
Can we read that? Yeah, we need Chrome on Androids. So this doesn't work on iOS yet. So if I open my code here, my browser, we have here web NFC. So you can see I can write or read I want I'm going to scan. So if you hit scan, you can see a scan has started, scan started.
[00:02:32]
Do we see any massage any permission? No, now this is my NFC tag. I'm going to do this and you can see it read a serial number. Let's do it again. Also the phone vibrates when that happens. So I also have one record that you can read if you want now with the year tie, I'm going to do this come on air tag.
[00:03:03]
It was working before just in case this can end. Yeah, there we are, it says cannot read data from the NFC tag. Let me refresh of maybe I'm moving too fast, there we are. Yeah, I was moving too fast. So I'm bringing the serial number. Okay, that's the air tag.
[00:03:28]
That's the other tag I have. So, that's the first thing that you can do. Those tags those serial numbers are unique. So, worldwide, right? So, the idea is that, what do you wanna do with that? Well, at least you know where the user is tapping. So, if you have a database of serial numbers, you know where the user is tapping, and then you can start something in your app.
[00:03:57]
You can unlock a feature. It's a treasure hunt. So then you go and you know where the user is. So apart from reading, just the serial number that's the first step. You can read other data that tag might contain. But for that you need to understand the tag in the case of Apple, you won't be able to read anything from Android or from an external device.
[00:04:27]
The only thing you can read is the serial number but with that, that's enough. Because you know the tag, okay, makes sense. So, by the way, you can also read the phone number and information from that the owner can register from Android. But in terms of what I can do with an air tag from WebNFC typically it's just the serial number to use as a way to detect where we are.
[00:04:54]
There are cheaper things like this is cheaper than an air tag. And basically that's all. The idea is tap to pay, tap to activate things. It can be in a museum and tap near places where it will give you more information or it can start an audio transcript of what's going on, okay, makes sense?
[00:05:19]
An audio tour. So the API is not complicated, we can see it here. So we create a new NDEFReader, we start on a scan, and then we have two event listeners, reading error. For example, when I was passing the air tag too fast, it was actually executing the error reading error and then you have reading and you will get a message and the serial number.
[00:05:50]
And after that you can also start a read operation over services or you can start the write operation in case the hardware allows you to write data. That's all for web NFC. Today it's working on Android mainly because you don't have an NFC reader around your computer and you won't use your computer to touch, I don't know, on the metro, something like that.
[00:06:15]
But it works on the phone. Have in mind that, if you wanna write data, you need to understand what you're writing and how. For example, it can be a hotel key, like the hotel room key. If it's too old system, maybe it's easy to hack. You can read the tag and write the same tag on another thing, but the most modern system, they have security in place.
[00:06:40]
So there are some encryption going on. So it's not gonna work, so simple. Sometimes there is an encryption over the serial number so when you try to just clone the information to another device it doesn't work because it's failing in the validation process, okay. But if you know NFC and if you are on that field You can do that from the web now.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops