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

2.9k Views Asked by At

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

1

There are 1 best solutions below

0
On

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.