How to get started?

[jasonalexandermoore]

Can someone please advise on how I can integrate this into my website because I can't seem to find a way to implement this. Thanks in advance, all advice and support would be much appreciated.

[jasonalexandermoore]

Do I need to join a group to be able to use the script? Does this actually work within a browser, for example if I wanted to read and write an NFC tag, then can I do this using the script?

[jvdassen]

Yes, you can read and write to NFC tags using the web-nfc API and Google Chrome.
However you can't interact with peer devices and you need to enable the implementation using a flag. The implementation in Google Chrome allows you to leverage the functionality showcased in Examples 1, 3 and 5 of the specification.
I haven't checked them in all versions, but these examples should work pretty much out of the box.
In order to enable web-nfc in Google Chrome you need to navigate to chrome://flags and enable Experimental Web Platform features and WebNFC.

[jasonalexandermoore]

Hello and thanks for getting back to me, I have enabled the experimental web platform features in the flags of Chrome, however I can't seem to find the WebNFC? Can you tell me where this is? I have tried downloading the Chrome BETA version and searched in here, and also Chromium. Any ideas?
When I'm trying to push a message from the website I'm getting the following error in the console log:

Uncaught TypeError: Cannot read property 'push' of undefined
at HTMLAnchorElement.eval (eval at globalEval (jquery.min.js:2), :42:18)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)

[jvdassen]

Hi!
I don't think you need a special 'Beta' version for this, having a version of Chrome >61 should suffice.
However, I think the WebNFC flag is hidden if your device does not support NFC, e.g. on a laptop which usually don't have an NFC chip.
Are you trying this on a Desktop or mobile device? I suggest to try it on an Android phone, where you know that NFC is supported.

[jvdassen]

The nfc object won't be in navigator unless the WebNFC flag is set, which is why you see the error.

[cheehow]

Hi, I am currently having the same issues as to integrating this experimental feature into a web app. We wish to use this experimental feature to read off information from a Mifare card via web app using an Android device's NFC. So far we have tried but it always returns a null result, any advice?

[kenchris]

@cheehow Mifare is not NFC but a proprietary technology, which only works on readers (like phones) that come with a NFC chip from NXP.

If that is a very valuable use-case, I think we need some discussion on whether we want to support it from W3C point of view, or allow an escape path where browsers could support it but it not being mandated by the spec.

@anssiko

[tahv0]

Hi, does anyone have any guess what I might be doing wrong.
When I'm reading NFCs I get only messages like:
[{"records": ["data" null, "mediaType" "", "recodType": "empty"]}]
Why everything is empty and null? Device doesn't even recognize some cards e.g. credit cards.

[anssiko]

@tahv0, the introduction says:

In addition to data types standardized for NDEF records by the NFC Forum, many commercial products such as bus cards, door openers etc use different card specific data and protocol extensions which require specific NFC chips (same vendor of card and reader) in order to function.

Which card you're trying to read from specifically?

[kenchris]

Maybe you are using Mifare (not NFC) tags? These are ONLY readable using NFC readers from NXP (proprietary) - which is why they are not supported on the web.

@anssiko maybe we should create a proper error message? like "Proprietary (Mifare) tag detected".

Kenneth

[anssiko]

@kenchris, please open a new issue for the error message improvement.

I don't foresee other concrete spec changes that we can derive from this feedback, so I suggest we close this issue and thank @tahv0 and others for their feedback that helped improve the API.

[tahv0]

@tahv0, the introduction says:

In addition to data types standardized for NDEF records by the NFC Forum, many commercial products such as bus cards, door openers etc use different card specific data and protocol extensions which require specific NFC chips (same vendor of card and reader) in order to function.

Which card you're trying to read from specifically?

Some student id card. It seems to be NfcA, MifareClassic. Not a Tag.
So it might not work like @kenchris said after all.

[kenchris]

Card, tag, etc == passive device, so same thing. Mifare Classic is not following the NFC standard but very similar, proprietary tech which is supposedly cheaper and a good lock to requiring special reader chips.

[Lechucico]

@tahv0 I'm trying to use this on a touchscreen desktop computer which has a NFC device connected. WebNFC flag doesn't appear on chrome. Does this only work on smartphones using chrome?

[tahv0]

@tahv0 I'm trying to use this on a touchscreen desktop computer which has a NFC device connected. WebNFC flag doesn't appear on chrome. Does this only work on smartphones using chrome?

Don't know, I neither find that documented. It might be that you can only used NFCs on desktop via extension e.g:
https://chrome.google.com/webstore/detail/nfc-reader-browser-extens/kjfmmgpfhdohhcodbkaodgkidbenkgog?hl=en

Note. This WebNFC is experimental feature and it seems that it wont come to browsers in near future. This is a reason why I gave up with this.

