Interagir com dispositivos NFC no Chrome para Android

Agora é possível ler e gravar em etiquetas NFC.

François Beaufort
François Beaufort
GitHub

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
Diagrama de uma operação NFC

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
Ilustração do Gerenciamento de inventário de NFC

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
Uma tag NFC transparente

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
Diagrama de uma mensagem NDEF

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
Prompt do usuário de NFC na Web

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:

Demonstração de cartões NFC da Web no Chrome Dev Summit 2019

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

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.