Web-NFC: How to use web-nfc in my html5 page

Question

This might be a silly question but after hours of search i could not come to conclusion.

I need to add NFC functionality to my website where user can write information to tags while on their mobiles. Code for writing to tags looks simple but i am not sure how to get started as a developer.

Found below code to write to NFC tags.

async function writeTag() {
  if ("NDEFReader" in window) {
    const ndef = new NDEFReader();
    try {
      await ndef.write("What Web Can Do Today");
      consoleLog("NDEF message written!");
    } catch(error) {
      consoleLog(error);
    }
  } else {
    consoleLog("Web NFC is not supported.");
  }
}

I created a nfc project on glitch.com , below is the link :

https://glitch.com/embed/#!/webnfc1?path=main.js%3A20%3A9

Can someone please answer following 2 questions

1 - Do i need to include any library / cdn links before writing code for web nfc since i dont have these classes(NDEFReader) in my browser when writing code 2 - Can i write and test code on my desktop ? or i have to test on an android device particularly

Web NFC is experimental at this stage and only supported by chrome for android — Liam
Hi, Thanks for your reply then how do i write code on my desktop ? do i need to write on desktop and test on android device ? — stackoverflow account
@Liam is right. caniuse.com will show you what is supported with a quick search. This doesn't seem like the kind of thing that lends itself to poly/pony-filling. — spender
@Liam an Android Emulator is no good, as the emulator does not support NFC, the only real option is a real Android device running Chrome. — Andrew

François Beaufort François Beaufort · Accepted Answer · 2021-06-17T07:51:11

Web NFC is supported for now only in Chrome for Android. It means you can open Chrome tab to https://googlechrome.github.io/samples/web-nfc/ on your Android device and scan/write to NFC tags.

Code you shared at https://glitch.com/embed/#!/webnfc1?path=main.js%3A20%3A9 is using old and deprecated version of Web NFC.

Check out https://web.dev/nfc to learn more about it.

Web-NFC: How to use web-nfc in my html5 page

1 Answers