В настоящее время Chrome 89 распространяется в стабильной версии.
Вот что вам нужно знать:
- Функции WebHID, WebNFC и Web Serial завершили этап первоначального тестирования и теперь доступны в стабильной версии.
- Мы закрываем лазейку, которую использовали несколько разработчиков, чтобы обойти проверки на возможность установки PWA .
- Функции Web Share и Web Share Target доступны на настольных компьютерах.
- И это еще не все .
Я Пит ЛеПейдж , работаю и снимаю из дома. Давайте начнём и посмотрим, что нового для разработчиков в Chrome 89!
WebHID, WebNFC и Web Serial
Я в восторге от WebHID, WebNFC и Web Serial. Они открывают перед пользователями новые возможности, которые раньше были невозможны, позволяя взаимодействовать с реальным оборудованием.
Они позволяют разработчикам подключаться к интересным, необычным устройствам, использовать приложения для видеоконференций, специальные кнопки телефонии на специализированных колонках, или применять их в самых разных ситуациях.
Используя Web Serial и около 60 строк кода, @AndreBan создал страницу, которая может взаимодействовать с REPL MicroPython на Raspberry Pi Pico . Web Serial также используется компанией Espruino в их веб-IDE .
На конференции CDS 2019 Франсуа разработал забавную игру на развитие памяти с использованием Web NFC. Нужно было приложить телефон к нужной карте в правильном порядке.
А вот мой любимый пример: @bramus использовал WebHID для подключения к StreamDeck, создав драм-пэд Daft Punk . Если у вас нет StreamDeck, посмотрите его демонстрационное видео на YouTube, а код — на GitHub .
Независимо от того, взаимодействует ли ваш сайт с вашим оборудованием или ваше оборудование может взаимодействовать со множеством сайтов, пользователи выигрывают, потому что им не нужно устанавливать специальные драйверы или программное обеспечение.
Более подробную информацию о некоторых устройствах, к которым можно подключиться, можно найти на сайте web.dev/devices , или же ознакомиться с руководствами по началу работы с WebHID , WebNFC и Web Serial .
Изменения в критериях установки PWA
Поддержка работы в автономном режиме с самого начала являлась ключевым критерием для устанавливаемых прогрессивных веб-приложений. Как и в случае с другими устанавливаемыми приложениями, пользователи ожидают от них надежной работы. Приложение должно быть быстрым, и пользователи никогда не должны видеть динозавра, работающего в автономном режиме!
В конце этого года мы планируем закрыть лазейку, которая позволяла нескольким сайтам проходить критерии установки без офлайн-версии. Если ваше PWA уже имеет офлайн-версию, то всё в порядке. Никаких действий не требуется, но если её нет, самое время её добавить!
Начиная с Chrome 89, если ваше PWA не выдает корректный ответ в автономном режиме, вы увидите предупреждение в инструментах разработчика на вкладке «Проблемы», и Lighthouse укажет на наличие проблемы. Контроль за соблюдением правил начнется в Chrome 93, который выйдет позже в этом году.
Вы можете сами решить, какой именно офлайн-сервис вы хотите предоставить. В идеале, следует предоставить как можно больше возможностей. Но как минимум, это может быть просто резервная страница для офлайн-доступа .
Более подробную информацию об изменении и причинах его внесения вы найдете в статье «Улучшение обнаружения поддержки работы в автономном режиме в прогрессивных веб-приложениях» .
Если вы не знаете, с чего начать, обратите внимание на Workbox . Он предлагает набор библиотек, которые позволят создать готовый к использованию сервис-воркер для вашего PWA. Или, для простой резервной страницы, работающей в автономном режиме, в статье «Создание резервной страницы, работающей в автономном режиме» есть весь необходимый код, который вы можете скопировать и вставить непосредственно на свой сайт.
Веб-доступ и целевой объект веб-доступа для рабочего стола
Если ваш сайт позволяет пользователям создавать, редактировать файлы или взаимодействовать с ними, вам следует использовать API Web Share и Web Share Target. Эти API уже некоторое время доступны на мобильных устройствах, но теперь поддерживаются и в ChromeOS и Windows.
Функция Web Share позволяет пользователям отправлять файлы или данные в другие установленные на их устройстве приложения, например, делиться фотографией из Google Фото в Twitter.
async function share(title, text, url) {
try {
await navigator.share({title, text, url});
return true;
} catch (ex) {
console.error('Share failed', ex);
return false;
}
}
Чтобы зарегистрироваться в качестве целевого объекта и позволить другим приложениям обмениваться с вами файлами или данными, вам потребуется использовать API Web Share Target.
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"],
},
],
},
},
Для начала работы ознакомьтесь с руководствами «Интеграция с пользовательским интерфейсом общего доступа ОС с помощью Web Share API» и «Получение общих данных с помощью Web Share Target API» .
И многое другое
И, конечно же, это далеко не всё.
Теперь Chrome позволяет использовать await верхнего уровня внутри модулей JavaScript.
Чтобы избежать путаницы для пользователей, мы обновили значок, отображаемый в адресной строке для устанавливаемых PWA.
А если вы использовали функцию «Доверенное веб-действие» для размещения вашего PWA в Play Store для ChromeOS, вы можете зарегистрироваться для участия в пробной версии API Digital Goods .
Дополнительная информация
Здесь описаны лишь некоторые из ключевых изменений. Подробнее об изменениях в Chrome 89 можно узнать здесь.
- Что нового в инструментах разработчика Chrome (89)
- Устаревшие функции и удалённые обновления в Chrome 89
- Обновления ChromeStatus.com для Chrome 88
- Что нового в JavaScript в Chrome 88?
- список изменений репозитория исходного кода Chromium
Подписаться
Хотите быть в курсе наших видеороликов? Тогда подпишитесь на наш YouTube-канал для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.