I have tried to use an Android device (Android 13, Samsung S23+) to expose a URL to other phones, so that, whenever a user taps his mobile around mine, I can send them a "Website NFC Tag" and they can click on the notification on their phones to open the URL. The test receiving device I'm using is an iPhone 14. Both devices have NFC on.
I am using Web NDEFReader()
with write()
method but I was not successful. My (React JS) JavaScript code is as follows:
class SignUpClass extends React.Component {
clickOnButton = async () => {
try {
if ('NDEFReader' in window) {
const ndef = new window.NDEFReader();
try {
await ndef.write({
records: [{ recordType: "url", data: "http://www.google.com/" }],
});
} catch {
console.log("Write failed :-( try again.");
}
} else {
console.log("Web NFC is not supported in this browser.");
}
} catch (error) {
console.log("Argh! " + error);
}
}
buttonForNfc = () => {
return <Button onClick={() => {this.clickOnButton()}}>Click me to test NFC</Button>
}
render() {
return(
<div>
{this.buttonForNfc()}
</div>
)
}
}
When I opened the page with this code the first time, there was the notification asking for NFC permissions on the webpage. This is fine. However, there is no Website NFC Tag coming on the iPhone and there's no interaction between both devices at all.
What exactly am I missing?
Thanks in advance!
What you are missing is that being a reader/writer is totally different mode to emulating a NFC Tag. Two reader/writer devices cannot communicate with each other, one has to emulate a NFC Tag.
On Android it can be a reader/writer or a emulated a NFC Tag.
On iOS a normal developer can only the reader/writer mode, only Apple and possibly selected special partners can use the hardware to emulate a NFC Tag.
Also this is only something you can do in the more native language i.e. Java/Kotlin on Android.
See https://github.com/underwindfall/NFCAndroid for a working example.