Interagire con dispositivi NFC su Chrome per Android

Ora è possibile leggere e scrivere nei tag NFC.

François Beaufort

Operazione riuscita: NFC web, parte del progetto di funzionalità, lanciato in Chrome 89 per Android.

Che cos'è la tecnologia Web NFC?

NFC è l'acronimo di Near Field Communications, una tecnologia wireless a corto raggio operante a 13,56 MHz che consente la comunicazione tra dispositivi a una distanza inferiore a 10 cm e una velocità di trasmissione fino a 424 kbit/s.

La tecnologia NFC web consente ai siti di leggere e scrivere sui tag NFC quando si trovano nelle vicinanze del dispositivo dell'utente (solitamente 5-10 cm, 2-4 pollici). L'ambito attuale è limitato al formato NDEF (NFC), un formato di messaggio binario leggero che funziona per diversi formati di tag.

Diagramma di un'operazione NFC

Casi d'uso suggeriti

La tecnologia NFC web è limitata all'NDEF perché le proprietà di sicurezza della lettura e della scrittura di dati NDEF sono più facilmente quantificabili. Le operazioni di I/O di basso livello (ad es. ISO-DEP, NFC-A/B, NFC-F), la modalità di comunicazione Peer-to-Peer ed Host-based Card Emulation (HCE) non sono supportate.

Esempi di siti che possono utilizzare la tecnologia NFC web includono:

• I musei e le gallerie d'arte possono mostrare informazioni aggiuntive su un display quando l'utente tocca il proprio dispositivo con una carta NFC vicino all'esposizione.
• I siti di gestione dell'inventario possono leggere o scrivere dati nel tag NFC di un contenitore per aggiornare le informazioni relative ai suoi contenuti.
• I siti di conferenze possono utilizzarlo per scansionare i badge NFC durante l'evento e assicurarsi che siano bloccati per impedire ulteriori modifiche alle informazioni scritte su di essi.
• Sites può utilizzarlo per condividere i secret iniziali necessari per gli scenari di provisioning di dispositivi o servizi, nonché per eseguire il deployment dei dati di configurazione in modalità operativa.

Illustrazione della gestione dell'inventario NFC

Stato attuale

Passaggio	Stato
1. Crea messaggio esplicativo	Completato
2. Crea una bozza iniziale della specifica	Completato
3. Raccogli feedback e ottimizza il design	Completato
4. Prova dell'origine	Completato
5. Avvia	Completato

Usa NFC web

Rilevamento delle funzionalità

Il rilevamento delle funzionalità per l'hardware è diverso da quello che probabilmente conosci. La presenza di NDEFReader indica che il browser supporta la tecnologia Web NFC, ma non se è presente l'hardware richiesto. In particolare, se l'hardware non è presente, la promessa restituita da determinate chiamate viene rifiutata. Fornirò i dettagli quando descriverò NDEFReader.

if ('NDEFReader' in window) { /* Scan and write NFC tags */ }

Terminologia

Un tag NFC è un dispositivo NFC passivo, vale a dire alimentato dall'induzione magnetica quando un dispositivo NFC attivo (ad esempio un telefono) si trova nelle vicinanze. I tag NFC sono disponibili in molte forme e modalità, ad esempio adesivi, carte di credito, braccialetti e altro ancora.

Un tag NFC trasparente

L'oggetto NDEFReader è il punto di ingresso in NFC web che espone funzionalità per la preparazione di azioni di lettura e/o scrittura che vengono completate quando un tag NDEF viene inserito nelle vicinanze. Il NDEF in NDEFReader è l'acronimo di NFC Data Exchange Format, un formato di messaggio binario leggero standardizzato dal Forum NFC.

L'oggetto NDEFReader serve per agire sui messaggi NDEF in arrivo dai tag NFC e per scrivere messaggi NDEF nei tag NFC entro la portata.

