How To Activate NFC In Android WebView Apps ⚡️

NFC (Near Field Communication) is not just about the contactless payment (like Google Pay); instead, it is a technology that enables the exchange of data between two NFC-enabled devices or cards/tags. This tutorial will cover all of the basic steps to use this technology with Android WebView apps.

To use NFC on Android WebView apps, you need an NFC-enabled device and an app that supports it. 

The NFC chip on your phone is connected to the NFC antenna, which is connected to an NFC reader, which transmits your data from the phone to a receiver on another device. It’s also possible to use the NFC chip from your phone as a Bluetooth transmitter and vice versa.

It’s easy to trigger NFC functions on Android with Java/Kotlin using Android Studio if you use the NDEF function (https://developer.android.com/guide/topics/connectivity/nfc/nfc).

And for Android WebView apps? How can they easily trigger NFC functions through the WebView element (https://developer.android.com/reference/android/webkit/WebView)?

This guide will help you develop NFC in Android WebView app using the paid NFC plugin for WebViewGold. With that, you can connect with NFC tags or cards in Java while only using WebView for the actual write/read process:

1. Download WebViewGold for Android
2. Buy the WebViewGold NFC Android Plugin (via support team)

Afterward, you can implement this HTML code in your website/web app to read an NFC card/tag: 

<a href=”readnfc://”>Read an NFC Tag</a> 

function readNFCResult(val) {

 //modify this function to do whatever you would like with the read data alert(val); 

} 

readnfc:// is the endpoint for sending the NFC read command to the mobile phone. If the read is successful, the app will call this javascript function: readNFCResult(val) 

Also, you can write a text or vCard to an NFC card/tag:

<a href=”writenfc://?value=WebViewGold.com”> Write to an NFC tag </a> 

writenfc://?value=data is the endpoint for sending the NFC write command to the mobile phone. 

You can also write contact cards (vCard):

VCARD_FN:Max Moehre_Title:Developer_TEL;TYPE=CELL:02221211 

You can add any properties that VCARD supports. See 

https://en.wikipedia.org/wiki/VCard#Properties for a list. You must separate these properties by an underscore ‘_’ and prefix the text with VCARD_ 

Enjoy your Android WebView NFC app!