NFCService Example

Here’s a basic example of a Lightning web component that uses NFCService to parse text data from an image.

The component’s HTML template is minimal, with a display view that includes three buttons, one each for read, erase, and write operations.

1<template>
2  <lightning-card title="NFC Service Demo" icon-name="custom:phone_portrait">
3    <div class="slds-var-m-around_medium">
4      Choose an action to perform on an NFC tag:<br><br>
5
6      <lightning-button
7        variant="brand"
8        label="Read" 
9        title="Read the content of an NFC tag"
10        onclick={handleReadClick}>
11      </lightning-button>
12      <lightning-button
13        variant="brand"
14        label="Erase" 
15        title="Erase the content of an NFC tag"
16        onclick={handleEraseClick} 
17        class="slds-var-m-left_x-small">
18      </lightning-button>
19      <lightning-button
20        variant="brand"
21        label="Write" 
22        title="Write sample content to an NFC tag"
23        onclick={handleWriteClick} 
24        class="slds-var-m-left_x-small">
25      </lightning-button>
26    </div>
27    <div class="slds-var-m-around_medium">
28      <lightning-formatted-text value={status}></lightning-formatted-text>
29    </div>
30  </lightning-card>    
31</template>

This example uses NFCService to select the NFC operation to be performed, performs the operation, and displays a success message when completed successfully. An error message is returned when there’s an error.

1import { LightningElement } from 'lwc';
2import { getNfcService } from 'lightning/mobileCapabilities';
3
4export default class NimbusPluginNfcService extends LightningElement {
5    status;
6    nfcService;
7
8    connectedCallback() {
9      this.nfcService = getNfcService();
10    }
11
12    handleReadClick() {
13      if(this.nfcService.isAvailable()) {
14        const options = {
15          "instructionText": "Hold your phone near the tag to read.",
16          "successText": "Tag read successfully!"
17        };
18        this.nfcService.read(options)
19          .then((result) => {
20            // Do something with the result
21            this.status = JSON.stringify(result, undefined, 2);
22          })
23          .catch((error) => {
24            // Handle errors
25            this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
26          });
27      } else {
28        // service not available
29        this.status = 'Problem initiating NFC service. Are you using a mobile device?';
30      }
31    }
32
33    handleEraseClick() {
34      if(this.nfcService.isAvailable()) {
35        const options = {
36          "instructionText": "Hold your phone near the tag to erase.",
37          "successText": "Tag erased successfully!"
38        };
39        this.nfcService.erase(options)
40          .then(() => {
41            this.status = "Tag erased successfully!";
42          })
43          .catch((error) => {
44            // Handle errors
45            this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
46          });
47      } else {
48        // service not available
49        this.status = 'Problem initiating NFC service. Are you using a mobile device?';
50      }
51    }
52
53    async handleWriteClick() {
54      if(this.nfcService.isAvailable()) {
55        const options = {
56          "instructionText": "Hold your phone near the tag to write.",
57          "successText": "Tag written successfully!"
58        };
59        const payload = await this.createWritePayload();
60        this.nfcService.write(payload, options)
61          .then(() => {
62            this.status = "Tag written successfully!";
63          })
64          .catch((error) => {
65            // Handle errors
66            this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
67          });
68      } else {
69        // service not available
70        this.status = 'Problem initiating NFC service. Are you using a mobile device?';
71      }
72    }
73
74    async createWritePayload() {
75      // Here we demonstrate how you can write several records to an NFC tag.
76      // Consider the scenario where you want to write the content of a business card
77      // to an NFC tag. The content can be broken down into a number of text and uri records.
78      const nameRecord = await this.nfcService.createTextRecord({text: "John Smith", langId: "en"});
79      const phone1Record = await this.nfcService.createTextRecord({text: "(123) 456-7890 Office", langId: "en"});
80      const phone2Record = await this.nfcService.createTextRecord({text: "(321) 654-0987 Direct", langId: "en"});
81      const emailRecord = await this.nfcService.createUriRecord("mailto:john.smith@email.com");
82      const addressRecord = await this.nfcService.createTextRecord({text: "584 South Paris Hill Ave., Lancaster, CA 93535", langId: "en"});
83      const websiteRecord = await this.nfcService.createUriRecord("https://www.mycompany.com");
84      return [nameRecord, phone1Record, phone2Record, emailRecord, addressRecord, websiteRecord];
85    }
86}

Mobile and Offline Developer Guide

NFCService Example