Android용 Chrome에서 NFC 기기와 상호작용

이제 NFC 태그를 읽고 쓸 수 있습니다.

François Beaufort
François Beaufort

웹 NFC란 무엇인가요?

NFC는 근거리 무선 기술인 근거리 무선통신(Near Field Communications)의 약자입니다. 원거리에 있는 장치 간 통신을 가능하게 하는 13.56MHz에서 작동합니다 최대 424kbit/s의 전송 속도를 지원합니다.

웹 NFC는 사이트에 NFC 태그가 있을 때 NFC 태그를 읽고 쓰는 기능을 제공합니다. 사용자의 기기 (일반적으로 5~10cm, 2~4인치)에 가까운 곳에 있어야 합니다. 현재 범위는 경량인 NFC 데이터 교환 형식 (NDEF)으로 제한되어 있습니다. 바이너리 메시지 형식을 지원합니다.

<ph type="x-smartling-placeholder">
</ph> NFC 태그를 강화하여 데이터 교환을 하는 휴대전화
NFC 작업 다이어그램

추천 사용 사례

웹 NFC는 NDEF로 제한됩니다. 읽기 및 읽기의 보안 속성이 더 쉽게 정량화할 수 있습니다. 하위 수준 I/O 작업 (예: ISO-DEP, NFC-A/B, NFC-F), P2P 통신 모드 및 호스트 기반 카드 에뮬레이션 (HCE)은 지원되지 않습니다.

웹 NFC를 사용할 수 있는 사이트의 예는 다음과 같습니다.

  • 박물관과 미술관은 전시에 관한 추가 정보를 표시할 수 있습니다. 사용자가 전시물 근처의 NFC 카드에 기기를 터치할 때
  • 인벤토리 관리 사이트는 기기의 NFC 태그에 있는 데이터를 읽거나 콘텐츠에 관한 정보를 업데이트할 수 있습니다
  • 회의 사이트에서는 이 기능을 사용하여 이벤트 중에 NFC 배지를 스캔하고 작성된 정보를 추가로 변경하지 못하도록 잠겨 있습니다.
  • 사이트에서 기기 또는 서비스에 필요한 초기 보안 비밀을 공유하는 데 사용할 수 있습니다. 그리고 운영 환경에 구성 데이터를 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">휴대전화에서 여러 NFC 태그를 스캔 중</ph>
NFC 인벤토리 관리 그림

현재 상태

단계 상태
1. 설명 만들기 완전함
2. 사양의 초기 초안 만들기 완전함
3. 의견 수집 및 디자인 반복 완전함
4. 오리진 트라이얼 완전함
5. 개시 완전함

웹 NFC 사용

특성 감지

하드웨어의 기능 감지는 익숙한 방식과 다릅니다. NDEFReader가 있으면 브라우저가 웹 NFC를 지원하지만 있는지 여부를 확인할 수 없습니다. 특히 하드웨어가 누락된 경우 특정 호출에서 반환된 프라미스가 거부됩니다. 제공 내용 자세히 설명하겠습니다NDEFReader.

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

용어

NFC 태그는 자석으로 구동되는 수동 NFC 기기입니다. 유도가 발생합니다. NFC 태그 스티커, 신용카드, 팔 손목, 자세히 알아보세요.

<ph type="x-smartling-placeholder">
</ph> 투명 NFC 태그 사진
투명 NFC 태그

NDEFReader 객체는 기능을 노출하는 웹 NFC의 진입점입니다. NDEF 태그가 지정될 때 수행 될 읽기 및/또는 쓰기 작업을 준비하는 데 사용됩니다. 가까이서 볼 수 있습니다. NDEFReaderNDEF는 NFC 데이터 교환을 의미합니다. 형식은 NFC 포럼에 의해 표준화된 경량 바이너리 메시지 형식입니다.

NDEFReader 객체는 NFC 태그에서 수신되는 NDEF 메시지에 작동하는 데 사용됩니다. 범위 내의 NFC 태그에 NDEF 메시지를 쓰기 위해 사용됩니다.

