Interakcja z urządzeniami NFC w Chrome na Androida

Możliwe jest teraz odczytywanie i zapisywanie danych w tagach NFC.

François Beaufort
François Beaufort
GitHub

Co to jest Web NFC?

NFC oznacza technologię łączności bezprzewodowej Near Field Communications. działające 13,56 MHz, co umożliwia komunikację między urządzeniami w odległości mniej niż 10 cm i szybkość transmisji do 424 kb/s.

Internet NFC umożliwia witrynom odczyt i zapis w tagach NFC, gdy są one w pobliżu urządzenia użytkownika (zwykle 5-10 cm). Bieżący zakres jest ograniczony do formatu NDEF (NFC) binarny, który działa z różnymi formatami tagów.

Telefon uruchamia tag NFC do wymiany danych
Schemat operacji NFC

Sugerowane zastosowania

Komunikacja internetowa NFC jest ograniczona do NDEF, ponieważ właściwości zabezpieczeń odczytu danych NDEF można łatwiej zmierzyć. Operacje wejścia-wyjścia niskiego poziomu (np. ISO-DEP, NFC-A/B, NFC-F), tryb komunikacji peer-to-peer i kartę hosta Emulacja (HCE) nie jest obsługiwana.

Przykłady stron, które mogą korzystać z technologii NFC:

  • Muzea i galerie sztuki mogą wyświetlać dodatkowe informacje na temat wystawy gdy użytkownik dotyka swojego urządzenia karty NFC w pobliżu wystawy.
  • Witryny zarządzania asortymentem mogą odczytywać i zapisywać dane w tagu NFC w celu aktualizacji informacji o jego zawartości.
  • Witryny konferencyjne mogą za jego pomocą skanować znaczki NFC podczas wydarzenia i sprawdzać, są zablokowane, aby zapobiec dalszej zmianie zapisanych na nich informacji.
  • Witryny mogą jej używać do udostępniania wstępnych obiektów tajnych wymaganych na potrzeby urządzenia lub usługi scenariuszach obsługi administracyjnej oraz wdrażanie danych konfiguracyjnych i trybu uzyskiwania zgody.
.
Telefon skanuje kilka tagów NFC
Ilustracja zarządzania zasobami reklamowymi NFC
.

Obecny stan,

Krok Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz początkową wersję roboczą specyfikacji Zakończono
3. Zbieraj opinie iterować projekt Zakończono
4. Wersja próbna origin Zakończono
5. Wprowadzenie na rynek Zakończono

Użyj internetowego NFC

Wykrywanie cech

Wykrywanie funkcji na sprzęcie działa inaczej niż zwykle. Obecność rozszerzenia NDEFReader informuje, że przeglądarka obsługuje komunikację internetową NFC, nie ma informacji o tym, czy jest dostępny wymagany sprzęt. Zwłaszcza, jeśli sprzęt obietnice podane w odpowiedzi na niektóre połączenia zostaną odrzucone. Przekażę szczegóły, gdy opisuję NDEFReader.

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

Terminologia

Tag NFC jest pasywnym urządzeniem NFC, co oznacza, że jest ono zasilane magnesem. gdy w pobliżu znajduje się aktywne urządzenie z modułem NFC (takie jak telefon). Tagi NFC są dostępne w różnych formach i modzie, np. naklejki, karty kredytowe, na nadgarstki, i innych.

Zdjęcie przezroczystego tagu NFC
przezroczysty tag NFC

Obiekt NDEFReader to punkt wejścia w Web NFC, który udostępnia funkcje do przygotowywania działań związanych z czytaniem lub pisaniem, które są wykonywane przez tag NDEF w pobliżu. NDEF w NDEFReader oznacza NFC Data Exchange To nieduży format wiadomości binarnych ustandaryzowany przez NFC Forum.

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

Tag NFC obsługujący NDEF działa jak kartka pocztowa. Każdy może je przeczytać oraz chyba że jest on dostępny tylko do odczytu, każdy może w nim zapisywać. Zawiera pojedynczy NDEF komunikat zawierający co najmniej jeden rekord NDEF. Każdy rekord NDEF to strukturę binarną zawierającą ładunek danych i powiązane z nim informacje o typie. Komunikacja internetowa NFC obsługuje następujące ustandaryzowane typy rekordów NFC Forum: puste, tekstowe, URL, plakat inteligentny, typ MIME, bezwzględny URL, typ zewnętrzny, nieznany i lokalny typu.

Schemat komunikatu NDEF
Schemat wiadomości NDEF

Skanuj tagi NFC

