Interagir com dispositivos NFC no Chrome para Android

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

François Beaufort
François Beaufort
GitHub

O que é NFC na Web?

NFC significa NFC (Comunicação a curta distância), uma tecnologia sem fio de curto alcance que opera a 13,56 MHz, o que permite a comunicação entre dispositivos à distância menos de 10 cm e uma taxa de transmissão de até 424 kbit/s.

A NFC para Web fornece aos sites a capacidade de ler e gravar em tags NFC quando perto do dispositivo do usuário (geralmente 5 a 10 cm, 2 a 4 polegadas). O escopo atual está limitado ao formato NFC Data Exchange Format (NDEF), uma solução formato de mensagem binária que funciona em diferentes formatos de tags.

Smartphone com uma tag NFC para trocar dados
Diagrama de uma operação de NFC

Casos de uso sugeridos

A NFC na Web é limitada ao NDEF porque as propriedades de segurança de leitura e ao gravar dados NDEF são quantificáveis mais facilmente. 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 cartão baseado em host Não há suporte para emulação (HCE, na sigla em inglês).

Exemplos de sites que podem usar NFC para Web incluem:

  • Museus e galerias de arte podem exibir mais informações sobre uma exposição quando o usuário encosta o dispositivo em um cartão NFC perto da exposição.
  • Sites de gerenciamento de inventário podem ler ou gravar dados na tag NFC em um para atualizar informações sobre o conteúdo.
  • Sites de conferência podem usá-lo para ler crachás NFC durante o evento e verificar eles são bloqueados para evitar outras alterações nas informações escritas neles.
  • Os sites podem usá-lo para compartilhar secrets iniciais necessários para o dispositivo ou serviço de configuração e também implantar dados de configuração em ambientes modo
.
Verificação de várias etiquetas NFC no smartphone
Ilustração do gerenciamento de inventário de NFC

Status atual

Etapa Status
1. Criar explicação Concluído
2. Criar um rascunho inicial da especificação Concluído
3. Colete feedback e iterar no design Concluído
4. Teste de origem Concluído
5. lançamento Concluído

Usar NFC na Web

Detecção de recursos

A detecção de recursos para hardware é diferente do que você provavelmente já conhece. A presença de NDEFReader informa que o navegador oferece suporte a NFC para Web, mas e não se o hardware necessário está presente. Em particular, se o hardware for ausente, a promessa retornada por determinadas chamadas será rejeitada. Vou fornecer detalhes quando eu 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 tecnologia indução quando um dispositivo NFC ativo (como um telefone) estiver próximo. Tags NFC vêm em muitas formas e modelos, como adesivos, cartões de crédito, pulsos de braço e mais.

Foto de uma tag NFC transparente
Uma tag NFC transparente

O objeto NDEFReader é o ponto de entrada na NFC para Web que expõe a funcionalidade. para preparar ações de leitura e/ou gravação que são atendidas quando uma tag NDEF se aproximar. O NDEF em NDEFReader significa troca de dados NFC 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 ao alcance.

Uma tag NFC compatível com NDEF é como um post-it. Qualquer pessoa pode ler, e a menos que seja somente leitura, qualquer pessoa pode gravar nele. Contém um único NDEF que encapsula um ou mais registros NDEF. Cada registro NDEF é um estrutura binária que contém uma carga útil de dados e informações do tipo associado. A NFC para Web oferece suporte aos seguintes tipos de registro padronizados do NFC Forum: vazio, texto, URL, pôster inteligente, tipo MIME, URL absoluto, tipo externo, desconhecido e local não é válido.

Diagrama de uma mensagem NDEF
Diagrama de uma mensagem NDEF

Ler etiquetas NFC

Para ler tags NFC, primeiro instancie um novo objeto NDEFReader. Ligando para scan() retorna uma promessa. O usuário pode receber uma solicitação se o acesso não tiver sido feito anteriormente concedido. A promessa vai ser resolvida se as seguintes condições forem todas atendidas:

  • Ele só era chamado em resposta a um gesto do usuário, como um gesto de toque ou 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 ficarão disponíveis inscrever-se em eventos reading por meio de um listener de eventos. Você também deve assinar a eventos readingerror para ser notificado quando houver etiquetas NFC incompatíveis em proximidade.

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, faça uma repetição em message.records e processar data participantes adequadamente com base no recordType. O membro data é exposto como um DataView, porque permite o processamento 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 tags NFC