NDEF를 지원하는 NFC 태그는 포스트잇 메모와 같습니다. 누구나 읽을 수 있음 읽기 전용이 아니면 누구나 쓸 수 있습니다. 하나의 NDEF를 포함합니다. 하나 이상의 NDEF 레코드를 캡슐화하는 메시지 각 NDEF 레코드는 바이너리 구조로 되어 있습니다. 웹 NFC는 비어 있음, 텍스트, URL, 스마트 포스터, MIME 유형, 절대 URL, 외부 유형, 알 수 없음, 로컬 있습니다.

<ph type="x-smartling-placeholder">
</ph> NDEF 메시지 다이어그램
NDEF 메시지 다이어그램

NFC 태그 스캔

NFC 태그를 스캔하려면 먼저 새 NDEFReader 객체를 인스턴스화합니다. scan()님에게 전화 거는 중 프로미스를 반환합니다. 이전에 액세스한 적이 없는 경우 사용자에게 메시지가 표시될 수 있습니다. 합니다. 다음 조건이 모두 충족되면 프로미스가 해결됩니다.

  • 터치 동작과 같은 사용자 동작이나 마우스 클릭
  • 사용자가 웹사이트에서 NFC 기기와 상호작용하도록 허용했습니다.
  • 사용자의 휴대전화가 NFC를 지원합니다.
  • 사용자가 휴대전화에서 NFC를 사용 설정했습니다.

프로미스가 해결되면 수신되는 NDEF 메시지를 이벤트 리스너를 통해 reading 이벤트를 구독합니다. 구독하세요 호환되지 않는 NFC 태그가 있을 때 알림을 readingerror 이벤트로 전송 근접성

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

NFC 태그가 가까이에 있으면 NDEFReadingEvent 이벤트가 실행됩니다. 그것은 다음 두 가지 고유한 속성을 포함합니다.

  • serialNumber는 기기의 일련번호를 나타냅니다(예: 00-11-22-33-44-55-66) 또는 빈 문자열(사용 가능한 없는 경우)
  • message는 NFC 태그에 저장된 NDEF 메시지를 나타냅니다.

NDEF 메시지의 콘텐츠를 읽으려면 message.recordsrecordType에 따라 data 회원을 적절하게 처리합니다. data 멤버는 처리를 허용하므로 DataView로 노출됩니다. 데이터가 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.
    }
  }
};
드림

NFC 태그 쓰기

NFC 태그를 쓰려면 먼저 새 NDEFReader 객체를 인스턴스화합니다. 전화 거는 중 write()는 프로미스를 반환합니다. 액세스할 수 없는 경우 사용자에게 메시지가 표시될 수 있습니다. 합니다. 이제 NDEF 메시지가 '준비되었습니다'. 약속 다음 조건이 모두 충족되면 해결됩니다.

  • 터치 동작과 같은 사용자 동작이나 마우스 클릭
  • 사용자가 웹사이트에서 NFC 기기와 상호작용하도록 허용했습니다.
  • 사용자의 휴대전화가 NFC를 지원합니다.
  • 사용자가 휴대전화에서 NFC를 사용 설정했습니다.
  • 사용자가 NFC 태그를 탭했으며 NDEF 메시지가 작성되었습니다.

NFC 태그에 텍스트를 쓰려면 문자열을 write() 메서드에 전달합니다.

const ndef = new NDEFReader();
ndef.write(
  "Hello World"
).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

NFC 태그에 URL 레코드를 작성하려면 NDEF를 나타내는 사전을 전달하세요. write()에 메시지를 보냅니다. 아래 예에서 NDEF 메시지는 사전입니다. records 키로 대체합니다. 값은 레코드의 배열(이 경우 URL)입니다. recordType 키가 "url"로 설정되고 data가 포함된 객체로 정의된 레코드 키가 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}.`);
});

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

NFC 태그에 덮어써서는 안 되는 NDEF 메시지가 포함된 경우 다음과 같이 설정합니다. write()에 전달된 옵션에서 overwrite 속성을 false로 설정합니다. 메서드를 사용하여 축소하도록 요청합니다. 이 경우 NDEF 메시지가 이(가) 이미 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}.`);
});

NFC 태그를 읽기 전용으로 설정

악의적인 사용자가 NFC 태그의 콘텐츠를 덮어쓰지 못하게 하기 위해 NFC 태그를 영구적으로 읽기 전용으로 설정합니다. 이 작업은 단방향 프로세스이며 되돌릴 수 없습니다. NFC 태그가 읽기 전용으로 바뀌면 쓸 수 없습니다. 더 이상 할 수 없습니다.

