Questa pagina è stata tradotta dall'API Cloud Translation.

Interagire con dispositivi NFC su Chrome per Android

Ora è possibile leggere e scrivere su tag NFC.

François Beaufort

Che cos'è Web NFC?

NFC è l'acronimo di Near Field Communication, una tecnologia wireless a corto raggio che opera a 13,56 MHz e 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 nei tag NFC quando si trovano in prossimità del dispositivo dell'utente (di solito 5-10 cm). L'ambito attuale è limitato al formato NFC Data Exchange (NDEF), un formato di messaggio binario leggero che funziona su diversi formati di tag.

Lo smartphone attiva un tag NFC per scambiare dati — Diagramma di un'operazione NFC

Casi d'uso suggeriti

NFC web è limitato a NDEF perché le proprietà di sicurezza per la lettura e la scrittura dei dati NDEF sono più facilmente quantificabili. Le operazioni di I/O a basso livello (ad es. ISO-DEP, NFC-A/B, NFC-F), la modalità di comunicazione peer-to-peer e l'emulazione di carte basata su host (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 una mostra quando l'utente avvicina il proprio dispositivo a una scheda NFC nelle vicinanze della mostra.
I siti di gestione dell'inventario possono leggere o scrivere dati sul tag NFC di un contenitore per aggiornare le informazioni sui relativi contenuti.
I siti delle conferenze possono utilizzarlo per scansionare i badge NFC durante l'evento e assicurarsi che siano bloccati per impedire ulteriori modifiche alle informazioni scritte sopra.
I siti possono 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.

Smartphone che scansiona diversi tag NFC — Gestione dell'inventario NFC illustrata

Stato attuale

Passaggio	Stato
1. Creare un'animazione esplicativa	Completato
2. Creare una bozza iniziale della specifica	Completato
3. Raccogli feedback e esegui l'iterazione sul design	Completato
4. Prova dell'origine	Completato
5. Avvia	Completato

Utilizzare NFC web

Rilevamento di funzionalità

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

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

Terminologia

Un tag NFC è un dispositivo NFC passivo, il che significa che funziona tramite induzione magnetica quando è presente un dispositivo NFC attivo (ad esempio uno smartphone). I tag NFC esistono in molte forme e dimensioni, ad esempio adesivi, carte di credito, braccialetti e altro ancora.

Foto di un tag NFC trasparente — Un tag NFC trasparente

L'oggetto NDEFReader è il punto di contatto in Web NFC che espone la funzionalità per preparare le azioni di lettura e/o scrittura che vengono eseguite quando un tag NDEF si trova nelle vicinanze. NDEF in NDEFReader sta per NFC Data Exchange Format, un formato di messaggio binario leggero standardizzato dal NFC Forum.

L'oggetto NDEFReader serve per intervenire sui messaggi NDEF in arrivo dai tag NFC e per scrivere messaggi NDEF sui tag NFC nel raggio d'azione.

Un tag NFC che supporta NDEF è come un post-it. Chiunque può leggerlo e, se non è di sola lettura, chiunque può scriverci sopra. 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 le informazioni sul tipo associate. 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.

Scansionare i tag NFC

Per scansionare i tag NFC, crea prima un'istanza per un nuovo oggetto NDEFReader. La chiamata a scan() restituisce una promessa. Potrebbe essere richiesto all'utente se l'accesso non è stato precedentemente concesso. La promessa verrà risolta se sono soddisfatte tutte le seguenti condizioni:

È stato chiamato solo in risposta a un gesto dell'utente, ad esempio un gesto tocco o un clic del mouse.
L'utente ha consentito al sito web di interagire con i dispositivi NFC.
Lo smartphone dell'utente supporta la tecnologia NFC.
L'utente ha attivato la tecnologia NFC sullo smartphone.

Una volta risolta la promessa, i messaggi NDEF in arrivo sono disponibili mediante la sottoscrizione agli eventi reading tramite un listener di eventi. Devi anche iscriverti agli eventi readingerror per ricevere notifiche quando nelle vicinanze sono presenti tag NFC non compatibili.

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 es. 00-11-22-33-44-55-66) o una stringa vuota se non è disponibile.
message rappresenta il messaggio NDEF archiviato nel tag NFC.