Para gravar tags NFC, primeiro instancie um novo objeto NDEFReader. Ligando write() retorna uma promessa. O usuário pode receber uma solicitação se o acesso não for concedidas anteriormente. Neste ponto, uma mensagem NDEF é "preparada" e promete será resolvido se as seguintes condições forem todas atendidas:

  • Ele só era chamado em resposta a um gesto do usuário, como um gesto de toque ou 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 gravada com sucesso.

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 um NDEF mensagem para write(). No exemplo abaixo, a mensagem NDEF é um dicionário com uma tecla records. Seu valor é uma matriz de registros; neste caso, um URL Registro definido como um objeto com uma chave recordType definida como "url" e um 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 contiver uma mensagem NDEF que não deve ser substituída, defina a propriedade overwrite para false nas opções transmitidas para write() . Nesse caso, a promessa retornada será rejeitada se uma mensagem NDEF for já 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 as 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 é definida como somente leitura, ela não pode ser gravada muito mais.

Para tornar as tags NFC somente leitura, primeiro instancie um novo objeto NDEFReader. Ligando makeReadOnly() retorna uma promessa. O usuário pode receber uma solicitação se o acesso não for concedidas anteriormente. A promessa vai ser resolvida se as seguintes condições forem todas atendidas:

  • Ele só era chamado em resposta a um gesto do usuário, como um gesto de toque ou 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 esta foi marcada 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 fazer com que uma tag NFC seja permanentemente somente leitura após gravar nela.

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 o makeReadOnly() está disponível no Android no Chrome 100 ou versões mais recentes, marque se esse recurso for compatível com:

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

Segurança e permissões

A equipe do Chrome projetou e implementou a NFC para Web usando os princípios básicos. definido em Como controlar o acesso a uma plataforma de Web avançada Recursos, incluindo controle de usuário, transparência e ergonomia.

Como a NFC expande o domínio das informações potencialmente disponíveis para usuários maliciosos sites, a disponibilidade da NFC é restrita para maximizar a conscientização e sobre o uso da NFC.

Captura de tela de uma solicitação de NFC para Web em um site
Prompt de usuário de NFC na Web

A NFC na Web só está disponível para frames de nível superior e contextos de navegação segura (HTTPS) apenas). As origens precisam primeiro solicitar a permissão "nfc" ao processar uma um gesto do usuário (por exemplo, o clique de um botão). Os NDEFReader scan(), write() e makeReadOnly() acionam uma solicitação do usuário se o acesso não tiver sido feito anteriormente. concedido.

  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 um pedido de permissão iniciado pelo usuário e um pedido de permissão o movimento de levar o dispositivo sobre uma tag NFC alvo espelha o seletor padrão encontrado nas outras APIs de acesso a arquivos e dispositivos.

Para executar uma verificação ou gravação, a página da Web deve estar visível quando o usuário tocar uma tag NFC com o dispositivo. O navegador usa o retorno tátil para indicar uma tocar. O acesso ao rádio NFC será bloqueado se a tela estiver desligada ou se o dispositivo estiver bloqueada. Para páginas da Web não visíveis, o recebimento e envio de conteúdo NFC são suspensa e retomada quando a página da Web fica visível novamente.

Graças à API Page Visibility, é possível acompanhar quando mudanças de visibilidade.

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

Veja alguns exemplos de código para você começar.

Verificar a permissão

A API Permissions permite verificar se a permissão "nfc" foi concedido. Este exemplo mostra como ler etiquetas NFC sem interação do usuário se o acesso foi concedido anteriormente, ou mostrar um botão caso contrário. Observe que o mesmo funciona para escrever etiquetas NFC, pois usa a mesma permissão de acordo com o capô

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 de NFC

O uso do primitivo AbortController facilita o cancelamento da NFC as operações. O exemplo abaixo mostra como transmitir o signal de um AbortController por meio das opções de NDEFReader scan(), makeReadOnly(), write() e abortar 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

Usando write() e, em seguida, scan() com o AbortController primitivo possibilita a leitura de uma tag NFC após escrever uma mensagem nela. O exemplo abaixo mostra como escrever uma mensagem de texto para uma tag NFC e ler a nova mensagem na tag NFC. A verificação é 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 o registrar a propriedade encoding. O idioma do registro de texto é disponível pela 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 ao método write() do NDEFReader.

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