NFC 태그를 읽기 전용으로 만들려면 먼저 새 NDEFReader 객체를 인스턴스화합니다. 전화 거는 중 makeReadOnly()는 프로미스를 반환합니다. 액세스할 수 없는 경우 사용자에게 메시지가 표시될 수 있습니다. 합니다. 다음 조건이 모두 충족되면 프로미스가 해결됩니다. 충족:

  • 터치 동작과 같은 사용자 동작이나 마우스 클릭
  • 사용자가 웹사이트에서 NFC 기기와 상호작용하도록 허용했습니다.
  • 사용자의 휴대전화가 NFC를 지원합니다.
  • 사용자가 휴대전화에서 NFC를 사용 설정했습니다.
  • 사용자가 NFC 태그를 탭했으며 NFC 태그가 읽기 전용으로 설정되었습니다.
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

NFC 태그에 쓰기를 완료한 후 이 태그를 영구적으로 읽기 전용으로 설정하는 방법은 다음과 같습니다.

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

makeReadOnly()는 Android용 Chrome 100 이상에서 사용할 수 있으므로 이 기능이 다음에서 지원되는 경우:

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

보안 및 권한

Chrome팀은 핵심 원칙을 사용하여 웹 NFC를 설계하고 구현했습니다. 강력한 웹 플랫폼에 대한 액세스 제어 기능(사용자 제어, 투명성, 인체공학 포함)

NFC는 악의적인 행위자가 사용할 수 있는 정보의 영역을 확장하기 때문에 NFC의 사용 가능성은 제한적이며, 인식과 제어할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 웹사이트에 표시된 웹 NFC 메시지의 스크린샷
웹 NFC 사용자 메시지

웹 NFC는 최상위 프레임 및 보안 브라우징 컨텍스트 (HTTPS)에서만 사용할 수 있습니다. 만 해당). 출처는 먼저 "nfc" 권한을 요청하여 사용자 동작 (예: 버튼 클릭) NDEFReader scan(), write(), 이전에 액세스한 적이 없는 경우 메서드 makeReadOnly()개가 사용자 메시지를 트리거합니다. 합니다.

  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.
    };
  };

사용자가 시작한 권한 프롬프트와 사용자가 시작하는 실제 대상 NFC 태그 위로 기기를 가져오는 움직임이 선택기를 미러링함 기기 액세스 API와 유사한 패턴을 보입니다.

스캔 또는 쓰기를 수행하려면 사용자가 터치할 때 웹페이지가 표시되어야 합니다. NFC 태그가 있어야 합니다. 브라우저는 햅틱 반응을 사용하여 탭합니다. 디스플레이가 꺼져 있거나 기기가 켜져 있으면 NFC 무선 통신에 대한 액세스가 차단됩니다. 있습니다. 표시되지 않는 웹페이지의 경우 NFC 콘텐츠를 수신하고 푸시하면 정지되었다가 웹페이지가 다시 표시되면 재개됩니다.

Page Visibility API 덕분에 표시됩니다.

document.onvisibilitychange = event => {
  if (document.hidden) {
    // All NFC operations are automatically suspended when document is hidden.
  } else {
    // All NFC operations are resumed, if needed.
  }
};

설명서

다음은 시작하는 데 도움이 되는 코드 샘플입니다.

권한 확인

Permissions API: "nfc" 권한이 합니다. 이 예에서는 다음 경우에 사용자 상호작용 없이 NFC 태그를 스캔하는 방법을 보여줍니다. 버튼을 표시할 수 있습니다. 동일한 이 메커니즘은 NFC 태그 작성에 대해 작동하며 있습니다.

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

NFC 작업 취소

AbortController 프리미티브를 사용하면 NFC를 쉽게 취소할 수 있습니다. 작업을 수행할 수 있습니다 아래 예는 signal를 전달하는 방법을 보여줍니다. AbortController: NDEFReader scan(), makeReadOnly(), write() 메서드를 실행하고 두 NFC 작업을 동시에 취소합니다.

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

쓰기 후 읽기

write() 사용 후 AbortController와 함께 scan() 사용 프리미티브를 사용하면 메시지를 작성한 후에 NFC 태그를 읽을 수 있습니다. 아래의 예는 NFC 태그에 문자 메시지를 쓰고 새 메시지를 전송합니다. 3초 후 스캔이 중지됩니다.