Un tag NFC che supporta NDEF è come una nota post-it. Chiunque può leggerla e, a meno che non sia di sola lettura, chiunque può scriverci. Contiene un singolo messaggio NDEF che incapsula uno o più record NDEF. Ogni record NDEF è una struttura binaria che contiene un payload di dati e informazioni di tipo associate. La tecnologia NFC web supporta i seguenti tipi di record standardizzati del Forum NFC: vuoto, testo, URL, poster intelligente, tipo MIME, URL assoluto, tipo esterno, sconosciuto e tipo locale.

Diagramma di un messaggio NDEF

Scansiona tag NFC

Per scansionare i tag NFC, devi prima creare l'istanza di un nuovo oggetto NDEFReader. La chiamata a scan() restituisce una promessa. Se l'accesso non è stato concesso in precedenza, all'utente potrebbe essere chiesto. La promessa si risolverà se tutte le seguenti condizioni sono soddisfatte:

• È stata chiamata soltanto in risposta a un gesto dell'utente, ad esempio un gesto di tocco o il clic del mouse.
• L'utente ha consentito al sito web di interagire con i dispositivi NFC.
• Il telefono dell'utente supporta la tecnologia NFC.
• L'utente ha attivato la tecnologia NFC sul proprio smartphone.

Una volta risolta la promessa, i messaggi NDEF in entrata sono disponibili sottoscrivendo gli eventi reading tramite un listener di eventi. Puoi anche iscriverti agli eventi readingerror per ricevere notifiche quando tag NFC incompatibili si trovano nelle vicinanze.

const ndef = new NDEFReader();
ndef.scan().then(() => {
  console.log("Scan started successfully.");
  ndef.onreadingerror = () => {
    console.log("Cannot read data from the NFC tag. Try another one?");
  };
  ndef.onreading = event => {
    console.log("NDEF message read.");
  };
}).catch(error => {
  console.log(`Error! Scan failed to start: ${error}.`);
});

Quando un tag NFC si trova nelle vicinanze, viene attivato un evento NDEFReadingEvent. Contiene due proprietà uniche:

• serialNumber rappresenta il numero di serie del dispositivo (ad esempio 00-11-22-33-44-55-66) o una stringa vuota se non è disponibile.
• message rappresenta il messaggio NDEF memorizzato nel tag NFC.

Per leggere il contenuto del messaggio NDEF, esegui il loop di message.records ed elabora i relativi membri data in modo appropriato in base ai loro recordType. Il membro data è esposto come DataView in quanto consente di gestire i casi in cui i dati sono codificati in UTF-16.

ndef.onreading = event => {
  const message = event.message;
  for (const record of message.records) {
    console.log("Record type:  " + record.recordType);
    console.log("MIME type:    " + record.mediaType);
    console.log("Record id:    " + record.id);
    switch (record.recordType) {
      case "text":
        // TODO: Read text record with record data, lang, and encoding.
        break;
      case "url":
        // TODO: Read URL record with record data.
        break;
      default:
        // TODO: Handle other records with record data.
    }
  }
};

Nota: il cookbook contiene molti esempi di come leggere i record NDEF in base al loro tipo.

Scrittura tag NFC

Per scrivere tag NFC, devi prima creare l'istanza di un nuovo oggetto NDEFReader. La chiamata di write() restituisce una promessa. Se l'accesso non è stato concesso in precedenza, all'utente potrebbe essere chiesto. A questo punto, un messaggio NDEF viene "preparato" e la promessa si risolverà se vengono soddisfatte tutte le seguenti condizioni:

• È stata chiamata soltanto in risposta a un gesto dell'utente, ad esempio un gesto di tocco o il clic del mouse.
• L'utente ha consentito al sito web di interagire con i dispositivi NFC.
• Il telefono dell'utente supporta la tecnologia NFC.
• L'utente ha attivato la tecnologia NFC sul proprio smartphone.
• L'utente ha toccato un tag NFC e un messaggio NDEF è stato scritto correttamente.

Per scrivere testo in un tag NFC, trasmetti una stringa al metodo write().