Aby skanować tagi NFC, najpierw utwórz nowy obiekt NDEFReader. Dzwonię pod scan() zwraca obietnicę. Jeśli użytkownik nie miał wcześniej dostępu, może zobaczyć prośbę o dostęp przyznane. Obietnica zostanie zrealizowana, jeśli zostaną spełnione te warunki:

  • Została wywołana tylko w odpowiedzi na gest użytkownika, taki jak gest dotykowy lub kliknięciem myszy.
  • Użytkownik zezwolił stronie na interakcję z urządzeniami z NFC.
  • Telefon użytkownika obsługuje komunikację NFC.
  • użytkownik włączył komunikację NFC na telefonie,

Po spełnieniu obietnicy przychodzące wiadomości NDEF będą dostępne przez subskrybowanie zdarzeń reading za pomocą detektora zdarzeń. Warto też zasubskrybować do readingerror zdarzeń, które mają być powiadamiane o niezgodnych tagach NFC w pobliżu.

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 w pobliżu znajduje się tag NFC, wywoływane jest zdarzenie NDEFReadingEvent. it ma dwie unikalne właściwości:

  • serialNumber oznacza numer seryjny urządzenia (np. 00-11-22-33-44-55-66) lub pusty ciąg, jeśli żaden nie jest dostępny.
  • message oznacza wiadomość NDEF przechowywaną w tagu NFC.

Aby odczytać treść wiadomości NDEF, wykonaj pętlę: message.records i odpowiednio przetwarza użytkowników data na podstawie tych danych: recordType. Użytkownik data jest widoczny jako DataView, ponieważ umożliwia obsługę gdy dane są zakodowane w 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 nowy obiekt NDEFReader. Łączę write() zwraca obietnicę. Jeśli dostęp nie był możliwy, użytkownik może zobaczyć prośbę wcześniej przyznane. W tym momencie komunikat NDEF jest „gotowy” i obietnica zostanie rozwiązany, jeśli zostaną spełnione wszystkie te warunki:

  • Została wywołana tylko w odpowiedzi na gest użytkownika, taki jak gest dotykowy lub kliknięciem myszy.
  • Użytkownik zezwolił stronie na interakcję z urządzeniami z NFC.
  • Telefon użytkownika obsługuje komunikację NFC.
  • użytkownik włączył komunikację NFC na telefonie,
  • Użytkownik zbliżył tag NFC i wiadomość NDEF została napisana.

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

W 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 wiadomość NDEF, której nie należy zastępować, ustaw właściwość overwrite do false w opcjach przekazywanych do funkcji write() . W takim przypadku zwrócona obietnica zostanie odrzucona, jeśli wiadomość NDEF zostanie już zapisane w 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}.`);
});

Ustaw tagi NFC jako tylko do odczytu

Aby zapobiec zastępowaniu treści tagów NFC przez złośliwe oprogramowanie, możesz: ustaw tagi NFC na stałe tylko do odczytu. Jest to proces jednokierunkowy, nie można cofnąć. Gdy tag NFC zostanie ustawiony jako tylko do odczytu, nie będzie można go zapisać już tak.

Aby tagi NFC były dostępne tylko do odczytu, najpierw utwórz nowy obiekt NDEFReader. Łączę makeReadOnly() zwraca obietnicę. Jeśli dostęp nie był możliwy, użytkownik może zobaczyć prośbę wcześniej przyznane. Obietnica zostanie zrealizowana, jeśli zostaną spełnione wszystkie poniższe warunki spotkało:

  • Została wywołana tylko w odpowiedzi na gest użytkownika, taki jak gest dotykowy lub kliknięciem myszy.
  • Użytkownik zezwolił stronie na interakcję z urządzeniami z NFC.
  • Telefon użytkownika obsługuje komunikację NFC.
  • użytkownik włączył komunikację NFC na telefonie,
  • Użytkownik kliknął tag NFC i został on 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 tylko do odczytu po zapisaniu w 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}`);
}

Aplikacja makeReadOnly() jest dostępna na Androidzie w Chrome 100 lub nowszej wersji, więc sprawdź jeśli ta funkcja jest obsługiwana przez:

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

Bezpieczeństwo i uprawnienia

Zespół Chrome zaprojektował i wdrożył komunikację NFC zgodnie z podstawowymi zasadami zdefiniowane w artykule Kontrolowanie dostępu do zaawansowanej platformy internetowej funkcje, w tym kontrola użytkownika, przejrzystość i ergonomia.

Ponieważ NFC poszerza domenę informacji potencjalnie dostępnych dla szkodliwych witryn, dostępność technologii NFC jest ograniczona, aby zmaksymalizować świadomości marki i kontrolę nad wykorzystaniem NFC.

Zrzut ekranu przedstawiający komunikat NFC na stronie internetowej
Potwierdzenie od użytkownika komunikacji internetowej

