Interakcja z urządzeniami NFC w Chrome na Androida

Teraz można odczytywać i zapisywać tagi NFC.

François Beaufort
François Beaufort
GitHub

Czym jest NFC w internecie?

NFC to skrót od Near Field Communication (komunikacja Near Field). Jest to bezprzewodowa technologia działająca w zakresie 13,56 MHz, która umożliwia komunikację między urządzeniami w odległości mniejszej niż 10 cm z szybkością do 424 kbitów/s.

Web NFC umożliwia stronom odczytywanie i zapisywanie tagów NFC, gdy znajdują się one w pobliżu urządzenia użytkownika (zwykle w odległości 5–10 cm). Obecny zakres jest ograniczony do formatu wymiany danych NFC (NDEF), czyli lekkiego formatu wiadomości binarnych, który działa w różnych formatach tagów.

Telefon włącza tag NFC, aby wymienić dane
Schemat działania NFC

Sugerowane zastosowania

Web NFC jest ograniczony do NDEF, ponieważ właściwości zabezpieczeń związane z odczytywaniem i zapisywaniem danych NDEF są łatwiejsze do zmierzenia. Operacje wejścia/wyjścia na niskim poziomie (np. ISO-DEP, NFC-A/B, NFC-F), tryb komunikacji peer-to-peer i emulacja karty hosta (host-based card emulation, HCE) nie są obsługiwane.

Przykłady witryn, które mogą używać technologii Web NFC:

  • Muzea i galerie sztuki mogą wyświetlać dodatkowe informacje o ekspozycji, gdy użytkownik zbliży urządzenie do karty NFC znajdującej się obok eksponatu.
  • Strony do zarządzania asortymentem mogą odczytywać i zapisywać dane w tagu NFC na kontenerze, aby aktualizować informacje o jego zawartości.
  • Strony konferencji mogą używać tego pliku do skanowania plakietek NFC podczas wydarzenia i sprawdzania, czy są one zablokowane, aby zapobiec dalszym zmianom informacji na nich zapisanych.
  • Witryny mogą używać tego interfejsu do udostępniania początkowych tajnych danych potrzebnych do scenariuszy tworzenia urządzeń lub usług, a także do wdrażania danych konfiguracyjnych w trybie operacyjnym.
Telefon skanujący kilka tagów NFC
Przykład zarządzania stanem magazynowym NFC

Obecny stan,

Krok Stan
1. Tworzenie wyjaśnienia Zakończono
2. Tworzenie wstępnej wersji specyfikacji Zakończono
3. Zbieraj opinie i ulepszaj projekt Zakończono
4. Wersja próbna origin Zakończono
5. Uruchom Zakończono

Korzystanie z NFC przez internet

Wykrywanie cech

Wykrywanie funkcji na sprzęcie różni się od tego, do czego prawdopodobnie jesteś przyzwyczajony. Obecność ikony NDEFReader oznacza, że przeglądarka obsługuje technologię Web NFC, ale nie informuje, czy jest dostępny wymagany sprzęt. W szczególności, jeśli sprzęt jest niedostępny, obietnica zwracana przez niektóre wywołania zostanie odrzucona. Szczegóły podam, gdy będę opisywać NDEFReader.

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

Terminologia

Tag NFC to pasywne urządzenie NFC, które działa na zasadzie indukcji magnetycznej, gdy w pobliżu znajduje się aktywne urządzenie NFC (np. telefon). Tagi NFC występują w wielu formach i wersjach, np. jako naklejki, karty kredytowe czy opaski na rękę.

Zdjęcie przezroczystego tagu NFC
Przezroczysty tag NFC

Obiekt NDEFReader to punkt wejścia w ramach Web NFC, który udostępnia funkcje przygotowywania działań związanych z odczytywaniem lub zapisywaniem, które są wykonywane, gdy tag NDEF znajdzie się w pobliżu. NDEF w NDEFReader oznacza format wymiany danych NFC, czyli lekki binarny format wiadomości znormalizowany przez NFC Forum.

Obiekt NDEFReader służy do obsługi przychodzących komunikatów NDEF z tagów NFC oraz do zapisywania komunikatów NDEF na tagach NFC w zasięgu.