const ndef = new NDEFReader();
ndef.write(
  "Hello World"
).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

Per scrivere un record URL in un tag NFC, trasmetti un dizionario che rappresenti un messaggio NDEF a write(). Nell'esempio seguente, il messaggio NDEF è un dizionario con una chiave records. Il suo valore è un array di record: in questo caso, un record URL definito come un oggetto con una chiave recordType impostata su "url" e una chiave data impostata sulla stringa dell'URL.

const ndef = new NDEFReader();
ndef.write({
  records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }]
}).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

È anche possibile scrivere più record in un tag NFC.

const ndef = new NDEFReader();
ndef.write({ records: [
    { recordType: "url", data: "https://w3c.github.io/web-nfc/" },
    { recordType: "url", data: "https://web.dev/nfc/" }
]}).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

Nota: il cookbook contiene molti esempi di come scrivere altri tipi di record NDEF.

Se il tag NFC contiene un messaggio NDEF che non deve essere sovrascritto, imposta la proprietà overwrite su false nelle opzioni trasmesse al metodo write(). In questo caso, la promessa restituita verrà rifiutata se un messaggio NDEF è già memorizzato nel tag NFC.

const ndef = new NDEFReader();
ndef.write("Writing data on an empty NFC tag is fun!", { overwrite: false })
.then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

Rendi i tag NFC di sola lettura

Per evitare che utenti malintenzionati sovrascrivano i contenuti di un tag NFC, è possibile rendere i tag NFC definitivamente di sola lettura. Questa operazione è unidirezionale e non può essere annullata. Una volta che un tag NFC è stato impostato in sola lettura, non può più essere scritto.

Per rendere i tag NFC di sola lettura, devi prima creare un'istanza di un nuovo oggetto NDEFReader. La chiamata di makeReadOnly() restituisce una promessa. Se l'accesso non è stato concesso in precedenza, all'utente potrebbe essere chiesto. La promessa si risolverà se vengono soddisfatte tutte le seguenti condizioni:

• È stata chiamata soltanto in risposta a un gesto dell'utente, ad esempio un gesto di tocco o il clic del mouse.
• L'utente ha consentito al sito web di interagire con i dispositivi NFC.
• Il telefono dell'utente supporta la tecnologia NFC.
• L'utente ha attivato la tecnologia NFC sul proprio smartphone.
• L'utente ha toccato un tag NFC, che è stato reso di sola lettura correttamente.

const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

Di seguito viene spiegato come impostare un tag NFC in modalità di sola lettura permanente dopo averlo scritto.

const ndef = new NDEFReader();
try {
  await ndef.write("Hello world");
  console.log("Message written.");
  await ndef.makeReadOnly();
  console.log("NFC tag has been made permanently read-only after writing to it.");
} catch (error) {
  console.log(`Operation failed: ${error}`);
}

Poiché makeReadOnly() è disponibile su Android in Chrome 100 o versioni successive, verifica se questa funzionalità è supportata con quanto segue:

if ("NDEFReader" in window && "makeReadOnly" in NDEFReader.prototype) {
  // makeReadOnly() is supported.
}

Sicurezza e autorizzazioni

Il team di Chrome ha progettato e implementato la tecnologia Web NFC utilizzando i principi fondamentali definiti nella sezione Controllo dell'accesso alle funzionalità potenti della piattaforma web, inclusi controllo dell'utente, trasparenza ed ergonomia.

Poiché NFC estende il dominio delle informazioni potenzialmente disponibili a siti web dannosi, la disponibilità della tecnologia NFC è limitata per massimizzare la consapevolezza e il controllo dell'utilizzo dell'NFC da parte degli utenti.

Richiesta utente NFC web