Os registros de texto são UTF-8 por padrão e consideram 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 ao NDEFReader write(). 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 o URL fio.

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 do tipo MIME

A propriedade mediaType de um registro do tipo MIME representa o tipo MIME da 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 da 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 ao NDEFReader write(). O registro do tipo MIME contido na mensagem NDEF foi 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 um ArrayBuffer ou fornecer uma visualização para 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 de URL absoluto data 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 à função Método write() do NDEFReader. O registro de URL absoluto contido no NDEF a mensagem é definida 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 gravar um registro de pôster inteligente

Um disco de pôster inteligente (usado em propagandas de revistas, panfletos, outdoors, etc.), descreve alguns conteúdos da Web como um registro NDEF que contém um NDEF como payload. Chame record.toRecords() para transformar data em uma lista. de registros contidos no registro inteligente de cartaz. Ele deve ter um registro de URL, um registro de texto para o título, um registro de tipo MIME para a imagem e alguns recursos personalizados registros de tipo local, como ":t", ":act" e ":s", respectivamente para o tipo, ação e tamanho do registro do pôster inteligente.

Registros de tipo local são exclusivos apenas dentro do contexto local do objeto Registro NDEF. Use-as quando o significado dos tipos não importar fora do contexto local do registro que o contém e quando o uso do armazenamento for uma dificuldade restrição. Os nomes de registro de tipo local sempre começam com : em NFC para Web (por exemplo, ":t", ":s" e ":act"). Serve para diferenciar um registro de texto de um registro tipo de registro de texto, 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 gravar um registro inteligente de pôster, transmita uma mensagem NDEF ao NDEFReader write() . 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 na gravação de cartaz 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. Isso pode conter uma mensagem NDEF como payload que pode ser acessada com toRecords(). nome contém o nome de domínio da organização emissora, dois pontos e um tipo nome 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, passe um dicionário de mensagens NDEF para o Método write() do NDEFReader. O registro do tipo externo contido no NDEF é definida como um objeto com uma chave recordType definida como o nome do tipo externo e uma chave data definida como um objeto que representa uma mensagem NDEF no registro do tipo externo. A tecla data também pode ser um ArrayBuffer ou fornece uma visualização para um ArrayBuffer (por exemplo, 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] });

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 ao NDEFReader write(). 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 para 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 NFC para Web:

  • O Android processa tags NFC no nível do SO antes que a NFC para Web entre em operação.
  • O ícone NFC está disponível em material.io (link em inglês).
  • Usar o registro NDEF id para identificar facilmente um registro, quando necessário.
  • Uma tag NFC não formatada que suporta NDEF contém um único registro do tipo vazio.
  • Gravar um registro de aplicativo Android é fácil, 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

Teste o exemplo oficial (link em inglês) e confira algumas demonstrações interessantes de NFC para Web:

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

Feedback

O Grupo da comunidade NFC na Web e os A equipe do Chrome adoraria saber sua opinião e experiência com NFC para Web.

Fale sobre o design da API

Alguma coisa na API não funciona como esperado? Ou há métodos ou propriedades ausentes de que precisa para implementar sua ideia?

Registre um problema de especificação no repositório de NFC da Web no GitHub (em inglês) ou deixe sua opinião em um problema.

Informar um problema com a implementação

Você encontrou um bug na implementação do Chrome? Ou a implementação diferente das especificações?

Registre um bug em https://new.crbug.com. Não deixe de incluir todos os detalhes possíveis, fornecer instruções simples para reproduzir o bug e A opção Componentes foi definida como Blink>NFC. O Glitch funciona muito bem para o compartilhamento de reproduções rápidas e fáceis.

Mostrar apoio

Você planeja usar NFC para Web? Seu apoio público ajuda a equipe do Chrome priorizar recursos e mostrar a outros fornecedores de navegador como é essencial apoiá-los.

Envie um tweet para @ChromiumDev usando a hashtag #WebNFC e informe onde e como você o utiliza.

Links úteis

Agradecimentos

Agradecemos à equipe da Intel por implementar a NFC para Web. Google Chrome depende de uma comunidade de autores de commit trabalhando em conjunto para migrar a o projeto adiante. Nem todo autor do commit do Chromium é um Googler, e essas dos colaboradores merecem um reconhecimento especial!