// 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.

텍스트 레코드 읽기 및 쓰기

텍스트 레코드는 data TextDecoder 레코드 encoding 속성 텍스트 레코드의 언어는 lang 속성을 통해 사용할 수 있습니다.

function readTextRecord(record) {
  console.assert(record.recordType === "text");
  const textDecoder = new TextDecoder(record.encoding);
  console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
}

간단한 텍스트 레코드를 작성하려면 문자열을 NDEFReader write() 메서드에 전달합니다.

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

텍스트 레코드는 기본적으로 UTF-8이며 현재 문서의 언어를 가정하지만 두 속성 (encodinglang) 모두 전체 문법을 사용하여 지정할 수 있습니다. 를 참조하세요.

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

URL 레코드 읽기 및 쓰기

TextDecoder를 사용하여 레코드의 data를 디코딩합니다.

function readUrlRecord(record) {
  console.assert(record.recordType === "url");
  const textDecoder = new TextDecoder();
  console.log(`URL: ${textDecoder.decode(record.data)}`);
}

URL 레코드를 작성하려면 NDEF 메시지 사전을 NDEFReader에 전달하세요. write() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. NDEF 메시지에 포함된 URL 레코드는 recordType 키가 "url"로 설정되고 data 키가 URL로 설정된 객체 문자열.

const urlRecord = {
  recordType: "url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [urlRecord] });

MIME 유형 레코드 읽기 및 쓰기

MIME 유형 레코드의 mediaType 속성은 data가 제대로 디코딩될 수 있도록 NDEF 레코드 페이로드를 추가합니다. 예를 들어 JSON.parse: JSON 텍스트를 디코딩하고 이미지 요소를 디코딩하여 이미지 데이터를 디코딩합니다.

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.
  }
}

MIME 유형 레코드를 작성하려면 NDEF 메시지 사전을 NDEFReader에 전달하세요. write() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. NDEF 메시지에 포함된 MIME 유형 레코드가 정의됨 recordType 키가 "mime"로 설정된 객체로, mediaType 키가 콘텐츠의 실제 MIME 유형 및 할 수 있는 객체에 설정된 dataArrayBuffer이거나 ArrayBuffer에 관한 뷰를 제공합니다 (예: 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] });

절대 URL 레코드 읽기 및 쓰기

절대 URL 레코드 data는 간단한 TextDecoder를 사용하여 디코딩할 수 있습니다.

function readAbsoluteUrlRecord(record) {
  console.assert(record.recordType === "absolute-url");
  const textDecoder = new TextDecoder();
  console.log(`Absolute URL: ${textDecoder.decode(record.data)}`);
}

절대 URL 레코드를 작성하려면 NDEF 메시지 사전을 NDEFReader write() 메서드도 포함됩니다. NDEF에 포함된 절대 URL 레코드 메시지가 recordType 키가 "absolute-url"로 설정된 객체로 정의됨 URL 문자열로 설정된 data 키가 있어야 합니다.

const absoluteUrlRecord = {
  recordType: "absolute-url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [absoluteUrlRecord] });

스마트 포스터 기록 읽기 및 쓰기

스마트 포스터 기록 (잡지 광고, 전단지, 옥외 광고판, 등)은 일부 웹 콘텐츠를 NDEF가 포함된 NDEF 레코드로 설명합니다. 메시지를 페이로드로 사용합니다 record.toRecords()를 호출하여 data를 목록으로 변환 스마트 포스터 레코드에 포함된 레코드와 일치해야 합니다. URL 레코드, 제목에 대한 텍스트 레코드, 이미지에 대한 MIME 유형 레코드, 몇 가지 커스텀 로컬 유형 레코드(예: 각각 ":t", ":act", ":s") 스마트 포스터 레코드의 유형, 작업, 크기를 지정합니다.

로컬 유형 레코드는 포함하는 NDEF 레코드 유형의 의미가 외부에서 중요하지 않을 때 사용하세요. 저장소 사용이 어려운 경우 제약이 있습니다 웹 NFC에서 로컬 유형 레코드 이름은 항상 :로 시작합니다 (예: ":t", ":s", ":act"). 이는 텍스트 레코드를 로컬 레코드 레코드로부터 텍스트 레코드를 입력합니다.

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

스마트 포스터 레코드를 작성하려면 NDEF 메시지를 NDEFReader write()에 전달하세요. 메서드를 사용하여 축소하도록 요청합니다. NDEF 메시지에 포함된 스마트 포스터 레코드는 recordType 키가 "smart-poster"로 설정되고 data 키가 (다시 한 번) 스마트 포스터 기록입니다.

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

외부 유형 레코드 읽기 및 쓰기

애플리케이션 정의 레코드를 만들려면 외부 유형 레코드를 사용합니다. 이는 toRecords()로 액세스할 수 있는 페이로드로 NDEF 메시지가 포함됩니다. 고객의 이름에는 발급 조직의 도메인 이름, 콜론 및 유형이 포함됩니다. 1자(영문 기준) 이상인 이름(예: "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.
    }
  }
}