La tecnologia NFC web è disponibile solo per frame di primo livello e contesti di navigazione sicura (solo HTTPS). Le origini devono prima richiedere l'autorizzazione "nfc" durante la gestione di un gesto dell'utente (ad esempio il clic su un pulsante). I metodi NDEFReader scan(), write() e makeReadOnly() attivano una richiesta dell'utente, se l'accesso non è stato concesso in precedenza.

  document.querySelector("#scanButton").onclick = async () => {
    const ndef = new NDEFReader();
    // Prompt user to allow website to interact with NFC devices.
    await ndef.scan();
    ndef.onreading = event => {
      // TODO: Handle incoming NDEF messages.
    };
  };

La combinazione di una richiesta di autorizzazione avviata dall'utente e di un movimento fisico reale del trasferimento del dispositivo su un tag NFC di destinazione rispecchia il pattern del selettore trovato nell'altra API di accesso ai file e al dispositivo.

Per eseguire una scansione o una scrittura, la pagina web deve essere visibile quando l'utente tocca un tag NFC con il proprio dispositivo. Il browser utilizza il feedback aptico per indicare un tocco. L'accesso al segnale radio NFC viene bloccato quando il display è spento o il dispositivo è bloccato. Per le pagine web non visibili, la ricezione e l'invio di contenuti NFC vengono sospesi e riattivati quando una pagina web diventa di nuovo visibile.

Grazie all'API Page visibility, è possibile monitorare quando la visibilità dei documenti cambia.

document.onvisibilitychange = event => {
  if (document.hidden) {
    // All NFC operations are automatically suspended when document is hidden.
  } else {
    // All NFC operations are resumed, if needed.
  }
};

Ricettario

Ecco alcuni esempi di codice per iniziare.

Verifica l'autorizzazione

L'APIPermissions consente di verificare se è stata concessa l'autorizzazione "nfc". Questo esempio mostra come scansionare i tag NFC senza interazione da parte dell'utente se l'accesso è stato precedentemente concesso o come visualizzare un pulsante in caso contrario. Tieni presente che lo stesso meccanismo funziona per la scrittura dei tag NFC, in quanto utilizza la stessa autorizzazione in background.

const ndef = new NDEFReader();

async function startScanning() {
  await ndef.scan();
  ndef.onreading = event => {
    /* handle NDEF messages */
  };
}

const nfcPermissionStatus = await navigator.permissions.query({ name: "nfc" });
if (nfcPermissionStatus.state === "granted") {
  // NFC access was previously granted, so we can start NFC scanning now.
  startScanning();
} else {
  // Show a "scan" button.
  document.querySelector("#scanButton").style.display = "block";
  document.querySelector("#scanButton").onclick = event => {
    // Prompt user to allow UA to send and receive info when they tap NFC devices.
    startScanning();
  };
}

Interrompi operazioni NFC

L'uso della primitiva AbortController semplifica l'interruzione delle operazioni NFC. L'esempio seguente mostra come trasmettere l'elemento signal di un AbortController tramite le opzioni dei metodi NDEFReader scan(), makeReadOnly() e write() e come interrompere entrambe le operazioni NFC contemporaneamente.

const abortController = new AbortController();
abortController.signal.onabort = event => {
  // All NFC operations have been aborted.
};

const ndef = new NDEFReader();
await ndef.scan({ signal: abortController.signal });

await ndef.write("Hello world", { signal: abortController.signal });
await ndef.makeReadOnly({ signal: abortController.signal });

document.querySelector("#abortButton").onclick = event => {
  abortController.abort();
};

Lettura dopo scrittura

Se utilizzi write() e poi scan() con la primitiva AbortController, puoi leggere un tag NFC dopo aver scritto un messaggio al tag. L'esempio seguente mostra come scrivere un messaggio in un tag NFC e leggere il nuovo messaggio nel tag NFC. La scansione viene interrotta dopo tre secondi.

// Waiting for user to tap NFC tag to write to it...
const ndef = new NDEFReader();
await ndef.write("Hello world");
// Success! Message has been written.

// Now scanning for 3 seconds...
const abortController = new AbortController();
await ndef.scan({ signal: abortController.signal });
const message = await new Promise((resolve) => {
  ndef.onreading = (event) => resolve(event.message);
});
// Success! Message has been read.

