NFC in iOS WKWebView apps: Read & write NFC tags 🥳

In today’s world, where people are constantly on-the-go, NFC (Near Field Communication) provides a convenient way for users to interact with their devices.

NFC is not just about the contactless payment (like with Apple Pay). It can also be used for other tasks where people need to share information without typing, talking, or looking at their devices. Apple already started working on NFC in iOS apps a decade ago when they released an API to allow developers to use NFC in their iOS apps. But only after the Apple Pay release in 2016, this feature become trending. And for WKWebView apps? How can they trigger NFC functions through the WKWebView element itself?

This article will help you develop NFC in iOS WebView app using the paid NFC plugin for WebViewGold. With that, you can connect with NFC tags or cards in Swift while only using WebView (WKWebView) for the main app content. If you’re a no-code iOS developer, this guide will benefit you.

1. Download WebViewGold for iOS
2. Buy the WebViewGold NFC Plugin (via support mail)

Afterward, you can implement this HTML code n your web app/website 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 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). This has the same API as writing plaintext. It would be best if you formatted the text like the following: 

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_ 

Note that it may be required to have an Apple Developer account to run WebViewGold with NFC enabled, as per Apple’s policies.