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 NFC web?

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

L'NFC web consente ai siti di leggere e scrivere sui tag NFC quando vengono nelle vicinanze del dispositivo dell'utente (solitamente 5-10 cm). L'ambito attuale è limitato all'NFC Data Exchange Format (NDEF), un formato leggero che funziona con diversi formati di tag.

Diagramma di un'operazione NFC

Casi d'uso suggeriti

NFC web è limitata a NDEF perché le proprietà di sicurezza della lettura e dei dati NDEF sono più facilmente quantificabili. Operazioni di I/O di basso livello (ad es. ISO-DEP, NFC-A/B, NFC-F), modalità di comunicazione peer-to-peer e carta basata su host L'emulazione (HCE) non è supportata.

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

• I musei e le gallerie d'arte possono mostrare ulteriori informazioni su un'esposizione 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 su un un container per aggiornare le informazioni sui contenuti.
• I siti di conferenze possono utilizzarlo per scansionare i badge NFC durante l'evento e per verificare sono bloccati per impedire ulteriori modifiche alle informazioni scritte su di essi.
• I siti possono usarlo per condividere i segreti iniziali necessari per il dispositivo o il servizio scenari di provisioning, nonché il deployment dei dati di configurazione .

di Gemini Advanced.

Gestione dell'inventario NFC illustrata

Stato attuale

Passaggio	Stato
1. Crea messaggio esplicativo	Completato
2. Crea la bozza iniziale delle specifiche	Completato
3. Raccogli feedback e esegui l'iterazione del design	Completato
4. Prova dell'origine	Completato
5. lancio	Completato

Usa NFC web

Rilevamento delle caratteristiche

Il rilevamento delle funzionalità per l'hardware è diverso da quello che probabilmente conosci. La presenza di NDEFReader indica che il browser supporta la tecnologia NFC web, ma e non se è presente l'hardware richiesto. In particolare, se l'hardware mancante, la promessa restituita da determinate chiamate sarà rifiutata. Ti fornirò nei dettagli quando descrivi NDEFReader.

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

Terminologia

Un tag NFC è un dispositivo NFC passivo, ovvero alimentato da sensori magnetici a induzione quando un dispositivo NFC attivo (ad esempio un telefono) si trova nelle vicinanze. Tag NFC sono disponibili in varie forme, 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 la funzionalità per preparare le azioni di lettura e/o scrittura che vengono eseguite quando un tag NDEF nelle vicinanze. NDEF in NDEFReader è l'acronimo di NFC Data Exchange Formato: un formato di messaggio binario leggero standardizzato dal NFC Forum.

L'oggetto NDEFReader serve per agire sui messaggi NDEF in arrivo dai tag NFC e per scrivere messaggi NDEF su tag NFC all'interno del raggio d'azione.

Un tag NFC che supporta NDEF è come un post-it. Chiunque può leggerle a meno che non sia di sola lettura, chiunque può scrivere. Contiene un singolo 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. L'NFC web supporta i seguenti tipi di record standardizzati NFC Forum: vuoto, testo, URL, poster intelligente, tipo MIME, URL assoluto, tipo esterno, sconosciuto e locale di testo.

Diagramma di un messaggio NDEF

Scansiona i tag NFC

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

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

Una volta risolta la promessa, i messaggi NDEF in arrivo saranno disponibili iscrizione agli eventi reading tramite un listener di eventi. Dovresti anche iscriverti agli eventi readingerror per ricevere una notifica quando sono presenti tag NFC non compatibili vicinanza.

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. it contiene due proprietà univoche:

• 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 il contenuto del messaggio NDEF, esegui il loop di message.records e elaborano i membri di data in modo appropriato in base ai loro recordType. Il membro data è esposto come DataView perché consente la gestione 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 basati su i loro tipi.

Scrittura di tag NFC

Per scrivere tag NFC, crea prima un'istanza per un nuovo oggetto NDEFReader. Chiamata in corso write() restituisce una promessa. Se l'accesso non è stato eseguito, potrebbe essere richiesto all'utente concesso in precedenza. A questo punto, un messaggio NDEF è "preparato" e prometti si risolve se tutte le seguenti condizioni sono soddisfatte:

• È stato chiamato soltanto in risposta a un gesto dell'utente, ad esempio un gesto tattile o clic del mouse.
• L'utente ha consentito al sito web di interagire con dispositivi NFC.
• Il telefono dell'utente supporta la tecnologia NFC.
• L'utente ha attivato 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, 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 in un tag NFC, passa un dizionario che rappresenta un NDEF messaggio 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 URL record definito come un oggetto con una chiave recordType impostata su "url" e un 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}.`);
});

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

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