await new Promise((r) => setTimeout(r, 3000));
abortController.abort();
// Scanning is now stopped.

Leggere e scrivere un record di testo

Il record di testo data può essere decodificato con un'istanza TextDecoder creata con la proprietà record encoding. Tieni presente che la lingua del record di testo è disponibile tramite la relativa proprietà lang.

function readTextRecord(record) {
  console.assert(record.recordType === "text");
  const textDecoder = new TextDecoder(record.encoding);
  console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
}

Per scrivere un record di testo semplice, passa una stringa al metodo write() di NDEFReader.

const ndef = new NDEFReader();
await ndef.write("Hello World");

I record di testo sono UTF-8 per impostazione predefinita e presuppongono la lingua del documento corrente, ma è possibile specificare entrambe le proprietà (encoding e lang) utilizzando la sintassi completa per creare un record NDEF personalizzato.

function a2utf16(string) {
  let result = new Uint16Array(string.length);
  for (let i = 0; i < string.length; i++) {
    result[i] = string.codePointAt(i);
  }
  return result;
}

const textRecord = {
  recordType: "text",
  lang: "fr",
  encoding: "utf-16",
  data: a2utf16("Bonjour, François !")
};

const ndef = new NDEFReader();
await ndef.write({ records: [textRecord] });

Leggere e scrivere un record URL

Usa TextDecoder per decodificare il valore data del record.

function readUrlRecord(record) {
  console.assert(record.recordType === "url");
  const textDecoder = new TextDecoder();
  console.log(`URL: ${textDecoder.decode(record.data)}`);
}

Per scrivere un record di URL, passa un dizionario di messaggi NDEF al metodo write() NDEFReader. Il record URL contenuto nel messaggio NDEF viene definito come un oggetto con una chiave recordType impostata su "url" e una chiave data impostata sulla stringa dell'URL.