Komunikacja internetowa NFC jest dostępna tylko w przypadku ramek najwyższego poziomu i kontekstów bezpiecznego przeglądania (HTTPS) ). Źródła muszą najpierw zażądać uprawnień "nfc" podczas obsługi pliku gest użytkownika (np.kliknięcie przycisku). NDEFReader scan(), write() i makeReadOnly() metod aktywuje prompt użytkownika, jeśli dostęp nie był wcześniej możliwy przyznane.

  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 komunikatu o zgodzie zainicjowanej przez użytkownika i rzeczywistych, fizycznych ruch polegający na zbliżeniu urządzenia do docelowego tagu NFC zbliży urządzenie do wybranego w innych interfejsach API dostępu do plików i urządzeniach.

Aby możliwe było skanowanie lub zapis, strona internetowa musi być widoczna, gdy użytkownik dotknie jej ekranu tagu NFC na urządzeniu. Przeglądarka używa reakcji haptycznych, aby wskazać, kliknij. Dostęp do modułu NFC jest zablokowany, jeśli wyświetlacz jest wyłączony lub urządzenie jest zablokowany. W przypadku niewidocznych stron internetowych odbieranie i przekazywanie treści przy użyciu NFC jest zawieszone i wznowione, gdy strona internetowa stanie się ponownie widoczna.

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

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 na dobry początek.

Sprawdź uprawnienia

Interfejs Permissions API umożliwia sprawdzenie, czy uprawnienie "nfc" zostało przyznane. Z tego przykładu dowiesz się, jak skanować tagi NFC bez interakcji użytkownika, jeśli użytkownik otrzymał poprzedni dostęp lub wyświetl przycisk w inny sposób. Pamiętaj, że to samo działa do zapisywania tagów NFC, ponieważ korzysta z tych samych uprawnień Google Cloud.

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

Użycie elementu podstawowego AbortController ułatwia przerwanie NFC operacji. Przykład poniżej pokazuje, jak przekazać signal AbortController przy użyciu czytnika NDEFReader scan(), makeReadOnly(), write() i przerywaj obie operacje NFC w tym samym czasie.

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

Czytanie po zapisie

Wykorzystuje write(), a potem scan() i AbortController umożliwia odczyt tagu NFC po zapisaniu w nim wiadomości. Przykład poniżej pokazuje, jak napisać wiadomość tekstową do tagu NFC i przeczytać ją nową wiadomość w tagu NFC. Skanowanie zakończy się po 3 sekundach.

// 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 pisanie rekordu tekstowego

Rekord tekstowy data można zdekodować za pomocą polecenia TextDecoder utworzonego z użyciem zarejestrować właściwość encoding. Pamiętaj, że język rekordu tekstowego to jest dostępna 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 utworzyć prosty rekord tekstowy, przekaż ciąg do metody NDEFReader write().

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

Rekordy tekstowe są domyślnie w formacie UTF-8 i przyjmują język bieżącego dokumentu, ale obie właściwości (encoding i lang) można określić za pomocą pełnej składni do 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ć data rekordu.

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 komunikatów NDEF do czytnika NDEFReader Metoda write(). Rekord adresu URL zawarty w komunikacie NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "url" i kluczem data ustawionym na adres URL ciągu znaków.

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 Ładunek rekordu NDEF, tak aby można było poprawnie zdekodować data. Na przykład użyj JSON.parse do zdekodowania tekstu JSON oraz elementu Image do dekodowania danych 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, przekaż słownik wiadomości NDEF do modułu NDEFReader Metoda write(). Zdefiniowano rekord typu MIME zawarty w wiadomości NDEF jako obiekt, gdzie klucz recordType jest ustawiony na "mime", a klucz mediaType ustawiony na faktyczny typ MIME treści oraz klucz data ustawiony na obiekt, który może być ArrayBuffer albo przedstawia widok elementu ArrayBuffer (np. 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] });

Odczytywanie i zapisywanie rekordu bezwzględnego adresu URL

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

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

Aby zapisać rekord bezwzględnego adresu URL, przekaż słownik komunikatów NDEF do Metoda NDEFReader write(). Rekord z bezwzględnym adresem URL zawarty w NDEF komunikat jest zdefiniowany jako obiekt, a klucz recordType ustawiony na "absolute-url" a klucz data ustawiony na ciąg adresu URL.

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

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

Czytanie i pisanie inteligentnego plakatu

Płyta z inteligentnym plakatem (wykorzystywana w reklamach w czasopismach, ulotkach, na billboardach, itp.), opisuje niektóre treści internetowe jako rekord NDEF zawierający NDEF. jako ładunku. Wywołaj funkcję record.toRecords(), aby przekształcić typ data w listę rekordów zapisanych w plakatach inteligentnych. Powinien zawierać rekord URL, rekord tekstowy tytułu, rekord typu MIME dla obrazu oraz niektóre niestandardowe rekordy typu lokalnego, takie jak ":t", ":act" i ":s", typu, działania i rozmiaru rekordu inteligentnego plakatu.