Se il tag NFC contiene un messaggio NDEF che non deve essere sovrascritto, imposta la proprietà overwrite a false nelle opzioni passate a write() . In questo caso, la promessa restituita rifiuterà se un messaggio NDEF viene già memorizzati 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 modalità di sola lettura permanente. Questa operazione è un processo unidirezionale e non può essere annullato. Una volta che un tag NFC è diventato di sola lettura, non può essere scritto in un dato momento.

Per rendere i tag NFC di sola lettura, crea prima un'istanza per un nuovo oggetto NDEFReader. Chiamata in corso makeReadOnly() restituisce una promessa. Se l'accesso non è stato eseguito, potrebbe essere richiesto all'utente concesso in precedenza. La promessa si risolve se tutte le condizioni seguenti sono soddisfatte soddisfatti:

• È stato chiamato soltanto in risposta a un gesto dell'utente, ad esempio un gesto tattile o clic del mouse.
• L'utente ha consentito al sito web di interagire con dispositivi NFC.
• Il telefono dell'utente supporta la tecnologia NFC.
• L'utente ha attivato NFC sul proprio smartphone.
• L'utente ha toccato un tag NFC e il tag NFC è stato reso 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}`);
});

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, controlla se questa funzionalità è supportata con:

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

Sicurezza e autorizzazioni

Il team di Chrome ha progettato e implementato l'NFC web sulla base dei principi fondamentali definita in Controllo dell'accesso a una piattaforma web potente Funzionalità, tra cui controllo utente, trasparenza ed ergonomia.

Dato che NFC espande il dominio delle informazioni potenzialmente disponibili a utenti malintenzionati siti web, la disponibilità della tecnologia NFC è limitata per massimizzare l'esperienza utente l'awareness e la sull'uso della tecnologia NFC.

Richiesta utente NFC web

L'NFC web è disponibile solo per i frame di primo livello e i contesti di navigazione sicura (HTTPS ). Le origini devono prima richiedere l'autorizzazione "nfc" durante la gestione di una gesto dell'utente (ad esempio un clic su un pulsante). I NDEFReader scan(), write() e I metodi makeReadOnly() attivano un prompt 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 di una richiesta di autorizzazione fisica Il movimento di portare il dispositivo sopra un tag NFC bersaglio rispecchia il selettore. pattern trovato nell'altra API di accesso al file e al dispositivo.

Per eseguire una scansione o una scrittura, la pagina web deve essere visibile quando l'utente tocca un tag NFC insieme al dispositivo. Il browser utilizza il feedback aptico per indicare che tocca. L'accesso alla radio NFC è bloccato se il display è spento o il dispositivo bloccato. Per le pagine web non visibili, la ricezione e il push di contenuti NFC vengono sospesa e ripresa quando una pagina web diventa di nuovo visibile.

Grazie all'API Page Visibility è possibile monitorare quando modifiche alla visibilità.

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'API Permissions consente di verificare se l'autorizzazione "nfc" è stata concesso. Questo esempio mostra come eseguire la scansione dei tag NFC senza interazione dell'utente se l'accesso è stato concesso in precedenza o mostra un pulsante in altro modo. Tieni presente che lo stesso funziona per la scrittura di tag NFC in quanto utilizza la stessa autorizzazione nell'ambito cappuccio.

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 le operazioni NFC

L'utilizzo dell'istruzione AbortController semplifica l'interruzione dell'NFC operazioni. L'esempio seguente mostra come passare signal di un AbortController tramite le opzioni di NDEFReader scan(), makeReadOnly(), write() e interrompi 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();
};

Leggi dopo la scrittura

Utilizzo di write(), poi scan() con AbortController permette di leggere un tag NFC dopo avervi scritto un messaggio. L'esempio riportato di seguito mostra come scrivere un messaggio di testo a 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 il registra la proprietà encoding. Tieni presente che la lingua del record di testo è disponibile tramite la sua 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");