[Lechucico]

@tahv0 I'm trying to use this on a touchscreen desktop computer which has a NFC device connected. WebNFC flag doesn't appear on chrome. Does this only work on smartphones using chrome?

Don't know, I neither find that documented. It might be that you can only used NFCs on desktop via extension e.g:
https://chrome.google.com/webstore/detail/nfc-reader-browser-extens/kjfmmgpfhdohhcodbkaodgkidbenkgog?hl=en

Note. This WebNFC is experimental feature and it seems that it wont come to browsers in near future. This is a reason why I gave up with this.

I'm just trying to access NFC device to allow users login on system using NFC card on the web application. Looks like this extension may work, I'll take a look. Otherwise, there are more alternatives? Thanks!

[richardszalay]

Having implemented this in production (a very specific usecase where enabling a feature flag is worth it for the convenience), here's a summary of my experience:

• It will only work in Chrome for Android (including tablets) when the feature flag is enabled
• "nfc" in navigator will return true if the feature flag is enabled even if the device does not support NFC. You'll need to handle a watch failure to deal with that.
• Reading
  • You'll need to pass in options to watch with mode: "any" otherwise it will only find tags written by web-nfc
  • It will flat out ignore external/opaque records (in our scenario the tags had URL + external, but Chrome only saw the URL)
• Writing
  • I can't remember the details, but writing a URL didn't result in a Well Known URI record (but we'd already ruled it out for writes due the lack of working support for external records)

FWIW, here's the TypeScript type definitions I used. I can only vouch for the read operations since that's all we ended up using. https://gist.github.com/richardszalay/dd39a3486b6477a126103c6ea354247b

[kenchris]

Hi @richardszalay Thanks for the feedback. We are back at working on this after having landed Generic Sensors.

We have modernized the API so expect changes the coming months before we start an origin trial.

It will only work in Chrome for Android (including tablets) when the feature flag is enabled

Yes, it will only work on platform that has native drivers for NFC (not for plugging in a USB NFC reader etc) - so thus far only Android

"nfc" in navigator will return true if the feature flag is enabled even if the device does not support NFC. You'll need to handle a watch failure to deal with that.

True, that was for avoiding finger printing - has that turned out to be an actual problem?

It will flat out ignore external/opaque records (in our scenario the tags had URL + external, but Chrome only saw the URL)
I can't remember the details, but writing a URL didn't result in a Well Known URI record (but we'd already ruled it out for writes due the lack of working support for external records)

Can you please file a bug at crbug.com/new ?

[richardszalay]

We have modernized the API so expect changes the coming months before we start an origin trial

No worries, is this related to the createAdapter API or does it go straight to NFCReader?

True, that was for avoiding finger printing - has that turned out to be an actual problem?

Not at all, just thought it would be worth mentioning to anyone planning on using it.

Can you please file a bug at crbug.com/new ?

It was some time ago and I'm not working actively with that feature anymore, but if I can find some time to repro the issue I'll write up a bug.

[kenchris]

No worries, is this related to the createAdapter API or does it go straight to NFCReader?

It goes straight. https://w3c.github.io/web-nfc/#idl-index

It was some time ago and I'm not working actively with that feature anymore, but if I can find some time to repro the issue I'll write up a bug.

That would be great. Please add the issue links here afterwards

[zolkis]

You'll need to pass in options to watch with mode: "any" otherwise it will only find tags written by web-nfc

That was by design IIRC, by default allowing only specific web-nfc tags, and requiring expressed choice by developer to access other tags as well (security policies usually go like this, requiring action for gaining more permission, against convenience; yet APIs try to be convenient, hence a conflict - which should be at least better documented). Thanks for the feedback.

It will flat out ignore external/opaque records (in our scenario the tags had URL + external, but Chrome only saw the URL)

Handling of external/opaque needs to be checked in the implementation. File a bug, please.

[jvitor83]

Yes, you can read and write to NFC tags using the web-nfc API and Google Chrome.
However you can't interact with peer devices and you need to enable the implementation using a flag. The implementation in Google Chrome allows you to leverage the functionality showcased in Examples 1, 3 and 5 of the specification.
I haven't checked them in all versions, but these examples should work pretty much out of the box.
In order to enable web-nfc in Google Chrome you need to navigate to chrome://flags and enable Experimental Web Platform features and WebNFC.

@jvdassen or anyone could tell when the need for enable the WebNFC flag would be unnecessary?

[beaufortfrancois]

When Web NFC ships to Chrome stable channel. Maybe this year if the origin trial proves that the shape of the API fits web developers needs.

During the upcoming origin trial, the flag won't be necessary as well. Please, stay tuned for more information regarding this.

[beaufortfrancois]

To get started with Web NFC, I'd recommend having a look at https://web.dev/nfc/