Rekordy typu lokalnego są unikalne tylko w kontekście lokalnym tagu rekord NDEF. Należy ich używać, gdy ich znaczenie nie ma znaczenia na zewnątrz. lokalnego kontekstu rekordu i sytuacji, gdy wykorzystanie miejsca na dane jest . W przypadku Web NFC nazwy rekordów typu zawsze zaczynają się od : (np. ":t", ":s", ":act"). Ma to na celu odróżnienie rekordu tekstowego od lokalnego wpisz na przykład rekord tekstowy.

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 utworzyć inteligentny rekord plakatu, przekaż wiadomość NDEF do czytnika NDEFReader write() . Rekord plakatu inteligentnego zawartego w wiadomości NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na "smart-poster" i kluczem data ustawionym na obiekt, który reprezentuje (ponownie) komunikat NDEF zawarty w inteligentny rekord 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 rekordu typu zewnętrznego

Aby utworzyć rekordy zdefiniowane przez aplikację, użyj rekordów typu zewnętrznego. Mogą one zawierają komunikat NDEF jako ładunek dostępny za pomocą toRecords(). Ich nazwa zawiera nazwę domeny organizacji wydającej dokument, dwukropek i typ nazwa składająca się z co najmniej jednego znaku, 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 komunikatów NDEF do Metoda NDEFReader write(). Rekord typu zewnętrznego zawarty w NDEF jest zdefiniowany jako obiekt z kluczem recordType ustawionym na nazwę klucza typ zewnętrzny, a klucz data ustawiony na obiekt reprezentujący wiadomość NDEF zawarte w rekordzie typu zewnętrznego. Pamiętaj, że klawisz data może być również – ArrayBuffer albo pozwala wyświetlić widok elementu ArrayBuffer (np. Uint8Array i 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 ma ładunku.

Aby zapisać pusty rekord, przekaż słownik komunikatów NDEF do czytnika NDEFReader Metoda write(). Pusty rekord zawarty w komunikacie 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

Komunikacja internetowa NFC jest dostępna na Androidzie w Chrome 89.

Wskazówki dla programistów

Oto lista rzeczy, które warto wiedzieć, kiedy zacząłem korzystać z internetowej komunikacji NFC:

  • Zanim zaczniesz korzystać z internetowej komunikacji NFC, Android obsługuje tagi NFC na poziomie systemu operacyjnego.
  • Ikonę NFC znajdziesz na stronie material.io.
  • Aby w razie potrzeby łatwo zidentyfikować rekord, użyj rekordu NDEF id.
  • Niesformatowany tag NFC, który obsługuje NDEF, zawiera pojedynczy rekord pustego typu.
  • Zapisywanie rekordu aplikacji na Androida jest łatwe, jak pokazano poniżej.
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ą próbkę i zobacz fajne wersje demonstracyjne funkcji Web NFC:

.
Demonstracja kart internetowych NFC na Chrome Dev Summit 2019

Prześlij opinię

Społeczność społeczności Web NFC oraz Zespół Chrome chętnie pozna Twoje przemyślenia i doświadczenia dotyczące Web NFC.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co w interfejsie API nie działa zgodnie z oczekiwaniami? Czy są jeśli brakuje metod lub właściwości niezbędnych do realizacji pomysłu?

Zgłoś problem ze specyfikacją w repozytorium Web NFC na GitHubie lub dodaj opinię do do istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd z implementacją Chrome? Czy wdrożenie różni się od specyfikacji?

Zgłoś błąd na https://new.crbug.com. Podaj jak najwięcej jak najwięcej szczegółów, podać proste instrukcje dotyczące odtworzenia błędu oraz Ustawiono Komponenty na Blink>NFC. Glitch działa świetnie: szybkie i łatwe udostępnianie.

Pokaż wsparcie

Czy planujesz korzystać z Web NFC? Twoje publiczne wsparcie pomaga zespołowi Chrome nadaje priorytet funkcjom i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta na adres @ChromiumDev, używając hashtagu #WebNFC. i daj nam znać, gdzie i jak go używasz.

Przydatne linki

Podziękowania

Wielkie dzięki dla pracowników firmy Intel za wdrożenie technologii NFC. Google Chrome, zależy od społeczności kombatantów, którzy wspólnie pracują nad przeniesieniem Chromium w dalszym ciągu projektu. Nie każdy użytkownik Chromium jest Googlerem. użytkownicy zasługują na specjalne wyróżnienie!