NFC приходит в web

Эта статья — перевод оригинальной статьи "NFC comes to the web".

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Это должно было быть примерно в 2012 году, когда Google выпустил первые телефоны с поддержкой NFC (Google Nexus S) вместе с обновлением для Android, которое позволило разработчикам использовать API NFC. Я хорошо помню, что заплатил несколько евро за несколько тегов NFC, чтобы попробовать (сегодня эти теги стоят очень дёшево). Хотя я был очень убежден, и команда CX Labs анонсировала множество прототипов, таких как покупки с помощью NFC, Apple потребовалось много лет, чтобы внедрить NFC и, наконец, открыть API для своих разработчиков. О NFC почти забыли... Но сейчас 2021 год, и большинство телефонов имеют встроенное оборудование NFC. Основной вариант использования - платежи, эмуляция карты NFC - один из трех режимов работы NFC, и большинство из нас ежедневно используют Apple или Google Pay.

Это означает, что функция NFC широко доступна для разработчиков, но, честно говоря, она не очень часто используется, кроме как через платежные приложения, поддерживаемые Google/Apple. Но только в мае 2021 года вышел Chrome для Android 91, который теперь поддерживает веб-NFC - любой веб-разработчик может экспериментировать и использовать NFC на простых HTML-страницах. Хотя Safari от Apple и другие браузеры снова опаздывают в игру, это может снова ознаменовать момент для нового прорыва в технологии NFC. Web NFC снижает барьер для разработчиков и, что более важно, функциональность NFC теперь может быть частью Интернета: никаких установок.

Web NFC 101

NFC расшифровывается как Near Field Communications и представляет собой беспроводную технологию малого радиуса действия, работающую на частоте 13,56 МГц. Малый радиус на самом деле означает близкое расстояние: для связи устройства должны находиться на расстоянии нескольких сантиметров друг от друга. Форум NFC определяет четыре режима работы: устройство чтения/записи, p2p сеть, эмуляция карты и беспроводная зарядка. Из этих четырех режимов только первый - чтение/запись - и только так называемая спецификация NDEF поддерживается Web NFC. NDEF - это формат обмена данными NFC, описывающий стандартизированный способ кодирования данных в теги NFC и считывания их обратно. Например, он определяет, как кодируется текст или как URL-адреса могут быть закодированы с сохранением байтов.

Внесу ещё немного ясности: вы не сможете имитировать кредитную карту с NFC для платежей в магазине, а также не сможете «включить беспроводную зарядку NFC» через Web NFC. Но все, что связано с чтением и записью небольших фрагментов данных в теги NFC в стандартизированном формате NDEF, включено в Web NFC.

Возможные варианты использования

В самой спецификации Web NFC перечислено несколько вариантов использования, например, использование NFC тегов в художественных галереях или музеях. Должен признать, что во многих случаях я не вижу явной выгоды. Эти теги вполне могут быть написаны с помощью специального телефона и приложения NFC, и пользователи этих тегов будут просто касаться их, чтобы открывать URL - это современное искусство. Я считаю, что Web NFC может сыграть роль, особенно в CX, когда дело доходит до случаев использования, для которых клиенты никогда не установят приложение в наши дни. Например, чтобы участвовать в игре в розничном магазине, я бы не стал устанавливать приложение, но я мог бы открыть веб-страницу для участия. Web NFC также поддерживает запись NFC тегов, которые, например, открывают некоторые интересные области применения для технических специалистов. Хотя зону обслуживания можно идентифицировать с помощью NFC тега, теперь точная дата/время обслуживания машины также может быть записана обратно в тег. Все это возможно без необходимости установки специального приложения, которое снижает барьеры для входа.

Чтобы поэкспериментировать с Web NFC на моем Pixel 5 и браузере Chrome, я создал небольшую общедоступную веб-страницу, которую вы также можете использовать, чтобы попробовать. Все следующие примеры кода взяты оттуда. Web NFC, а также стандарт NDEF для понимания сообщений, написанных или прочитанных из тегов NFC, можно найти в официальной спецификации.

Давайте напишем пару тегов

Чтобы писать NFC тег, вам необходимо понимать структуру сообщения NDEF. Сообщение, записываемое в тег, состоит из нескольких записей NDEFRecords, которые могут быть обычным текстом, URL-адресами или более сложными типами, такими как смарт-постеры.

Как видите, написать простое текстовое сообщение просто:

document.getElementById("write").addEventListener("click", async () => {
   log("writeLog", "User clicked write button");
 try {
     const ndef = new NDEFReader();
     await ndef.write("Hello Office of the CTO!");
     log("writeLog", "> Text Message written");
   } catch (error) {
     log("writeLog", "Argh! " + error);
   }
 });

Теперь давайте запишем URL в тег. Метод write требует от нас список, но здесь мы будем использовать только один URL:

document.getElementById("writeUrl").addEventListener("click", async () => {
  log("writeUrlLog", "User clicked write button");

  const ndef = new NDEFReader();
  try {
    await ndef.write({
      records: [{ recordType: "url", data: "https://cxlabs.sap.com" }]
    });
    log("writeUrlLog", "> URl Message written");
  } catch {
    log("writeUrlLog", "Argh! " + error);
  }
});

Давайте прочитаем пару тегов

Чтение тегов может быть более сложной задачей, поскольку вам нужно различать разные записи, которые вы можете найти. В моем примере мы пытаемся разобраться с несколькими распространенными случаями, такими как текст, URL-адреса, а также данные в JSON, которые, конечно, будут иметь определенную структуру, о которой ваше приложение должно знать:

document.getElementById("read").addEventListener("click", async () => {
  log("readLog", "User clicked read button");

  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    log("readLog", "> Scan started");

    ndef.addEventListener("readingerror", () => {
      log(
        "readLog",
        "Argh! Cannot read data from the NFC tag. Try another one?"
      );
    });

    ndef.addEventListener("reading", ({ message, serialNumber }) => {
      log("readLog", `> Serial Number: ${serialNumber}`);
      log("readLog", `> Records: (${message.records.length})`);

      const decoder = new TextDecoder();
      for (const record of message.records) {
        switch (record.recordType) {
          case "text":
            const textDecoder = new TextDecoder(record.encoding);
            log(
              "readLog",
              `Text: ${textDecoder.decode(record.data)} (${record.lang})`
            );
            break;
          case "url":
            log("readLog", `URL: ${decoder.decode(record.data)}`);
            break;
          case "mime":
            if (record.mediaType === "application/json") {
              log(
                "readLog",
                `JSON: ${JSON.parse(decoder.decode(record.data))}`
              );
            } else {
              log("readLog", `Media not handled`);
            }
            break;
          default:
            log("readLog", `Record not handled`);
        }
      }
    });
  } catch (error) {
    log("readLog", "Argh! " + error);
  }
});

Итог

На данный момент Web NFC доступен только на телефонах Android через браузер Chrome. Мне пришлось ждать несколько лет, когда NFC впервые пришёл в родной Android. Но apple ещё нужно наверстать упущенное, поэтому я определенно не буду пытаться предсказать, когда большинство браузеров на большинстве мобильных ОС будут поддерживать Web NFC. Но я должен сказать, что простота, с которой веб-разработчики теперь могут использовать физические теги NFC - поразительна, я почти уверен, что это вызовет множество творческих идей. Несомненно, будут случаи использования также в области обслуживания клиентов, и также ясно, что Интернет как платформа будет продолжать развиваться. Мы будем внимательно следить за Web NFC и пока нашли отличный новый API, который мы можем начать использовать уже сегодня.