Per impostazione predefinita, i record di testo utilizzano la codifica UTF-8 e utilizzano la lingua del documento corrente, è 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 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 a NDEFReader write(). Il record dell'URL contenuto nel messaggio NDEF viene definito come con una chiave recordType impostata su "url" e una chiave data impostata per l'URL stringa.

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 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 a NDEFReader write(). Il record di tipo MIME contenuto nel messaggio NDEF è definito come un oggetto con una chiave recordType impostata su "mime", una chiave mediaType impostata su il tipo MIME effettivo dei contenuti e una chiave data impostata su un oggetto che può essere ArrayBuffer o fornisce 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] });

Legge e scrivi un record URL assoluto

Il record di URL assoluto data può essere decodificato con una 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 dell'URL assoluto, passa un dizionario di messaggi NDEF alla Metodo write() NDEFReader. Il record URL assoluto contenuto nell'NDEF messaggio è 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 record poster intelligente

Un poster intelligente (utilizzato in pubblicità su riviste, volantini, cartelloni pubblicitari e così via), descrive alcuni contenuti web come record NDEF che includono un come payload. Chiama record.toRecords() per trasformare data in un elenco dei record contenuti nel record smart poster. Dovrebbe avere un record URL, un record di testo per il titolo, un record di tipo MIME per l'immagine e alcune record di tipo locale come ":t", ":act" e ":s" rispettivamente per tipo, azione e dimensioni del record poster intelligente.

I record di tipo locale sono univoci solo nel contesto locale dell'elemento pubblicitario record NDEF. Usali quando il significato dei tipi non è importante al di fuori del contesto locale del record che lo contiene e quando l'utilizzo dello spazio di archiviazione è di blocco. I nomi dei record di tipo locale iniziano sempre con : in NFC web (ad es. ":t", ":s" e ":act"). Questo serve a differenziare un record di testo da un un record di testo.

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 a NDEFReader write() . Il record del poster intelligente contenuto nel messaggio NDEF è definito come con una chiave recordType impostata su "smart-poster" e una chiave data impostata su un oggetto che rappresenta (ancora una volta) un messaggio NDEF contenuto 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, usa i record di tipo esterno. Questi possono Contenere un messaggio NDEF come payload accessibile con toRecords(). Loro contiene il nome di dominio dell'organizzazione emittente, i due punti e il tipo formato da 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 alla Metodo write() NDEFReader. Il record di tipo esterno contenuto nell'NDEF viene definito come un oggetto con una chiave recordType impostata sul nome del di tipo esterno e una chiave data impostate su un oggetto che rappresenta un messaggio NDEF contenuto nel record di tipo esterno. Tieni presente che il tasto data può essere anche su ArrayBuffer o fornisce una visualizzazione su ArrayBuffer (ad es. Uint8Array e 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] });

Leggi e scrivi un record vuoto

Un record vuoto non contiene payload.

Per scrivere un record vuoto, passa un dizionario di messaggi NDEF a NDEFReader write(). Il record vuoto contenuto nel messaggio NDEF viene 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 la tecnologia NFC web:

• Android gestisce i tag NFC a livello di sistema operativo prima che la tecnologia NFC web sia operativa.
• Puoi trovare un'icona NFC sul sito 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 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 l'esempio ufficiale e alcune interessanti demo dell'NFC per il web:

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

di Gemini Advanced.

Demo delle carte NFC web al Chrome Dev Summit 2019

Feedback

Il Web NFC Community Group e Il team di Chrome vorrebbe conoscere la tua opinione ed esperienza con la tecnologia NFC web.

Parlaci della progettazione dell'API

C'è qualcosa che non funziona come previsto nell'API? Oppure ci sono mancano metodi o proprietà necessari per implementare la tua idea?

Invia un problema relativo alle specifiche sul repository GitHub NFC web 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 rispetto alle specifiche?

Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere fornire maggiori dettagli possibili, fornire semplici istruzioni per riprodurre il bug e Componenti impostati su Blink>NFC. Glitch è perfetto per e condividere riproduzioni facili e veloci.

Mostra il tuo sostegno

Intendi utilizzare la tecnologia NFC web? Il tuo supporto pubblico aiuta il team di Chrome dare la priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle.

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

Link utili

• Specifiche
• Demo NFC web | Fonte della demo NFC web
• Monitoraggio del bug
• Voce ChromeStatus.com
• Componente Blink: Blink>NFC

Ringraziamenti

Grazie mille al team di Intel per aver implementato la tecnologia NFC web. Google Chrome dipende da una community di committenti che collaborano per spostare Chromium progetto. Non tutti i committer di Chromium sono Googler e questi i collaboratori meritano un riconoscimento speciale.