외부 유형 레코드를 작성하려면 NDEF 메시지 사전을 NDEFReader write() 메서드도 포함됩니다. NDEF에 포함된 외부 유형 레코드 메시지는 recordType 키가 NDEF 메시지를 나타내는 객체로 설정된 외부 유형 및 data 키 외부 유형 레코드에 포함된 data 키는 ArrayBuffer 또는 ArrayBuffer에 대한 뷰를 제공합니다 (예: 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] });

빈 레코드 읽기 및 쓰기

빈 레코드에는 페이로드가 없습니다.

빈 레코드를 작성하려면 NDEF 메시지 사전을 NDEFReader에 전달하세요. write() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. NDEF 메시지에 포함된 빈 레코드는 다음과 같이 정의됩니다. recordType 키가 "empty"로 설정된 객체

const emptyRecord = {
  recordType: "empty"
};

const ndef = new NDEFReader();
await ndef.write({ records: [emptyRecord] });

브라우저 지원

웹 NFC는 Android용 Chrome 89에서 사용할 수 있습니다.

개발자 팁

웹 NFC로 플레이하기 시작했을 때 알고 싶었던 것들을 나열해 보았습니다.

  • Android는 웹 NFC가 작동하기 전에 OS 수준에서 NFC 태그를 처리합니다.
  • material.io에서 NFC 아이콘을 찾을 수 있습니다.
  • 필요할 때 레코드를 쉽게 식별하려면 NDEF 레코드 id를 사용합니다.
  • NDEF를 지원하는 형식이 지정되지 않은 NFC 태그에는 빈 유형의 단일 레코드가 포함되어 있습니다.
  • Android 애플리케이션 레코드는 아래와 같이 쉽게 작성할 수 있습니다.
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] });

데모

공식 샘플을 사용해 보고 멋진 웹 NFC 데모를 확인하세요.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Chrome Dev Summit 2019의 웹 NFC 카드 데모

의견

웹 NFC 커뮤니티 그룹 및 Chrome팀은 웹 NFC에 관한 의견과 사용 경험을 공유해 주시기 바랍니다.

API 설계에 대해 알려주세요.

API에서 예상대로 작동하지 않는 부분이 있나요? 아니면 Google에서 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요?

웹 NFC GitHub 저장소에서 사양 문제를 신고하거나 다음에 관한 의견을 추가하세요. 생성할 수 있습니다

구현 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 어떻게 해야 할까요?

https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 버그 재현을 위한 간단한 안내를 제공하고, 구성요소Blink>NFC로 설정됨 Glitch는 쉽고 빠르게 재현할 수 있습니다.

지지 표시

웹 NFC를 사용할 계획이신가요? 여러분의 공개적 지원은 Chrome팀에 도움이 됩니다 기능의 우선순위를 정하고 이 기능을 사용하는 데 있어 얼마나 중요한지 다른 브라우저 공급업체에 도움이 될 수 있습니다

해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #WebNFC 어디서 어떻게 사용하는지 Google에 알려주세요.

유용한 링크

감사의 말씀

웹 NFC를 구현해 주신 인텔 담당자 여러분께 진심으로 감사드립니다. Chrome Chromium 이전을 위해 협력하는 커밋된 사용자 커뮤니티에 살펴보겠습니다 Chromium 커밋한 사용자가 모두 Google 직원은 아닙니다. 도움을 주신 분들을 선정해 특별히 소개합니다.