#javascript #html #debugging #nfc #webnfc
#javascript #HTML #отладка #nfc #webnfc
Вопрос:
Я пытаюсь заставить Web NFC работать через Web NFC API, но я не могу получить его после сообщения об ошибке NotAllowedError: NFC permission request denied.
Я использую это в Chrome 89 Dev на компьютере с Windows 10, и исходный код выполняется локально.
Я также пробовал примеры, размещенные в Интернете, включая пример Google, но он возвращает ту же ошибку. Я не обеспокоен тем, что на данный момент он является экспериментальным, поскольку ссылка на это показывает, что он успешно прошел необходимые тесты, включая разрешения.
Код HTML / JS, который я использую, приведен ниже, и я прочитал пункт спецификации 9.3, но я не могу понять, как это записать в виде кода, так есть ли руководящий алгоритм, который был бы полезен здесь для решения этой проблемы?
async function readTag() {
if ("NDEFReader" in window) {
const reader = new NDEFReader();
try {
await reader.scan();
reader.onreading = event => {
const decoder = new TextDecoder();
for (const record of event.message.records) {
consoleLog("Record type: " record.recordType);
consoleLog("MIME type: " record.mediaType);
consoleLog("=== data ===n" decoder.decode(record.data));
}
}
} catch(error) {
consoleLog(error);
}
} else {
consoleLog("Web NFC is not supported.");
}
}
async function writeTag() {
if ("NDEFWriter" in window) {
const writer = new NDEFWriter();
try {
await writer.write("helloworld");
consoleLog("NDEF message written!");
} catch(error) {
consoleLog(error);
}
} else {
consoleLog("Web NFC is not supported.");
}
}
function consoleLog(data) {
var logElement = document.getElementById('log');
logElement.innerHTML = data 'n';
}; <!DOCTYPE html>
<html>
<head>
<script src="webnfc.js"></script>
</head>
<body>
<p>
<button onclick="readTag()">Test NFC Read</button>
<button onclick="writeTag()">Test NFC Write</button>
</p>
<pre id="log"></pre>
</body>
</html> Ответ №1:
Из https://web.dev/nfc/#security-and-permissions
Web NFC доступен только для фреймов верхнего уровня и безопасных контекстов просмотра (только HTTPS). Origins должны сначала запросить разрешение «nfc» при обработке жеста пользователя (например, нажатие кнопки). Методы сканирования NDEFReader() и write() запускают запрос пользователя, если доступ ранее не был предоставлен.
Я предполагаю, что вы работаете с file:// URL-адреса, как вы сказали «локально», который не поддерживается.
Вам нужно разместить его на локальном веб-сервере, используя https:// URL
После того, как в нужной области попытка сканирования или записи должна вызвать запрос пользователя.
Вы также можете проверить разрешения, см. https://web.dev/nfc/#check-for-permission
Обновить:
Итак, я попробовал пример страницы https://googlechrome.github.io/samples/web-nfc /
И это работает для меня на Android Chrome 87 с включенными «Экспериментальными функциями веб-платформы»
Когда вы нажимаете кнопку сканирования, появляется диалоговое окно с запросом разрешения.
Сравнивая код в этом примере с вашим, я замечаю, что:-
ndef.addEventListener("reading" , ({ message, serialNumber }) => { ...
Где, как у вас:-
ndef.onreading = event => { ...
Я не знаю, является ли это настройкой стиля, что происходит на событии или что-то еще (эй, это все экспериментально)
Обновите 2, чтобы ответить на вопрос из комментариев службы поддержки настольных компьютеров.
Итак, на данный момент у вас должны быть некоторые комбинации рабочего стола / браузера, и, возможно, в будущем будет более широкая поддержка, поскольку это уже не экспериментальные стандарты. Очевидно, что, поскольку ваша тестовая ссылка предполагает, что Chrome на рабочем столе Linux должен работать, поскольку это действительно похоже на поддержку Android, со всей обработкой устройств NFC, выполняемой, libnfc и браузеру просто нужно знать об этой библиотеке, а не о каждом типе usb или другом устройстве, которое не может выполнять NFC.
Из того, что видно из поддержки NFC в Windows, большая часть этого сосредоточена на прямом управлении устройством чтения NFC через USB как просто другим USB-устройством, хотя в Windows.Networking.Proximity API есть эквивалент libnfc, я не встречал ни одного устройства чтения NFC, говорящего, что они поддерживают это или кто-либо его использует.
Для Mac Deskstop, учитывая, что Apple отстает от графика с поддержкой NFC в iOS, я чувствую, что их поддержка настольных компьютеров будет еще больше отставать, хотя она может быть похожа на Linux.
Комментарии:
1. Хорошо, итак, я интегрировал код разрешений и разместил его на tina.rf.gd (Проверьте страницу на наличие исходных кодов) и теперь я не уверен, что происходит, поскольку я даже не могу заставить его отображать что-либо в консоли или в приглашении пользователя.
2. Обновил ответ, поскольку я смог заставить работать другой пример кода.
3. Повозился с кодом, и я, наконец, заставил его работать с вашим изменением кода; спасибо! Как вы думаете, эти результаты могут быть повторены в настольном браузере? Я видел много успехов в поддержке Chrome для настольных компьютеров (например, wpt.fyi / results / … ), но я не уверен, почему он не обрабатывает его таким же образом, даже с подключенным устройством чтения NFC ://
4. Добавлено обновление о поддержке настольных компьютеров, поскольку ссылка на результаты тестирования показывает, что поддержка Chrome в Linux должна быть такой же хорошей, как и на Android (потому что на самом деле это одно и то же)
5. привет, @andrew, я только что перечитал ваш обновленный ответ о libnfc, работающем в Linux; казалось, у вас есть приблизительные идеи о том, как может быть возможность связать libnfc в браузере? У меня он работает автономно от терминала, и я пытаюсь выяснить, как я могу включить его в веб-приложение, так что у вас есть какие-либо советы по этому поводу?
Ответ №2:
Как вы можете прочитать на https://web.dev/nfc/#browser-support , Web NFC пока поддерживает только Android, поэтому вы получаете "NotAllowedError: NFC permission request denied." сообщение об ошибке в Windows.
Комментарии:
1. Приятно знать, спасибо! — проводятся ли какие-либо испытания для поддержки Windows и API?
2. На данный момент их нет.