Agora é possível ler e gravar em etiquetas NFC.
O que é Web NFC?
NFC significa comunicação a curta distância (NFC, na sigla em inglês), uma tecnologia sem fio de curto alcance que opera a 13,56 MHz e permite a comunicação entre dispositivos a uma distância inferior a 10 cm e uma taxa de transmissão de até 424 kbit/s.
A NFC da Web oferece aos sites a capacidade de ler e gravar em tags NFC quando elas estão próximas do dispositivo do usuário (geralmente de 5 a 10 cm, 2 a 4 polegadas). O escopo atual é limitado ao formato NFC Data Exchange Format (NDEF), um formato leve de mensagem binária que funciona em diferentes formatos de tags.
![Smartphone ativando uma tag NFC para trocar dados](https://developer.chrome.com/static/docs/capabilities/nfc/image/phone-powering-an-nfc-ta-6042b0ba379e8.png?authuser=5&hl=pt-br)
Casos de uso sugeridos
A NFC Web está limitada ao NDEF porque as propriedades de segurança da leitura e gravação de dados NDEF são mais facilmente quantificáveis. Operações de E/S de baixo nível (por exemplo, ISO-DEP, NFC-A/B, NFC-F), modo de comunicação ponto a ponto e Emulação de cartão baseado em host (HCE, na sigla em inglês) não são compatíveis.
Exemplos de sites que podem usar Web NFC:
- Museus e galerias de arte podem exibir mais informações sobre uma tela quando o usuário toca o dispositivo em um cartão NFC perto da exposição.
- Os sites de gerenciamento de inventário podem ler ou gravar dados na tag NFC em um contêiner para atualizar as informações sobre o conteúdo.
- Os sites de conferência podem usá-lo para digitalizar selos NFC durante o evento e garantir que eles estejam bloqueados para evitar outras mudanças nas informações escritas neles.
- Os sites podem usá-lo para compartilhar os secrets iniciais necessários para cenários de provisionamento de dispositivos ou serviços e também para implantar dados de configuração no modo operacional.
![Smartphone lendo várias etiquetas NFC](https://developer.chrome.com/static/docs/capabilities/nfc/image/phone-scanning-several-nf-b3de890312af6.png?authuser=5&hl=pt-br)
Status atual
Step | Status |
---|---|
1. Criar explicação | Concluído |
2. Criar rascunho inicial da especificação | Concluído |
3. Reunir feedbacks e iterar no design | Concluído |
4. Teste de origem | Concluído |
5. lançamento | Concluído |
Usar NFC Web
Detecção de recursos
A detecção de recursos para hardware é diferente do que você provavelmente está acostumado.
A presença de NDEFReader
informa que o navegador é compatível com Web NFC, mas não se o hardware necessário está presente. Em particular, se o hardware estiver
ausente, a promessa retornada por determinadas chamadas será rejeitada. Vou fornecer
detalhes quando descrever NDEFReader
.
if ('NDEFReader' in window) { /* Scan and write NFC tags */ }
Terminologia
Uma tag NFC é um dispositivo NFC passivo, o que significa que é alimentado por indução magnética quando um dispositivo NFC ativo (como um smartphone) está próximo. As tags NFC vêm em várias formas e estilos, como adesivos, cartões de crédito, punhos com braços e muito mais.
![Foto de uma tag NFC transparente](https://developer.chrome.com/static/docs/capabilities/nfc/image/photo-a-transparent-nfc-c2377ef8acaaa.jpg?authuser=5&hl=pt-br)
O objeto NDEFReader
é o ponto de entrada na Web NFC que expõe a funcionalidade de preparar ações de leitura e/ou gravação que são atendidas quando uma tag NDEF se aproxima. O NDEF
em NDEFReader
significa "NFC Data Exchange Format", um formato de mensagem binária leve padronizado pelo NFC Forum (link em inglês).
O objeto NDEFReader
atua em mensagens NDEF recebidas de tags NFC e para gravar mensagens NDEF em tags NFC dentro do alcance.
Uma tag NFC compatível com NDEF é como um post-it. Qualquer pessoa pode lê-la e, a menos que seja somente leitura, qualquer pessoa pode gravar. Ele contém uma única mensagem NDEF que encapsula um ou mais registros NDEF. Cada registro NDEF é uma estrutura binária que contém um payload de dados e informações de tipo associadas. A NFC da Web oferece suporte aos seguintes tipos de registro padronizados do fórum de NFC: vazio, texto, URL, pôster inteligente, tipo MIME, URL absoluto, tipo externo, desconhecido e tipo local.
![Diagrama de uma mensagem NDEF](https://developer.chrome.com/static/docs/capabilities/nfc/image/diagram-an-ndef-message-5fdf1496614dd.png?authuser=5&hl=pt-br)
Ler etiquetas NFC
Para ler tags NFC, primeiro instancie um novo objeto NDEFReader
. Chamar scan()
retorna uma promessa. O usuário pode ser solicitado se o acesso não foi concedido anteriormente. A promessa vai ser resolvida se todas as condições a seguir forem atendidas:
- Ele era chamado apenas em resposta a um gesto do usuário, como um gesto de toque ou um clique do mouse.
- O usuário permitiu que o site interagisse com dispositivos NFC.
- O smartphone do usuário é compatível com NFC.
- O usuário ativou a NFC no smartphone.
Quando a promessa for resolvida, as mensagens NDEF recebidas estarão disponíveis ao assinar eventos reading
por meio de um listener de eventos. Inscreva-se também em eventos readingerror
para receber uma notificação quando tags NFC incompatíveis estiverem próximas.
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 uma tag NFC está próxima, um evento NDEFReadingEvent
é disparado. Ela
contém duas propriedades exclusivas:
serialNumber
representa o número de série do dispositivo (por exemplo, 00-11-22-33-44-55-66) ou uma string vazia se nenhuma estiver disponível.message
representa a mensagem NDEF armazenada na tag NFC.
Para ler o conteúdo da mensagem NDEF, percorra message.records
e processe os membros data
adequadamente com base em recordType
.
O membro data
é exposto como um DataView
, o que permite processar
casos em que os dados são codificados em 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.
}
}
};
Gravar etiquetas NFC
Para gravar tags NFC, primeiro instancie um novo objeto NDEFReader
. Chamar write()
retorna uma promessa. O usuário pode ser solicitado se o acesso não foi concedido anteriormente. Neste ponto, uma mensagem NDEF está "preparada" e uma promessa é resolvida se todas as condições a seguir forem atendidas:
- Ele era chamado apenas em resposta a um gesto do usuário, como um gesto de toque ou um clique do mouse.
- O usuário permitiu que o site interagisse com dispositivos NFC.
- O smartphone do usuário é compatível com NFC.
- O usuário ativou a NFC no smartphone.
- O usuário tocou em uma tag NFC, e uma mensagem NDEF foi escrita.
Para gravar texto em uma tag NFC, transmita uma string para o método write()
.
const ndef = new NDEFReader();
ndef.write(
"Hello World"
).then(() => {
console.log("Message written.");
}).catch(error => {
console.log(`Write failed :-( try again: ${error}.`);
});
Para gravar um registro de URL em uma tag NFC, transmita um dicionário que represente uma mensagem NDEF para write()
. No exemplo abaixo, a mensagem NDEF é um dicionário com uma chave records
. O valor dele é uma matriz de registros. Nesse caso, um registro de URL
definido como um objeto com uma chave recordType
definida como "url"
e uma chave data
definida como a string do 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}.`);
});
Também é possível gravar vários registros em uma 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 a tag NFC tiver uma mensagem NDEF que não deve ser substituída, defina a propriedade overwrite
como false
nas opções transmitidas para o método write()
. Nesse caso, a promessa retornada será rejeitada se uma mensagem NDEF já estiver armazenada na 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}.`);
});
Tornar tags NFC somente leitura
Para evitar que usuários mal-intencionados substituam o conteúdo de uma tag NFC, é possível tornar as tags NFC permanentemente somente leitura. Essa operação é um processo unidirecional e não pode ser revertida. Depois que uma tag NFC passa a ser somente leitura, ela não pode mais ser gravada.
Para tornar tags NFC somente leitura, primeiro instancie um novo objeto NDEFReader
. Chamar makeReadOnly()
retorna uma promessa. O usuário pode ser solicitado se o acesso não foi concedido anteriormente. A promessa vai ser resolvida se as seguintes condições forem
atendidas:
- Ele era chamado apenas em resposta a um gesto do usuário, como um gesto de toque ou um clique do mouse.
- O usuário permitiu que o site interagisse com dispositivos NFC.
- O smartphone do usuário é compatível com NFC.
- O usuário ativou a NFC no smartphone.
- O usuário tocou em uma tag NFC, e essa tag foi definida como somente leitura.
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
console.log(`Operation failed: ${error}`);
});
Veja como tornar uma tag NFC permanentemente somente leitura após gravá-la.
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}`);
}
Como makeReadOnly()
está disponível no Android no Chrome 100 ou mais recente, confira
se esse recurso tem suporte para os seguintes recursos:
if ("NDEFReader" in window && "makeReadOnly" in NDEFReader.prototype) {
// makeReadOnly() is supported.
}
Segurança e permissões
A equipe do Chrome projetou e implementou a Web NFC usando os princípios fundamentais definidos em Como controlar o acesso a recursos avançados da plataforma da Web, incluindo controle do usuário, transparência e ergonomia.
Como a NFC expande o domínio das informações potencialmente disponíveis para sites maliciosos, a disponibilidade da NFC é restrita para maximizar a conscientização e o controle dos usuários sobre o uso de NFC.
![Captura de tela de um prompt NFC da Web em um site](https://developer.chrome.com/static/docs/capabilities/nfc/image/screenshot-a-web-nfc-pro-054c47951e735.png?authuser=5&hl=pt-br)
A NFC na Web está disponível apenas para frames de nível superior e contextos de navegação segura (somente HTTPS). As origens precisam primeiro solicitar a permissão "nfc"
ao processar um
gesto do usuário, como um clique de botão. Os métodos NDEFReader
scan()
, write()
e
makeReadOnly()
acionam uma solicitação do usuário se o acesso não tiver sido
concedido anteriormente.
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.
};
};
A combinação de uma solicitação de permissão iniciada pelo usuário e o movimento físico real de levar o dispositivo sobre uma tag NFC de destino espelha o padrão seletor encontrado no outro arquivo e nas APIs de acesso ao dispositivo.
Para fazer uma leitura ou gravação, a página da Web precisa estar visível quando o usuário tocar em uma tag NFC com o dispositivo. O navegador usa o retorno tátil para indicar um toque. O acesso ao rádio NFC será bloqueado se a tela estiver desligada ou o dispositivo estiver bloqueado. Para páginas da Web não visíveis, o recebimento e envio de conteúdo NFC são suspensos e retomados quando uma página da Web fica visível novamente.
Graças à API Page Visibility, é possível acompanhar quando a visibilidade do documento muda.
document.onvisibilitychange = event => {
if (document.hidden) {
// All NFC operations are automatically suspended when document is hidden.
} else {
// All NFC operations are resumed, if needed.
}
};
Manual
Aqui estão alguns exemplos de código para você começar.
Procurar permissão
A API Permissions permite verificar se a permissão "nfc"
foi
concedida. Este exemplo mostra como ler tags NFC sem interação do usuário, caso o acesso tenha sido concedido, ou como mostrar um botão. O mesmo
mecanismo funciona para gravar tags NFC, já que usa a mesma permissão em segundo plano.
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();
};
}
Cancelar operações NFC
O uso do primitivo AbortController
facilita o cancelamento de operações
NFC. O exemplo abaixo mostra como transmitir o signal
de um AbortController
pelas opções dos métodos NDEFReader scan()
, makeReadOnly()
e write()
e cancelar as duas operações NFC ao mesmo tempo.
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();
};
Leitura após gravação
O uso de write()
e, em seguida, scan()
com o primitivo AbortController
permite ler uma tag NFC depois de gravar uma mensagem nela.
O exemplo abaixo mostra como gravar uma mensagem de texto em uma tag NFC e ler a nova mensagem nela. A verificação será interrompida após três segundos.
// 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.
Ler e gravar um registro de texto
O registro de texto data
pode ser decodificado com um TextDecoder
instanciado com a
propriedade de registro encoding
. O idioma do registro de texto está
disponível na propriedade lang
.
function readTextRecord(record) {
console.assert(record.recordType === "text");
const textDecoder = new TextDecoder(record.encoding);
console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
}
Para gravar um registro de texto simples, transmita uma string para o método write()
NDEFReader.
const ndef = new NDEFReader();
await ndef.write("Hello World");
Os registros de texto são UTF-8 por padrão e assumem o idioma do documento atual, mas as duas propriedades (encoding
e lang
) podem ser especificadas usando a sintaxe completa para criar um registro NDEF personalizado.
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] });
Ler e gravar um registro de URL
Use TextDecoder
para decodificar o data
do registro.
function readUrlRecord(record) {
console.assert(record.recordType === "url");
const textDecoder = new TextDecoder();
console.log(`URL: ${textDecoder.decode(record.data)}`);
}
Para gravar um registro de URL, transmita um dicionário de mensagens NDEF para o método write()
NDEFReader. O registro de URL contido na mensagem NDEF é definido como um objeto com uma chave recordType
definida como "url"
e uma chave data
definida como a string do URL.
const urlRecord = {
recordType: "url",
data:"https://w3c.github.io/web-nfc/"
};
const ndef = new NDEFReader();
await ndef.write({ records: [urlRecord] });
Ler e gravar um registro de tipo MIME
A propriedade mediaType
de um registro de tipo MIME representa o tipo MIME do payload do registro NDEF para que data
possa ser decodificado corretamente. Por exemplo, use
JSON.parse
para decodificar texto JSON e um elemento de imagem para decodificar dados de imagem.
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.
}
}
Para gravar um registro de tipo MIME, transmita um dicionário de mensagens NDEF para o método write()
NDEFReader. O registro do tipo MIME contido na mensagem NDEF é definido como um objeto com uma chave recordType
definida como "mime"
, uma chave mediaType
definida como o tipo MIME real do conteúdo e uma chave data
definida como um objeto que pode ser ArrayBuffer
ou fornece uma visualização de um ArrayBuffer
(por exemplo, 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] });
Ler e gravar um registro de URL absoluto
O registro data
de URL absoluto pode ser decodificado com um TextDecoder
simples.
function readAbsoluteUrlRecord(record) {
console.assert(record.recordType === "absolute-url");
const textDecoder = new TextDecoder();
console.log(`Absolute URL: ${textDecoder.decode(record.data)}`);
}
Para gravar um registro de URL absoluto, transmita um dicionário de mensagens NDEF para o método write()
NDEFReader. O registro de URL absoluto contido na mensagem NDEF é definido como um objeto com uma chave recordType
definida como "absolute-url"
e uma chave data
definida como a string do URL.
const absoluteUrlRecord = {
recordType: "absolute-url",
data:"https://w3c.github.io/web-nfc/"
};
const ndef = new NDEFReader();
await ndef.write({ records: [absoluteUrlRecord] });
Ler e criar um registro de pôster inteligente
Um registro de pôster inteligente (usado em anúncios de revistas, panfletos, outdoors etc.) descreve alguns conteúdos da Web como um registro NDEF que contém uma mensagem NDEF como payload. Chame record.toRecords()
para transformar data
em uma lista de registros contidos no registro do cartaz inteligente. Ele precisa ter um registro de URL, um
registro de texto para o título, um registro de tipo MIME para a imagem e alguns registros
de tipo local personalizados, como ":t"
, ":act"
e ":s"
, respectivamente para o
tipo, a ação e o tamanho do registro do pôster inteligente.
Registros de tipo local são exclusivos apenas dentro do contexto local do registro NDEF que os contém. Use-os quando o significado dos tipos não importar fora do contexto local do registro que os contém e quando o uso do armazenamento for uma restrição rígida. Nomes de registro de tipo local sempre começam com :
na Web NFC (por exemplo, ":t"
, ":s"
, ":act"
). Isso serve para diferenciar um registro de texto de um registro de texto de tipo local, por exemplo.
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;
}
}
Para criar um registro de cartaz inteligente, transmita uma mensagem NDEF para o método write()
NDEFReader. O registro do cartaz inteligente contido na mensagem NDEF é definido como um objeto com uma chave recordType
definida como "smart-poster"
e uma chave data
definida como um objeto que representa, mais uma vez, uma mensagem NDEF contida no registro do pôster inteligente.
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] });
Ler e gravar um registro de tipo externo
Para criar registros definidos pelo aplicativo, use registros de tipo externo. Eles podem conter uma mensagem NDEF como payload acessível com toRecords()
. O
nome contém o nome de domínio da organização emissora, dois pontos e um nome
de tipo com pelo menos um caractere. Por exemplo, "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.
}
}
}
Para gravar um registro de tipo externo, transmita um dicionário de mensagens NDEF para o método write()
NDEFReader. O registro do tipo externo contido na mensagem NDEF é definido como um objeto com uma chave recordType
configurada para o nome do tipo externo e uma chave data
definida como um objeto que representa uma mensagem NDEF contido no registro do tipo externo. A chave data
também pode ser
um ArrayBuffer
ou fornece uma visualização de um ArrayBuffer
(por exemplo,
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] });
Ler e gravar um registro vazio
Um registro vazio não tem payload.
Para gravar um registro vazio, transmita um dicionário de mensagens NDEF para o método write()
NDEFReader. O registro vazio contido na mensagem NDEF é definido como um objeto com uma chave recordType
definida como "empty"
.
const emptyRecord = {
recordType: "empty"
};
const ndef = new NDEFReader();
await ndef.write({ records: [emptyRecord] });
Suporte ao navegador
A NFC Web está disponível no Android no Chrome 89.
Dicas para desenvolvedores
Aqui está uma lista de coisas que eu gostaria de saber quando comecei a jogar com a Web NFC:
- O Android lida com tags NFC no nível do SO antes que a NFC Web entre em operação.
- O ícone de NFC é encontrado em material.io.
- Use o registro NDEF
id
para identificar um registro facilmente quando necessário. - Uma tag NFC não formatada que seja compatível com NDEF contém um único registro do tipo vazio.
- É fácil gravar um registro de aplicativo Android, como mostrado abaixo.
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] });
Demonstrações
Experimente o exemplo oficial e confira algumas demonstrações legais de NFC na Web:
Feedback
O Grupo da comunidade Web NFC e a equipe do Chrome gostariam de saber suas opiniões e experiências com a NFC para Web.
Fale sobre o design da API
Há algo na API que não funciona como esperado? Ou há métodos ou propriedades ausentes que você precisa para implementar sua ideia?
Registre um problema de especificação no repositório Web NFC do GitHub (em inglês) ou adicione suas ideias a um problema atual.
Informar um problema com a implementação
Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação?
Registre um bug em https://new.crbug.com. Inclua o máximo
de detalhes possível, forneça instruções simples para reproduzir o bug e defina
Componentes como Blink>NFC
. O Glitch funciona muito bem para
compartilhar réplicas rápidas e fáceis.
Mostrar apoio
Você planeja usar Web NFC? Seu suporte público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegador como é importante oferecer suporte a eles.
Envie um tweet para @ChromiumDev com a hashtag
#WebNFC
e conte para a gente onde e como você está usando a hashtag.
Links úteis
- Especificação
- Demonstração da NFC na Web | Fonte da demonstração de NFC da Web
- Rastreamento de bugs
- Entrada ChromeStatus.com
- Componente Blink:
Blink>NFC
Agradecimentos
Agradecemos à equipe da Intel por implementar a NFC pela Web. O Google Chrome depende de uma comunidade de participantes trabalhando juntos para levar o projeto Chromium adiante. Nem todos os autores do commit do Chromium são Googler, e esses colaboradores merecem reconhecimento especial.