«эта статья является переводом оригинальной статьи» NFC приходит в Интернет ".
Еще я веду Telegram-канал» Фронтенд в морском стиле », где я рассказываю об интересных вещах из мира разработки интерфейсов.
Введение
Должно быть, это было где-то в 2012 году, когда Google выпустила первые телефоны с поддержкой NFC ( Гугл Нексус С ) вместе с обновлением Android, которое позволило разработчикам использовать NFC API. Я хорошо помню, что заплатил несколько евро за несколько меток 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-страницах.
Хотя Apple Safari и другие браузеры снова опоздали на игру, это может снова стать моментом для нового прорыва в технологии NFC. Web NFC снижает барьер для разработчиков и, что более важно, функциональность NFC теперь может быть частью Интернета: установка не требуется.
Веб-NFC 101
NFC означает Near Field Communications и представляет собой беспроводную технологию ближнего действия, работающую на частоте 13,56 МГц.Малый радиус на самом деле означает близкое расстояние: для связи устройства должны находиться на расстоянии нескольких сантиметров друг от друга.
Форум NFC определяет четыре режима работы: чтение/запись, сеть p2p, эмуляция карты и беспроводная зарядка.
Из этих четырех режимов Web NFC поддерживает только первый — чтение/запись — и только так называемую спецификацию NDEF. NDEF — это формат обмена данными NFC, который описывает стандартизированный способ кодирования данных в теги NFC и их обратного считывания.
Например, он определяет, как кодируется текст или как URL-адреса могут быть закодированы с экономией байтов.
Чтобы внести немного большей ясности, вы не сможете выдавать себя за кредитную карту с NFC для платежей в магазине, а также не сможете «включить беспроводную зарядку NFC» через Web NFC. А вот все, что связано с чтением и записью небольших фрагментов данных в NFC-метки в стандартизированном формате NDEF, включено в Web NFC.
Возможное использование
В большинстве Характеристики веб-NFC Перечислено несколько вариантов использования, например использование меток NFC в художественных галереях или музеях.Должен признаться, что во многих случаях я не вижу явной выгоды.
Эти теги вполне можно было бы записать с помощью специального телефона и приложения NFC, и пользователи этих тегов просто прикоснулись бы к ним, чтобы открыть URL-адрес — это современное искусство.
Я считаю, что Web NFC может сыграть свою роль, особенно в CX, когда речь идет о случаях использования, для которых в наши дни клиенты никогда бы не установили приложение.
Например, чтобы принять участие в игре в розничном магазине, я бы не стал устанавливать приложение, но мог бы открыть веб-страницу для участия.
Web NFC также поддерживает запись тегов NFC, что открывает ряд интересных приложений, например, для технических специалистов.
Хотя зону обслуживания можно определить с помощью метки NFC, теперь в метку можно также записать точную дату/время обслуживания машины.
Все это возможно без необходимости установки специального приложения, что снижает барьеры входа.
Чтобы поэкспериментировать с Web NFC в браузере Pixel 5 и Chrome, я создал небольшой общедоступная веб-страница , который вы также можете использовать, чтобы попробовать.
Все последующие примеры кода взяты оттуда.
Web NFC, а также стандарт NDEF для понимания сообщений, записанных или прочитанных с помощью тегов NFC, можно найти в официальная спецификация .
Давайте напишем пару тегов
Чтобы написать тег NFC, вам необходимо понять структуру сообщения NDEF. Сообщение, записанное в тег, состоит из нескольких записей NDEFRecords, которые могут быть обычным текстом, URL-адресами или более сложными типами, такими как смарт-постеры.Как видите, написать простое текстовое сообщение несложно:
Теперь давайте запишем 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-адрес: 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, который мы можем начать использовать уже сегодня.
Теги: #Android #Google Chrome #JavaScript #typescript #nfc
-
Добросовестное Использование
19 Oct, 24 -
Создайте Доверие К Успеху
19 Oct, 24 -
Mysql Против Sql Server – Кто Победит?
19 Oct, 24 -
Против Стресса И Бессонницы: Музыка Поможет
19 Oct, 24 -
Спросите Итана №66: Магнетизм Издалека
19 Oct, 24
