Новое в Chrome 89

Пит ЛеПейдж

Chrome 89 уже начинает выходить в стабильную версию.

Вот что вам нужно знать:

Я Пит ЛеПейдж , работаю и снимаю из дома. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 89!

WebHID, WebNFC и веб-сериал

Меня очень интересуют WebHID, WebNFC и Web Serial. Они открывают перед пользователями новые сценарии взаимодействия с реальным оборудованием, которые раньше были невозможны.

Они позволяют производителям подключаться к забавному, необычному оборудованию, приложениям для видеоконференций и использовать специальные кнопки телефонии на специализированных динамиках. Или любое количество других вариантов использования.

Используя Web Serial и около 60 строк кода , @AndreBan создал страницу , которая может взаимодействовать с MicroPython REPL на Raspberry Pi Pico . Web Serial также используется Espruino в их веб-IDE .

На CDS 2019 Франсуа написал забавную игру в стиле памяти с использованием Web NFC. Вам нужно было коснуться телефоном нужной карты в правильном порядке.

StreamDeck с барабанным пэдом Daft Punk

А мой любимый @bramus использовал WebHID для подключения к StreamDeck и создал барабанный пэд Daft Punk . Если у вас нет StreamDeck, посмотрите его демонстрационное видео на YouTube и посмотрите код на GitHub .

Независимо от того, взаимодействует ли ваш сайт с вашим оборудованием или ваше оборудование, которое может взаимодействовать с множеством сайтов, пользователи выигрывают, потому что им не нужно устанавливать специальные драйверы или программное обеспечение.

Вы можете узнать больше о некоторых устройствах, к которым можно подключиться, на странице web.dev/devices или ознакомиться с руководствами по началу работы с WebHID , WebNFC и Web Serial .

Изменения критериев возможности установки PWA

Автономная поддержка с самого начала была ключевой частью критериев возможности установки Progressive Web App. Как и в случае с другими установленными приложениями, пользователи ожидают, что оно будет работать надежно. Это должно быть быстро, и они никогда не должны видеть динозавра в автономном режиме!

Позже в этом году мы планируем закрыть лазейку, которая позволяла нескольким сайтам соответствовать критериям установки без опыта работы в автономном режиме. Если ваш PWA уже работает в автономном режиме, все готово. Никаких действий не требуется, но если вы этого не сделали, самое время добавить их!

Начиная с Chrome 89, если ваш PWA не предоставляет действительный ответ в автономном режиме, вы увидите предупреждение в DevTools на вкладке «Проблемы», а Lighthouse укажет на наличие проблемы. И принудительное внедрение начнется в Chrome 93 позднее в этом году.

DevTools показывает предупреждающее сообщение в консоли.
Предупреждающее сообщение в консоли Chrome DevTools.
DevTools показывает предупреждающее сообщение на вкладке «Приложение».
Предупреждающее сообщение на вкладке «Приложение» > «Манифест» > «Установка».

Вы можете решить, какой офлайн-опыт вы хотите предоставить. В идеале вы должны предоставить как можно больше своего опыта. Но, как минимум, это может быть просто резервная автономная страница .

Более подробную информацию об изменении и о том, почему мы его вносим, ​​можно найти в статье «Улучшение обнаружения автономной поддержки Progressive Web App» .

Если вы не знаете, с чего начать, попробуйте Workbox . Он имеет набор библиотек, которые могут обеспечить готовый к работе сервисный работник для вашего PWA. Или, что касается простой резервной автономной страницы, в статье «Создание автономной резервной страницы» есть весь необходимый код, который вы можете скопировать и вставить прямо на свой сайт.

Общий веб-ресурс и целевой веб-ресурс для настольных компьютеров

Если ваш сайт позволяет пользователям создавать, редактировать файлы или взаимодействовать с ними, вам следует использовать API-интерфейсы Web Share и Web Share Target. Эти API уже некоторое время доступны на мобильных устройствах, но теперь поддерживаются в ChromeOS и Windows.

Web Share позволяет пользователям отправлять файлы или данные в другие установленные приложения на своем устройстве, например, обмениваясь фотографиями из Google Photos в 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/*"],
      },
    ],
  },
},

Для ознакомления с руководствами по началу работы проверьте интеграцию с пользовательским интерфейсом общего доступа к ОС с помощью API веб-ресурса и получение общих данных с помощью целевого API веб-ресурса .

И еще

И, конечно, есть еще много всего.

Chrome теперь поддерживает await верхнего уровня в модулях JavaScript.

Новый значок установки омнибокса для PWA

Чтобы избежать путаницы у пользователей, мы обновили значок, отображаемый в омнибоксе для устанавливаемых PWA.


А если вы использовали доверенное веб-действие, чтобы сделать свой PWA доступным в Play Store для ChromeOS, вы можете подписаться на пробную версию API цифровых товаров для происхождения .

Дальнейшее чтение

Это касается только некоторых ключевых моментов. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 89.

Подписаться

Хотите быть в курсе наших видео, подпишитесь на наш канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 90, я буду здесь, чтобы рассказать вам, что нового в Chrome!

Кредиты

Фотография Raspberry Pis и Arduino сделана Харрисоном Бродбентом на Unsplash.