const urlRecord = {
  recordType: "url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [urlRecord] });

Leggere e scrivere un record di tipo MIME

La proprietà mediaType di un record di tipo MIME rappresenta il tipo MIME del payload del record NDEF per consentire la decodifica corretta di data. Ad esempio, utilizza JSON.parse per decodificare il testo JSON e un elemento Image per decodificare i dati delle immagini.

function readMimeRecord(record) {
  console.assert(record.recordType === "mime");
  if (record.mediaType === "application/json") {
    const textDecoder = new TextDecoder();
    console.log(`JSON: ${JSON.parse(decoder.decode(record.data))}`);
  }
  else if (record.mediaType.startsWith('image/')) {
    const blob = new Blob([record.data], { type: record.mediaType });
    const img = new Image();
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  }
  else {
    // TODO: Handle other MIME types.
  }
}

Per scrivere un record di tipo MIME, passa un dizionario di messaggi NDEF al metodo write() NDEFReader. Il record di tipo MIME contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata su "mime", una chiave mediaType impostata sul tipo MIME effettivo dei contenuti e una chiave data impostata su un oggetto che può essere ArrayBuffer o fornire una visualizzazione su ArrayBuffer (ad es. Uint8Array, DataView).

const encoder = new TextEncoder();
const data = {
  firstname: "François",
  lastname: "Beaufort"
};
const jsonRecord = {
  recordType: "mime",
  mediaType: "application/json",
  data: encoder.encode(JSON.stringify(data))
};

const imageRecord = {
  recordType: "mime",
  mediaType: "image/png",
  data: await (await fetch("icon1.png")).arrayBuffer()
};

const ndef = new NDEFReader();
await ndef.write({ records: [jsonRecord, imageRecord] });

Leggere e scrivere un record di URL assoluto

Il record di URL assoluto data può essere decodificato con un semplice TextDecoder.

function readAbsoluteUrlRecord(record) {
  console.assert(record.recordType === "absolute-url");
  const textDecoder = new TextDecoder();
  console.log(`Absolute URL: ${textDecoder.decode(record.data)}`);
}

Per scrivere un record di URL assoluto, trasmetti un dizionario di messaggi NDEF al metodo write() NDEFReader. Il record di URL assoluto contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata su "absolute-url" e una chiave data impostata sulla stringa URL.

const absoluteUrlRecord = {
  recordType: "absolute-url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [absoluteUrlRecord] });

Leggere e scrivere un poster smart

Un record poster intelligente (utilizzato in annunci su riviste, volantini, cartelloni e così via) descrive alcuni contenuti web come record NDEF che contengono un messaggio NDEF come payload. Richiama record.toRecords() per trasformare data in un elenco di record contenuti nel record smart poster. Deve avere un record URL, un record di testo per il titolo, un record di tipo MIME per l'immagine e alcuni record di tipo locale personalizzato come ":t", ":act" e ":s" rispettivamente per il tipo, l'azione e le dimensioni del record poster intelligente.

I record di tipo locale sono univoci solo nel contesto locale del record NDEF contenente. Utilizzale quando il significato dei tipi non è rilevante al di fuori del contesto locale del record contenente e quando l'utilizzo dello spazio di archiviazione è un vincolo. I nomi dei record di tipo locale iniziano sempre con : in NFC web (ad es. ":t", ":s", ":act"). Questo consente di distinguere un record di testo da un record di testo di tipo locale, ad esempio.

function readSmartPosterRecord(smartPosterRecord) {
  console.assert(record.recordType === "smart-poster");
  let action, text, url;

  for (const record of smartPosterRecord.toRecords()) {
    if (record.recordType == "text") {
      const decoder = new TextDecoder(record.encoding);
      text = decoder.decode(record.data);
    } else if (record.recordType == "url") {
      const decoder = new TextDecoder();
      url = decoder.decode(record.data);
    } else if (record.recordType == ":act") {
      action = record.data.getUint8(0);
    } else {
      // TODO: Handle other type of records such as `:t`, `:s`.
    }
  }

  switch (action) {
    case 0:
      // Do the action
      break;
    case 1:
      // Save for later
      break;
    case 2:
      // Open for editing
      break;
  }
}

Per scrivere un record poster intelligente, passa un messaggio NDEF al metodo write() NDEFReader. Il record smart poster contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata su "smart-poster" e una chiave data impostata su un oggetto che rappresenta (una volta di nuovo) un messaggio NDEF contenuto nel record smart poster.

const encoder = new TextEncoder();
const smartPosterRecord = {
  recordType: "smart-poster",
  data: {
    records: [
      {
        recordType: "url", // URL record for smart poster content
        data: "https://my.org/content/19911"
      },
      {
        recordType: "text", // title record for smart poster content
        data: "Funny dance"
      },
      {
        recordType: ":t", // type record, a local type to smart poster
        data: encoder.encode("image/gif") // MIME type of smart poster content
      },
      {
        recordType: ":s", // size record, a local type to smart poster
        data: new Uint32Array([4096]) // byte size of smart poster content
      },
      {
        recordType: ":act", // action record, a local type to smart poster
        // do the action, in this case open in the browser
        data: new Uint8Array([0])
      },
      {
        recordType: "mime", // icon record, a MIME type record
        mediaType: "image/png",
        data: await (await fetch("icon1.png")).arrayBuffer()
      },
      {
        recordType: "mime", // another icon record
        mediaType: "image/jpg",
        data: await (await fetch("icon2.jpg")).arrayBuffer()
      }
    ]
  }
};

const ndef = new NDEFReader();
await ndef.write({ records: [smartPosterRecord] });

Leggere e scrivere un record di tipo esterno

Per creare record definiti per l'applicazione, utilizza record di tipo esterni. Questi potrebbero contenere un messaggio NDEF come payload accessibile con toRecords(). Il nome contiene il nome di dominio dell'organizzazione emittente, due punti e un nome del tipo di almeno un carattere, ad esempio "example.com:foo".

function readExternalTypeRecord(externalTypeRecord) {
  for (const record of externalTypeRecord.toRecords()) {
    if (record.recordType == "text") {
      const decoder = new TextDecoder(record.encoding);
      console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
    } else if (record.recordType == "url") {
      const decoder = new TextDecoder();
      console.log(`URL: ${decoder.decode(record.data)}`);
    } else {
      // TODO: Handle other type of records.
    }
  }
}

Per scrivere un record di tipo esterno, passa un dizionario di messaggi NDEF al metodo write() NDEFReader. Il record di tipo esterno contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata sul nome del tipo esterno e una chiave data impostata su un oggetto che rappresenta un messaggio NDEF contenuto nel record di tipo esterno. Tieni presente che la chiave data può anche essere una ArrayBuffer o fornisce una visualizzazione su un ArrayBuffer (ad esempio Uint8Array, DataView).

const externalTypeRecord = {
  recordType: "example.game:a",
  data: {
    records: [
      {
        recordType: "url",
        data: "https://example.game/42"
      },
      {
        recordType: "text",
        data: "Game context given here"
      },
      {
        recordType: "mime",
        mediaType: "image/png",
        data: await (await fetch("image.png")).arrayBuffer()
      }
    ]
  }
};

const ndef = new NDEFReader();
ndef.write({ records: [externalTypeRecord] });

Leggere e scrivere un record vuoto

Un record vuoto non ha payload.

Per scrivere un record vuoto, passa un dizionario di messaggi NDEF al metodo write() NDEFReader. Il record vuoto contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata su "empty".

const emptyRecord = {
  recordType: "empty"
};

const ndef = new NDEFReader();
await ndef.write({ records: [emptyRecord] });

Supporto del browser

La tecnologia NFC web è disponibile su Android con Chrome 89.

Suggerimenti per sviluppatori

Ecco un elenco di cose che avrei voluto sapere quando ho iniziato a giocare con la tecnologia Web NFC:

• Android gestisce i tag NFC a livello di sistema operativo prima che la tecnologia NFC web sia operativa.
• Puoi trovare un'icona NFC su material.io.
• Utilizza il record NDEF id per identificare facilmente un record quando necessario.
• Un tag NFC non formattato che supporta NDEF contiene un singolo record di tipo vuoto.
• Scrivere un record di app Android è facile, come mostrato di seguito.

const encoder = new TextEncoder();
const aarRecord = {
  recordType: "android.com:pkg",
  data: encoder.encode("com.example.myapp")
};

const ndef = new NDEFReader();
await ndef.write({ records: [aarRecord] });

Demo

Prova l'esempio ufficiale e alcune interessanti demo di NFC web:

• Demo delle schede
• Demo di alimenti
• Sensore NFC Intel RSP
• MEMO sui contenuti multimediali

Demo delle carte NFC web al Chrome Dev Summit 2019

Feedback

Il Web NFC Community Group e il team di Chrome vorrebbero conoscere la tua opinione ed esperienza con Web NFC.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea?

Segnala un problema relativo alle specifiche sul repository GitHub di Web NFC o aggiungi le tue opinioni a un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, di fornire semplici istruzioni per riprodurre il bug e di avere impostato i componenti su Blink>NFC. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra assistenza

Intendi utilizzare Web NFC? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto è fondamentale supportarle.

Invia un tweet a @ChromiumDev usando l'hashtag #WebNFC e facci sapere dove e come lo stai usando.

Link utili

• Specifiche
• Demo NFC web | Fonte demo NFC web
• Bug di monitoraggio
• Voce ChromeStatus.com
• Componente Blink: Blink>NFC

Ringraziamenti

Grazie di cuore a chi partecipa a Intel per l'implementazione di Web NFC. Google Chrome dipende dalla collaborazione di una community di impegnati per la realizzazione del progetto Chromium. Non tutti i responsabili di Chromium sono Googler e questi collaboratori meritano un riconoscimento speciale.