What is the correct way to check whether the browser supports Web NFC API or not?

[FluorescentHallucinogen]

What is the correct way to check whether the browser supports Web NFC API or not?

In the previous version of API, I've used the following:

if ('nfc' in navigator) {
  // use Web NFC API
}

Is

if ('NDEFReader' in window && 'NDEFWriter' in window) {
  // use Web NFC API
}

the correct way?

It would also really nice to have a property (or something) to check whether the device has NFC chip or not.

[FluorescentHallucinogen]

Are there NFC chips that support only reading, but not writing NFC tags? If yes, how to detect this?

[beaufortfrancois]

Indeed!

if ('NDEFReader' in window) { /* ... Scan NDEF Tags */ }
if ('NDEFWriter' in window) { /* ... Write NDEF Tags */ }

You can also use Permissions API

try {
  const status = await navigator.permissions.query({ name: 'nfc'});
}
catch(e) {
  // No Web NFC support
}

[beaufortfrancois]

To check whether the device has NFC chip or not, you can call scan() or push()and it will reject with an appropriate error if that's the case.

[beaufortfrancois]

Are there NFC chips that support only reading, but not writing NFC tags? If yes, how to detect this?

I don't think so.

[FluorescentHallucinogen]

@beaufortfrancois What about adding this to the spec?

[beaufortfrancois]

Which parts?

Good luck for your talk by the way ;)

[FluorescentHallucinogen]

@beaufortfrancois

Good luck for your talk by the way ;)

Thanks! This is workshop, not talk. :)

Which parts?

About browser feature detection: #434 (comment).

[beaufortfrancois]

I'll do this.
Feel free to file more issues as you play with Web NFC.
Note that current Chromium implementation doesn't show prompts yet, but will really soon.

[FluorescentHallucinogen]

Note that current Chromium implementation doesn't show prompts yet, but will really soon.

I know. :) Thanks!

[beaufortfrancois]

Cool!
You can check WIP at https://chromium-review.googlesource.com/q/hashtag:%22webnfc%22+(status:open%20OR%20status:merged)

[FluorescentHallucinogen]

@beaufortfrancois Just curious, what if I call navigator.permissions.query({ name: 'nfc'}), but NFC is disabled in the OS settings? Does your CL cover this use case similar to the following (example for Web Geolocation API)?

[beaufortfrancois]

navigator.permissions.query({ name: 'nfc'}) will resolve with a status of "denied".

navigator.permissions.query({ name: "nfc" }).then(permissionStatus => {
  console.log(`NFC user permission: ${permissionStatus.state}`);
  permissionStatus.onchange = _ => {
    console.log(`NFC user permission changed: ${permissionStatus.state}`);
  };
});

[beaufortfrancois]

https://w3c.github.io/web-nfc/#feature-support has been added to the spec.

[FluorescentHallucinogen]

@beaufortfrancois

navigator.permissions.query({ name: 'nfc'}) will resolve with a status of "denied".

Silently? It would be great to let the user know what went wrong and provide the ability to enable NFC in the OS settings (see screenshots in #434 (comment)).

P.S. Sorry for offtopic.

[beaufortfrancois]

navigator.permissions.query will always be silent. What we could use is navigator.permissions.request, however it is not functional at the moment in Chromium.

Having something similar to Geolocation makes sense to me.
I'll ping appropriate folks. Thanks!

[FluorescentHallucinogen]

@beaufortfrancois

Just to clarify, will there be a separate permission prompt for writing NFC (alongside permission prompt for reading NFC) or one single permission prompt for the whole Web NFC API (both reading and writing)?

Use case: what if I want to allow the web app to only read NFC tags but not write?

I'm not familiar with the process of merge code in Chromium. I see that the NFC permission change was merged, but I've just tested in Chrome Canary for Android with chrome://flags/#enable-webnfc flag enabled today and for some reason don't see the permission prompt. Why? Any ETA?

[beaufortfrancois]

Just to clarify, will there be a separate permission prompt for writing NFC (alongside permission prompt for reading NFC) or one single permission prompt for the whole Web NFC API (both reading and writing)?

In Chromium, there will be one single permission prompt for using the Web NFC API.

I'm not familiar with the process of merge code in Chromium. I see that the NFC permission change was merged, but I've just tested in Chrome Canary for Android with chrome://flags/#enable-webnfc flag enabled today and for some reason don't see the permission prompt. Why? Any ETA?

I'm currently working on making sure tests pass for https://chromium-review.googlesource.com/c/chromium/src/+/1895345. Once it's solved, it will be pushed to Chromium. I hope this will be done this week or next week.

[FluorescentHallucinogen]

@beaufortfrancois

In Chromium, there will be one single permission prompt for using the Web NFC API.

Any plans to separate permission prompts for reading and writing?

From the name of https://chromium-review.googlesource.com/c/chromium/src/+/1895345 — [WebNFC] Add permission prompt for NDEFWriter.push it's not clear is this for writing only?

What if I try to read NFC tags (if user didn't previously allow Web NFC), will the permission prompt be shown?

[beaufortfrancois]

@beaufortfrancois

In Chromium, there will be one single permission prompt for using the Web NFC API.

Any plans to separate permission prompts for reading and writing?

Nope. Not in Chromium.

From the name of https://chromium-review.googlesource.com/c/chromium/src/+/1895345 — [WebNFC] Add permission prompt for NDEFWriter.push it's not clear is this for writing only?

What if I try to read NFC tags (if user didn't previously allow Web NFC), will the permission prompt be shown?

Yup. Once user approves Web NFC, prompt won't be shown anymore.

[beaufortfrancois]

For info, I'm currently adding "second" prompt to Chrome to turn on NFC if needed. See https://chromium-review.googlesource.com/c/chromium/src/+/1940241

[beaufortfrancois]

@FluorescentHallucinogen All bits have finally landed in Chrome Canary for Android. You can give it a try at https://permission.site

[FluorescentHallucinogen]

@beaufortfrancois That's awesome! Thanks for your work!

One detail: what about changing the word "phone" in texts to more generic "device"? What if my device is e.g. tablet, not phone?

[beaufortfrancois]

@FluorescentHallucinogen I'll share this feedback with the team. Thanks!

[FluorescentHallucinogen]

@beaufortfrancois Any plans on Origin Trial for Web NFC API?

[riju]

@FluorescentHallucinogen : We are planning for M81, so around end of Jan '20.

[beaufortfrancois]

To know more about the Origin Trial for Web NFC, I'd recommend having a look at https://web.dev/nfc/