Per leggere i contenuti del messaggio NDEF, esegui un ciclo su message.records ed elabora i relativi membri data in modo appropriato in base al loro recordType. L'elemento 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.
    }
  }
};

Scrivere su tag NFC

Per scrivere sui tag NFC, crea prima un nuovo oggetto NDEFReader. La chiamata write() restituisce una promessa. L'utente potrebbe ricevere una richiesta se l'accesso non è stato precedentemente concesso. A questo punto, un messaggio NDEF è "preparato" e la promessa verrà risolto se le seguenti condizioni sono soddisfatte:

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

Per scrivere testo in un tag NFC, passa 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 su un tag NFC, passa un dizionario che rappresenta 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 oggetto con una chiave recordType impostata su "url" e una chiave data impostata sulla stringa 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}.`);
});

È inoltre 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}.`);
});

Se il tag NFC contiene un messaggio NDEF che non deve essere sovrascritto, imposta la proprietà overwrite su false nelle opzioni passate al metodo write(). In questo caso, la promessa restituita rifiuterà se un messaggio NDEF è già archiviato 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}.`);
});

Impostare i tag NFC come di sola lettura

Per evitare che utenti malintenzionati sovrascrivano i contenuti di un tag NFC, è possibile impostare i tag NFC in modo permanente di sola lettura. Questa operazione è un processo unidirezionale e non può essere annullata. Una volta impostato un tag NFC come di sola lettura, non è più possibile scrivere su di esso.

Per impostare i tag NFC come di sola lettura, prima crea un nuovo oggetto NDEFReader. La chiamata makeReadOnly() restituisce una promessa. Potrebbe essere richiesto all'utente se l'accesso non è stato concesso in precedenza. La promessa verrà risolta se tutte le seguenti condizioni sono soddisfatte:

È stato chiamato solo in risposta a un gesto dell'utente, ad esempio un gesto tocco o un clic del mouse.
L'utente ha consentito al sito web di interagire con i dispositivi NFC.
Lo smartphone dell'utente supporta la tecnologia NFC.
L'utente ha attivato la tecnologia NFC sullo smartphone.
L'utente ha toccato un tag NFC e il tag NFC è stato impostato correttamente come di sola lettura.

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

Ecco come impostare un tag NFC come di sola lettura in modo permanente dopo avervi scritto sopra.

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, controlla 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 NFC web utilizzando i principi fondamentali definiti in Controllo dell'accesso a funzionalità potenti della piattaforma web, tra cui il controllo da parte dell'utente, la trasparenza e l'ergonomia.

Poiché la tecnologia NFC amplia il dominio delle informazioni potenzialmente disponibili per i siti web malintenzionati, la sua disponibilità è limitata per massimizzare la consapevolezza e il controllo degli utenti sull'utilizzo della tecnologia NFC.

Screenshot di una richiesta NFC web su un sito web — Richiesta utente NFC web

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

  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 il movimento fisico reale di avvicinamento del dispositivo a un tag NFC di destinazione rispecchia il pattern di selettore trovato nelle altre API di accesso a file e dispositivi.

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 tap. L'accesso alla radio NFC è bloccato se il display è spento o se il dispositivo è bloccato. Per le pagine web non visibili, la ricezione e l'invio di contenuti NFC vengono sospesi e ripresi quando una pagina web diventa di nuovo visibile.

Grazie all'API Page Visibility, è possibile monitorare le modifiche alla visibilità del documento.

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.

Verificare l'autorizzazione

L'API Permissions consente di verificare se l'autorizzazione "nfc" è stata concessa. Questo esempio mostra come scansionare i tag NFC senza interazione dell'utente se l'accesso è stato concesso in precedenza oppure come mostrare un pulsante in caso contrario. Tieni presente che lo stesso meccanismo funziona per la scrittura di tag NFC, in quanto utilizza la stessa autorizzazione.

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();
  };
}

Interrompere le operazioni NFC

L'utilizzo della primitiva AbortController semplifica l'interruzione delle operazioni NFC. L'esempio seguente mostra come trasferire signal di un AbortController tramite le opzioni dei metodi NDEFReader scan(), makeReadOnly() e write() e 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

L'utilizzo di write() e poi di scan() con il primitivo AbortController consente di leggere un tag NFC dopo aver scritto un messaggio. L'esempio seguente mostra come scrivere un messaggio su un tag NFC e leggere il nuovo messaggio nel tag NFC. La scansione si interrompe 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à del 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 semplice record di testo, passa una stringa al metodo write() NDEFReader.

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

I record di testo sono in UTF-8 per impostazione predefinita e presuppongono la lingua del documento corrente, ma entrambe le proprietà (encoding e lang) possono essere specificate utilizzando la sintassi completa per la creazione di 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

Utilizza TextDecoder per decodificare il 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 URL, passa un dizionario di messaggi NDEF al metodo NDEFReaderwrite(). Il record dell'URL contenuto nel messaggio NDEF è 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 del tipo MIME

La proprietà mediaType di un record del tipo MIME rappresenta il tipo MIME del payload del record NDEF in modo che data possa essere decodificato correttamente. Ad esempio, utilizza JSON.parse per decodificare il testo JSON e un elemento Image per decodificare i dati immagine.

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 del 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 un ArrayBuffer o fornire una visualizzazione di un 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] });

Legge e scrivi un record URL assoluto

Il record 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 URL assoluto, passa un dizionario di messaggi NDEF al metodo NDEFReader write(). Il record absolute-URL contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata su "absolute-url" e una chiave data impostata sulla stringa dell'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 record di poster intelligenti

Un record di poster intelligenti (utilizzato in annunci di riviste, volantini, cartelloni pubblicitari e così via) descrive alcuni contenuti web come un record NDEF contenente un messaggio NDEF come payload. Richiama record.toRecords() per trasformare data in un elenco di record contenuti nel record poster intelligente. 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 personalizzati, ad esempio ":t", ":act" e ":s", rispettivamente per il tipo, l'azione e le dimensioni del record del poster intelligente.

I record di tipo locale sono univoci solo nel contesto locale del record NDEF contenente. Utilizzali quando il significato dei tipi non è importante al di fuori del contesto locale del record contenente e quando l'utilizzo dello spazio di archiviazione è un vincolo rigido. I nomi dei record di tipo locale iniziano sempre con : in Web NFC (ad es. ":t", ":s", ":act"). Questo serve a 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 di poster intelligente, passa un messaggio NDEF al metodo NDEFReader write(). Il record del poster intelligente 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 (di nuovo) un messaggio NDEF contenuto nel record del poster intelligente.

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 dall'applicazione, utilizza record di tipo esterno. Questi possono contenere un messaggio NDEF come payload accessibile con toRecords(). Il loro nome contiene il nome di dominio dell'organizzazione che li ha emessi, due punti e un nome di tipo lungo 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 NDEFReader write(). Il record del 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 del tipo esterno. Tieni presente che la chiave data può anche essere un ArrayBuffer o fornire una visualizzazione di un ArrayBuffer (ad es. 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 NDEFReaderwrite(). 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 browser

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

Suggerimenti per gli sviluppatori

Ecco un elenco di cose che avrei voluto sapere quando ho iniziato a giocare con 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, se necessario.
Un tag NFC non formattato che supporta NDEF contiene un singolo record di tipo vuoto.
Scrivere un record di un'applicazione 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 lo esempio ufficiale e dai un'occhiata ad alcune fantastiche demo di Web NFC:

Demo sulle carte NFC web al Chrome Dev Summit 2019

Feedback

Il gruppo della community Web NFC e il team di Chrome vorrebbero conoscere le tue opinioni ed esperienze con Web NFC.

Fornisci informazioni sul design dell'API

C'è qualcosa nell'API che non funziona come previsto? In alternativa, mancano metodi o proprietà necessari per implementare la tua idea?

Invia un problema relativo alle specifiche nel repository GitHub Web NFC o aggiungi le tue opinioni a un problema esistente.

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalla specifica?

Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero possibile di dettagli, fornisci istruzioni semplici per riprodurre il bug e imposta Componenti su Blink>NFC. Glitch è perfetto per condividere repliche facili e veloci.

Mostra il tuo sostegno

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

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

Link utili

Ringraziamenti

Un grande grazie al team di Intel per aver implementato Web NFC. Google Chrome dipende da una community di committer che lavorano insieme per far progredire il progetto Chromium. Non tutti i committer di Chromium sono dipendenti di Google e questi collaboratori meritano un riconoscimento speciale.