Implementation of NFC on Android Chrome 81 not working

561 Views Asked by At

Im trying to read NFC tags from chrome 81 on andriod with the following code:

<html>
<head>
    <title>NFC</title>
</head>
<body>
    <button onclick="reader()">Scan</button>

    <script>
        function reader(){
            const reader = new NDEFReader();
            reader.scan().then(() => {
                alert("Scan started successfully.");
                reader.onerror = () => {
                    alert("Cannot read data from the NFC tag. Try another one?");
                };
                reader.onreading = event => {
                    alert("NDEF message read.");
                };
            }).catch(error => {
                alert(`Error! Scan failed to start: ${error}.`);
            });
        }
    </script>
</body>

the problem im having with it is that it reads the entry from the nfc tag but doesnt give alerts like the code suggests, instead it trys to direct me to installed apps on my phone. However, when i use https://googlechrome.github.io/samples/web-nfc/ that is using the full API it works and displays in the webpage as data. The main difference is that im using the Enabling via chrome://flags method to allow the NFC API.

out of reading the tag, my only aim is to save the content to sessionStorage as a variable to be used by other parts of the website.

Thanks in advance

1

There are 1 best solutions below

0
On BEST ANSWER

One difference between https://googlechrome.github.io/samples/web-nfc/ and your code that would matter is the fact this demo used to have an origin trial token in its web page.

For now, to experiment with Web NFC on Android, enable the #experimental-web-platform-features flag in chrome://flags as described in https://web.dev/nfc/#use

Hopefully this flag won't be required once it is shipped to the web platform.