Tag NFC obsługujący NDEF jest jak karteczka samoprzylepska. Każdy może go odczytać, a jeśli nie jest to plik tylko do odczytu, każdy może do niego zapisać. Zawiera 1 wiadomość NDEF, która zawiera co najmniej 1 rekord NDEF. Każdy rekord NDEF to struktura binarny zawierająca ładunek danych i informacje o powiązanym typie. Web NFC obsługuje te standardowe typy rekordów NFC Forum: pusty, tekst, URL, inteligentny plakat, typ MIME, adres URL bezwzględny, typ zewnętrzny, nieznany i lokalny.

Schemat wiadomości NDEF
Diagram wiadomości NDEF

Skanowanie tagów NFC

Aby skanować tagi NFC, najpierw utwórz instancję nowego obiektu NDEFReader. Wywołanie scan()zwraca obietnicę. Jeśli dostęp nie został wcześniej przyznany, użytkownik może zostać poproszony o jego przyznanie. Obietnica zostanie spełniona, jeśli zostaną spełnione te warunki:

  • Jest on wywoływany tylko w odpowiedzi na gest użytkownika, taki jak gest dotykowy lub kliknięcie myszką.
  • Użytkownik zezwolił witrynie na interakcję z urządzeniami NFC.
  • Telefon użytkownika obsługuje komunikację NFC.
  • Użytkownik ma włączoną komunikację NFC na telefonie.

Gdy obietnica zostanie spełniona, przychodzące wiadomości NDEF są dostępne po subskrybowaniu zdarzeń reading za pomocą detektora zdarzeń. Aby otrzymywać powiadomienia o zbliżaniu się niezgodnych tagów NFC, musisz też subskrybować zdarzenia 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}.`);
});

Gdy tag NFC znajduje się w pobliżu, uruchamia się zdarzenie NDEFReadingEvent. Zawiera 2 unikalne właściwości:

  • serialNumber to numer seryjny urządzenia (np. 00-11-22-33-44-55-66) lub pusty ciąg znaków, jeśli nie ma takiego numeru.
  • message reprezentuje wiadomość NDEF zapisaną w tagu NFC.

Aby odczytać zawartość komunikatu NDEF, przejdź przez message.records i przetwórz ich elementy data odpowiednio na podstawie ich recordType. Element data jest udostępniany jako DataView, ponieważ umożliwia obsługę przypadków, w których dane są zakodowane w formacie 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.
    }
  }
};

Zapisywanie tagów NFC

Aby zapisać tagi NFC, najpierw utwórz instancję nowego obiektu NDEFReader. Wywołanie write() zwraca obietnicę. Jeśli dostęp nie został wcześniej przyznany, użytkownik może zostać poproszony o jego przyznanie. W tym momencie wiadomość NDEF jest „gotowa” i zostanie zrealizowana, jeśli spełnione są wszystkie te warunki:

  • Jest on wywoływany tylko w odpowiedzi na gest użytkownika, taki jak gest dotykowy lub kliknięcie myszką.
  • Użytkownik zezwolił witrynie na interakcję z urządzeniami NFC.
  • Telefon użytkownika obsługuje komunikację NFC.
  • Użytkownik ma włączoną komunikację NFC na telefonie.
  • Użytkownik dotknął tagu NFC i pomyślnie zapisano wiadomość NDEF.

Aby zapisać tekst na tagu NFC, prześlij ciąg znaków do metody write().

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

Aby zapisać rekord URL na tagu NFC, przekaż słownik reprezentujący wiadomość NDEF do write(). W przykładzie poniżej wiadomość NDEF to słownik z kluczem records. Jego wartość to tablica rekordów – w tym przypadku rekord adresu URL zdefiniowany jako obiekt z kluczem recordType równym "url" i kluczem data równym ciągu znaków adresu 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}.`);
});

Na tagu NFC można też zapisać wiele rekordów.

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

