Web NFC is available on Chrome for Android.
YES. This means new capabilities for web apps.
But also endless possibilities for fun or dumb things to build. Both, preferably.
So, I tried out Web NFC for the first time => Here's a shortlist of what not to miss if you're getting started.
⛳️ My main source of information when getting started was this great post by François Beaufort. If you need any serious advice on Web NFC and detailed code examples, check it out.
Getting set up
Tags
Get NFC tags first :) You can get a pack of 10 for under 10€ on Amazon. I got them as stickers, but whatever works for you.
Note: there's no DevTools support yet to emulate NFC, so you need actual NFC tags before you can get started.
Device
- You need an Android device.
- Your device needs to support NFC. To check: open Settings and look for "NFC" or "Near Field Communication".
- Turn on NFC if it's not already on.
Chrome
You need Chrome v86+. To check what version you're using: type chrome://version in the URL bar of Chrome on your Android device.
Writing Web NFC code
- To get up and running quickly, glitch is perfect. It enables you to create a web project in your browser with no setup, and it will be instantly deployed. This is especially nice for Web NFC and other technologies you'd need to test on your phone: you can develop on your laptop with glitch, and simply reload the deployed glitch URL on your phone. ✨ tadaaa
- 💥 Gotcha: Your origin can't use Web NFC until the user has granted it permission to do so. So, your origin must request permission while handling a user gesture. One way to do this is to add a button that triggers Web NFC actions on click. The first time this button is clicked, the origin will request user permission; grant it, and you're all set. Code example.
Debugging Web NFC Code
- Use remote debugging.
💥 Gotcha: Just in case you encounter the same issues I have:
- Connecting my Android device to my development machine via a hub didn't work, but connecting it directly did.
- I'd forgotten this, since I usually do this once when setting up a new phone: to allow USB Debugging and unlock developer options, on my device, I had to use the crazy rage click way.
- Web NFC supports both read and write. As far as I know though, there's no open web app that takes care of writing for you. So, if your tags are blank and you want to get started quickly (and/or if you're not interested in implementing the writing part yourself): you may want to use a native Android app to write initial data on your tags. This one is OK.
That's it!
If you're trying Web NFC, awesome, because support for it is really new ➡️ Make sure to show support and share your feedback.
Have fun with Web NFC and uh stay hydrated 🌊
Top comments (0)