Web NFC support

[v1lling]

implements #72

[v1lling]

feel free to test and give some feedback :)

[BhKent]

Any idea if this will be merged? I need to use NFC in a PWA app.

[v1lling]

not sure you can fork my branch and try if it works for your use-case though.

Any idea if this will be merged? I need to use NFC in a PWA app.

not sure
you can fork my branch and try if it works for your use-case though.

[BhKent]

Thanks. Did as you suggested. Next problem I'm facing is that I only need the uid indentifier of the tag. Any help in getting this from the cached message would be appreciated.
I used to use:
uid = await (NfcA.from(tag)?.identifier ?? NfcB.from(tag)?.identifier ?? NfcF.from(tag)?.identifier ?? NfcV.from(tag)?.identifier ?? Uint8List(0)).toHexString();
But this is now returning null

Thanks

[v1lling]

Are you testing on web or native?

Have a look at this file, where I used the WebNFC plugin:
Landing_viewmodel.dart

Specifically look at function activateNFCScan().
You need to use FlutterNfcWeb.instance.startNFCRead() with its callback function onTagDiscovered().
you will get a List records, where you should be able to read the record[id].

Also make sure to use my fork on branch web-nfc, instead of master.

[BhKent]

I am testing on WEB

Did as you suggested but I see that the id field within the records is blank. I assume the return records are only from the user memory pages of the tag.

I'm trying to get at the UID (serial number) which is stored in memory page 0h to first byte of 02h. User memory (where the Ndef records are kept is from 04h onwards)

On the android version of the package the callBack to the .startSession() function returned an NfcTag object which contained the UID (aka serial)

If we are successfully reading the Ndef records it feels like we are close to getting the tag UID

[v1lling]

Ah, I see.
I think for this to work you have to create your own fork and edit my branch. Currently it seems like the serial number is not passed from JS-side to Dart side.

Have a look at the example of web-nfc:
https://googlechrome.github.io/samples/web-nfc/
You can see that JS ndef is able to get the serialnumber in event "reading":

ndef.addEventListener("reading", ({ message, serialNumber }) => {
      log(`> Serial Number: ${serialNumber}`);
      log(`> Records: (${message.records.length})`);
    });

So you would have to change the js file of my fork:
https://github.com/v1lling/flutter-nfc-manager/blob/web-nfc/assets/flutter_nfc.js

In function startNDEFReaderJS(), the plugin starts JS Web NFC and reads the NDEF records and translates them into Dart Object.
Specifically in line 265, I define the onreading event mentioned above. In line 267 I get the NDEF records via "event.message.records;". Looking at the Web nfc example above, this event should also have an attribute "event. serialNumber". Theoretically you should be able to retrieve it there.
If you retrieve it succesfully, you have to add it to nativeNDEFMessage in line 275 by changing function getNativefromWebNDEFMessage() and adding the serialNumber into this object. Afterwards you should be able to retrieve it on Dart side.

After changing the flutter_nfc.js File, make sure to minify it. The plugin uses flutter_nfc_min.js instead of flutter_nfc.js for performance reasons. In the comment header at the top of the file flutter_nfc.js you can see how to do it.

Sorry, due to a setup change I'm currently not able to implement and test it myself.
Have a try and let me know if it works.

[BhKent]

This works perfectly. Thank you so much for the help.
I have butchered the code so badly I don't want to create a pull request.
But I just implemented your above suggestion and it worked.

[v1lling]

This works perfectly. Thank you so much for the help. I have butchered the code so badly I don't want to create a pull request. But I just implemented your above suggestion and it worked.

Nice! I'm glad I could help.

[kevtechi]

Any possibility to get this merged? Any help needed with testing or fixes to the code?