Jeśli tag NFC zawiera komunikat NDEF, który nie ma być zastąpiony, ustaw właściwość overwrite na false w opcjach przekazywanych do metody write(). W takim przypadku zwrócona obietnica zostanie odrzucona, jeśli wiadomość NDEF jest już zapisana na tagu 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}.`);
});

Ustawianie tagów NFC tylko do odczytu

Aby uniemożliwić złośliwym użytkownikom nadpisywanie treści tagu NFC, możesz ustawić tagi NFC jako stałe tylko do odczytu. Ta operacja jest procesem jednokierunkowym i nie można jej cofnąć. Po ustawieniu tagu NFC w trybie tylko do odczytu nie można już do niego zapisywać danych.

Aby tagi NFC były tylko do odczytu, najpierw utwórz instancję nowego obiektu NDEFReader. Wywołanie makeReadOnly() zwraca obietnicę. Jeśli dostęp nie został wcześniej przyznany, użytkownik może zostać poproszony o jego przyznanie. Obietnica zostanie spełniona, jeśli spełnione są wszystkie te warunki:

  • Jest on wywoływany tylko w odpowiedzi na gest użytkownika, taki jak gest dotykowy lub kliknięcie myszką.
  • Użytkownik zezwolił witrynie na interakcję z urządzeniami NFC.
  • Telefon użytkownika obsługuje komunikację NFC.
  • Użytkownik ma włączoną komunikację NFC na telefonie.
  • Użytkownik dotknął tagu NFC, który został ustawiony jako tylko do odczytu.
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

Oto jak ustawić tag NFC na stałe w trybie tylko do odczytu po zapisaniu na nim danych.

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

Funkcja makeReadOnly() jest dostępna na Androidzie w Chrome 100 lub nowszej wersji. Sprawdź, czy ta funkcja jest obsługiwana w przypadku:

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

Zabezpieczenia i uprawnienia

Zespół Chrome opracował i wdrożył Web NFC, korzystając z podstawowych zasad określonych w artykule Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej, w tym kontroli użytkownika, przejrzystości i ergonomii.

Ponieważ NFC rozszerza zakres informacji potencjalnie dostępnych dla złośliwych witryn, dostępność NFC jest ograniczona, aby zmaksymalizować świadomość użytkowników i ich kontrolę nad korzystaniem z NFC.

Zrzut ekranu z prośbą o użycie technologii NFC w witrynie
Prośba do użytkownika o użycie NFC w internecie

Interfejs NFC w internecie jest dostępny tylko w ramkach najwyższego poziomu i w kontekstach przeglądania z zabezpieczeniami (tylko w przypadku protokołu HTTPS). Origins musi najpierw poprosić o "nfc" uprawnienia podczas obsługi działania użytkownika (np.kliknięcia przycisku). Jeśli dostęp nie został wcześniej przyznany, metody NDEFReader, scan(), write() i makeReadOnly() wywołują prompt dla użytkownika.

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

Połączenie prośby o uprawnienia inicjowanej przez użytkownika i fizycznego ruchu urządzenia nad docelowym tagiem NFC odzwierciedla wzór wyboru dostępny w innych interfejsach API dostępu do plików i urządzeń.

Aby wykonać skanowanie lub zapisać dane, strona internetowa musi być widoczna, gdy użytkownik dotknie tagu NFC urządzeniem. Aby wskazać dotknięcie, przeglądarka używa reakcji haptycznej. Dostęp do modułu radiowego NFC jest zablokowany, jeśli ekran jest wyłączony lub urządzenie jest zablokowane. W przypadku niewidocznych stron internetowych odbieranie i przesyłanie treści NFC jest zawieszone, a po wznowieniu wyświetlania strony.

Dzięki interfejsowi Page Visibility API można śledzić zmiany widoczności dokumentu.

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

Książka kucharska

Oto kilka przykładów kodu, które pomogą Ci zacząć.

Sprawdzanie uprawnień

Interfejs API uprawnień umożliwia sprawdzenie, czy uprawnienie "nfc" zostało przyznane. Ten przykład pokazuje, jak skanować tagi NFC bez interakcji z użytkownikiem, jeśli dostęp został wcześniej przyznany, lub wyświetlić przycisk w przeciwnym przypadku. Pamiętaj, że ten sam mechanizm działa w przypadku tagów NFC, ponieważ używa tych samych uprawnień.

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

Przerywanie operacji NFC

Za pomocą prymitywu AbortController można łatwo przerwać operacje NFC. Przykład poniżej pokazuje, jak przekazać signal z AbortController za pomocą opcji metod NDEFReader scan(), makeReadOnly(), write() i jednocześnie przerwać obie operacje 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();
};

Odczyt po zapisie

Użycie funkcji write(), a następnie scan() w ramach prymitywu AbortController umożliwia odczytanie tagu NFC po zapisaniu na nim wiadomości. Przykład poniżej pokazuje, jak zapisać wiadomość tekstową na tagu NFC i przeczytać nową wiadomość na tagu NFC. Po 3 sekundach przestaje skanować.

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

Odczytywanie i zapisywanie rekordu tekstowego

Rekord tekstowy data można odszyfrować za pomocą obiektu TextDecoder utworzonego za pomocą właściwości rekordu encoding. Pamiętaj, że język rekordu tekstowego jest dostępny w ramach właściwości lang.

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

Aby zapisać prosty rekord tekstowy, przekaż ciąg znaków do metody NDEFReader write().

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

Rekordy tekstowe są domyślnie kodowane w formacie UTF-8 i zakładają język bieżącego dokumentu, ale obie właściwości (encoding i lang) można określić za pomocą pełnej składni w celu utworzenia niestandardowego rekordu NDEF.

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

Odczytywanie i zapisywanie rekordu adresu URL

Użyj TextDecoder, aby zdekodować rekord data.

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

Aby zapisać rekord URL, przekaż słownik wiadomości NDEF do metody NDEFReaderwrite(). Rekord adresu URL zawarty w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "url" i kluczem data ustawionym na ciąg znaków adresu URL.

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

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

Odczytywanie i zapisywanie rekordu typu MIME

Właściwość mediaType rekordu typu MIME reprezentuje typ MIME danych rekordu NDEF, aby można było prawidłowo zdekodować wartość data. Na przykład użyj elementu JSON.parse, aby zdekodować tekst JSON, a elementu Image, aby zdekodować dane obrazu.

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

Aby zapisać rekord typu MIME, prześlij słownik wiadomości NDEF do metody NDEFReaderwrite(). Rekord typu MIME zawarty w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "mime", kluczem mediaType ustawionym na rzeczywisty typ MIME treści oraz kluczem data ustawionym na obiekt, który może być obiektem ArrayBuffer lub zapewniającym widok obiektu ArrayBuffer (np. Uint8Array lub 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] });

Odczytywanie i zapisywanie rekordu adresu URL bezwzględnego

Rekord adresu URL bezwzględnego data można odszyfrować za pomocą prostego TextDecoder.

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

Aby zapisać bezwzględny rekord adresu URL, przekaż słownik wiadomości NDEF metodzie NDEFReader write(). Rekord absolute-URL zawarty w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "absolute-url" i kluczem data ustawionym na ciąg znaków adresu URL.

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

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

Odczytywanie i zapisywanie rekordu inteligentnego plakatu

Rekord inteligentnego plakatu (używany w reklamach w magazynach, ulotkach, na billboardach itp.) opisuje niektóre treści internetowe jako rekord NDEF zawierający wiadomość NDEF jako ładunek. Wywołanie funkcji record.toRecords() powoduje przekształcenie data w listę rekordów zawartych w rekordzie inteligentnego plakatu. Powinien on zawierać rekord adresu URL, rekord tekstowy tytułu, rekord typu MIME obrazu oraz rekordy typu lokalnego, takie jak ":t", ":act" i ":s", odpowiednio dla typu, działania i rozmiaru rekordu inteligentnego plakatu.

Rekordy typu lokalnego są unikalne tylko w lokalnym kontekście rekordu NDEF. Używaj ich, gdy znaczenie typów nie ma znaczenia poza lokalnym kontekstem rekordu zawierającego, a wykorzystanie pamięci jest ściśle ograniczone. Nazwy rekordów typu lokalnego zawsze zaczynają się od : w Web NFC (np. ":t", ":s", ":act"). Pozwala to odróżnić rekord tekstowy od rekordu typu tekstowego lokalnego.

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

Aby zapisać rekord inteligentnego plakatu, prześlij wiadomość NDEF do metody NDEFReader write(). Rekord inteligentnego plakatu zawarty w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "smart-poster" i kluczem data ustawionym na obiekt, który (ponownie) reprezentuje wiadomość NDEF zawartą w rekordzie inteligentnego plakatu.

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

Odczytywanie i zapisywanie zewnętrznego rekordu typu

Aby utworzyć rekordy zdefiniowane przez aplikację, użyj rekordów typu zewnętrznego. Mogą one zawierać wiadomość NDEF jako ładunek, do którego można uzyskać dostęp za pomocą toRecords(). Ich nazwa zawiera nazwę domeny organizacji wydającej certyfikat, dwukropek i nazwę typu, która musi mieć co najmniej 1 znak, np. "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.
    }
  }
}

Aby zapisać rekord typu zewnętrznego, przekaż słownik wiadomości NDEF metodzie write() klasy NDEFReader. Rekord typu zewnętrznego zawarty w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na nazwę typu zewnętrznego i kluczem data ustawionym na obiekt reprezentujący wiadomość NDEF zawartą w rekordzie typu zewnętrznego. Pamiętaj, że klucz data może być też kluczem ArrayBuffer lub zawierać widok ArrayBuffer (np. Uint8Array lub 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] });

Odczytywanie i zapisywanie pustego rekordu

Pusty rekord nie zawiera ładunku.

Aby zapisać pusty rekord, przekaż słownik wiadomości NDEF metodzie NDEFReader write(). Pusty rekord zawarty w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "empty".

const emptyRecord = {
  recordType: "empty"
};

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

Obsługa przeglądarek

Web NFC jest dostępny na Androidzie w Chrome 89.

Wskazówki dla programistów

Oto lista rzeczy, które warto wiedzieć, zanim zaczniesz korzystać z Web NFC:

  • Android obsługuje tagi NFC na poziomie systemu operacyjnego, zanim Web NFC zacznie działać.
  • Ikonę NFC znajdziesz na stronie material.io.
  • Użyj rekordu NDEF id, aby w razie potrzeby łatwo zidentyfikować rekord.
  • Niesformatowany tag NFC obsługujący NDEF zawiera jeden rekord typu pusty.
  • Jak widać poniżej, tworzenie rekordu aplikacji na Androida jest proste.
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] });

Prezentacje

Wypróbuj oficjalną wersję demonstracyjną i zobacz kilka fajnych demonstracji Web NFC:

Demo kart NFC w internecie na Chrome Dev Summit 2019

Prześlij opinię

Grupa użytkowników Web NFC i zespół Chrome chętnie poznają Twoje opinie i wrażenia związane z Web NFC.

Poinformuj nas o projektowaniu interfejsu API

Czy interfejs API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu?

Zgłoś problem ze specyfikacją w repozytorium GitHub Web NFC lub podziel się opinią na temat istniejącego problemu.

Zgłaszanie problemów z implementacją

Czy znalazłeś/znalazłaś błąd w implementacji Chrome? Czy implementacja różni się od specyfikacji?

Zgłoś błąd na stronie https://new.crbug.com. Podaj jak najwięcej szczegółów, dołącz proste instrukcje odtwarzania błędu i ustaw Składniki na Blink>NFC. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania informacji o powtarzalności problemu.

Pokaż pomoc

Czy planujesz korzystać z Web NFC? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wspieranie.

Wyślij tweeta do @ChromiumDev, używając hashtaga #WebNFC, i podaj, gdzie i jak go używasz.

Przydatne linki

Podziękowania

Dziękujemy zespółowi Intela za wdrożenie NFC w internecie. Google Chrome zależy od społeczności programistów, którzy wspólnie pracują nad rozwojem projektu Chromium. Nie każdy autor kodu Chromium jest pracownikiem Google, a ci ludzie zasługują na szczególne uznanie.