Новое в Chrome 89

Пит ЛеПейдж

Chrome 89 уже начинает распространяться как стабильная версия.

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

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

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

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

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

Используя Web Serial и около 60 строк кода, @AndreBan создал страницу, которая может взаимодействовать с MicroPython REPL на Raspberry Pi Pico . Espruino также использует Web Serial в своей веб-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. Или, если вам нужна простая резервная страница для автономной работы, в статье «Создание резервной страницы для автономной работы» есть весь необходимый код, который вы можете скопировать и вставить прямо на свой сайт.

Web Share и Web Share Target для настольных компьютеров

Если ваш сайт позволяет пользователям создавать, редактировать файлы и взаимодействовать с ними, вам следует использовать 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 Web Share и Получение общих данных с API Web Share Target .

И многое другое

И, конечно, это еще не все.

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

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

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


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

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

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

Подписаться

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

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

Кредиты

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