Browser Terms Explained: Web NFC API

In today’s world, we are surrounded by digital devices that help us in various ways. One of the most prevalent technologies that are being used these days is Near Field Communication or NFC. It enables us to transfer data wirelessly between two devices. To simplify the use of NFC in our web applications, a new technology was introduced years ago called Web NFC API. In this article, we will explore this technology in-depth and understand its implementation, use cases, and real-world applications.

Understanding Web NFC API

Web NFC API is a technology that allows web applications to read and write data to NFC tags. It provides a seamless experience for the users as they no longer need to install any external applications on their devices to interact with NFC tags. This technology makes use of the NFC hardware that is integrated into modern-day devices, like smartphones and other electronic gadgets, to create two-way communication between these devices.

What is NFC Technology?

NFC or Near Field Communication is a wireless technology that allows two devices to communicate with each other when they are placed close together. It operates on radio-frequency identification (RFID) technology and is used in various applications like contactless payments, access control, and IoT device management.

How Web NFC API Works

Web NFC API is integrated into web browsers like Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge, and enables web applications to access the device’s NFC hardware. When a user taps an NFC tag with their device, it automatically triggers a web application that is capable of reading NFC data. The application can then read the data from the NFC tag and respond to it accordingly. It can also write data to the NFC tag if required.

Use Cases for Web NFC API

Web NFC API has several use cases that make it a necessary technology for web applications. Some of them are as follows:

• Building contactless payment systems.

• Smart posters and advertising interactions.

• Access control and authentication.

• IoT device management.

Browser Support for Web NFC API

Web NFC API is available in most of the modern-day web browsers, such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. Let’s take a look at how each of these browsers supports Web NFC API.

Google Chrome and Web NFC API

Google Chrome first introduced the Web NFC API in version 81 for Android and Windows devices. It is available as an experimental feature that needs to be enabled manually. To enable the feature, the user needs to go to the ‘chrome://flags’ page and search for ‘WebNFCAPI’. Users can then enable this feature to access Web NFC API.

Mozilla Firefox and Web NFC API

Mozilla Firefox announced support for Web NFC API in version 72 and above. As of Firefox version 89, Web NFC API is enabled by default for users on desktop and Android devices. However, users on iOS devices will not have access to Web NFC API as iOS devices do not have support for NFC hardware.

Safari and Web NFC API

Safari has announced support for Web NFC API in its iOS 14. NFC tags can be read and written using Safari on iPhones that have built-in NFC hardware, such as iPhone 7 and later.

Microsoft Edge and Web NFC API

Microsoft Edge announced support for Web NFC API in version 89. Web NFC API is enabled by default for desktop users but not yet supported on mobile devices.

Implementing Web NFC API in Web Applications

Implementing Web NFC API in web applications is not a complicated task. Developers need to follow a few simple steps to get started.

Basic Web NFC API Implementation

The basic implementation of Web NFC API involves registering an event listener that listens for a reading event. In this event listener, developers fetch the records from the NFC tag and show them to the user. Below is a code snippet that shows a simple implementation of the Web NFC API.

navigator.permissions.query({name: "nfc"}).then(permissionStatus => { if (permissionStatus.state === "granted") { // add an event listener // for the nfcfound event nfc.addEventListener('reading', ({message, serialNumber}) => { console.log(`Found NFC tag with serial number: ${serialNumber} and data: ${message.url}`); }); } });

Reading NFC Tags with Web NFC API

Reading NFC tags with Web NFC API is a simple process. When an NFC tag is detected, it sends a ‘reading’ event to the application. Developers can then fetch the records from the NFC tag and show them to the user. Below is a code snippet that shows how to read NFC data using Web NFC API.

// add an event listener for the nfcfound eventnfc.addEventListener('reading', ({message, serialNumber}) => { console.log(`NFC tag with serial number: ${serialNumber} and data: ${message.url}`);});

Writing NFC Tags with Web NFC API

The Web NFC API also allows developers to write data to NFC tags. The process involves creating an NDEF message containing the data and writing it to the NFC tag. Once the data is written successfully, the ‘writeend’ event is sent to the application. Below is a code snippet that shows how to write data to an NFC tag.

// Create an NDEF messageconst message = [ new window.NDEFRecord.createTextRecord("Hello, world!"),];nfc.write(message).then(() => { console.log('NFC tag has been written');}).catch((err) => { console.error(`Error while writing NFC tag: ${err}`);});

Security Considerations for Web NFC API

Developers should be mindful of the security risks while implementing Web NFC API in their applications. NFC tags can potentially carry sensitive information, and therefore, it is essential to ensure that the data is encrypted and safe. Developers should also be wary of ‘clickjacking’ attacks and ensure that the user is aware of the NFC interactions. In addition, security best practices like CORS should be followed to prevent cross-site scripting attacks.

Real-World Applications of Web NFC API

Web NFC API has several real-world applications that make it a necessary technology for web developers. Let’s take a look at some of them.

Contactless Payments

Web NFC API is being widely used in contactless payment systems, enabling users to make payments using their smartphones. This technology eliminates the need for users to carry cash or cards, making the payment process more convenient and seamless.

Smart Posters and Advertising

Web NFC API also enables smart posters and advertising interactions. These interactions allow users to interact with posters and advertisements to receive further information or special offers.

Access Control and Authentication

Web NFC API can also be used for access control and authentication purposes, allowing users to access restricted areas or sensitive information by tapping their phones. This technology is useful for organizations that require secure access to certain areas or information.

IoT Device Management

Web NFC API can be used for IoT device management, enabling users to perform operations like device configuration, firmware updates, and data retrieval. This technology simplifies the management process, making it more efficient and cost-effective.

Conclusion

To conclude, Web NFC API is a technology that simplifies the use of NFC in web applications. It enables seamless data transfer between NFC tags and web applications, eliminating the need for external applications. This technology has several real-world applications, including contactless payments, smart posters, access control, and IoT device management. Developers should be mindful of the security risks when implementing Web NFC API in their applications and follow security best practices to ensure the safety of user data.