Новое в Chrome 79

Пит ЛеПейдж

Chrome 79 уже доступен!

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

Маскируемые значки

Если вы используете Android O или более позднюю версию и установили Progressive Web App, вы, вероятно, заметили раздражающий белый круг вокруг значка.

К счастью, Chrome 79 теперь поддерживает маскируемые значки для установленных прогрессивных веб-приложений. Вам нужно будет разработать значок так, чтобы он помещался в безопасную зону — по сути, это будет круг диаметром 80% холста.

Затем в манифесте веб-приложения вам нужно будет добавить новое свойство purpose для значка и задать для него значение maskable . 


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

У Тайгера Оукса есть отличная статья на тему CSS Tricks - Maskable Icons: Android Adaptive Icons for Your PWA со всеми подробностями, а также отличный инструмент, который вы можете использовать для тестирования своих иконок, чтобы убедиться, что они подходят.

Веб XR

Теперь вы можете создавать захватывающие впечатления для смартфонов и шлемов виртуальной реальности с помощью API-интерфейса WebXR Device.

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

Чтобы начать работу с новым API, прочитайте статью Виртуальная реальность приходит в Интернет .

Испытания нового происхождения

Испытания Origin дают нам возможность проверить экспериментальные функции и API, а вам — предоставить отзывы об их удобстве использования и эффективности при более широком развертывании.

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

Участие в пробной версии Origin позволяет вам создавать демоверсии и прототипы, которые ваши пользователи, участвующие в бета-тестировании, смогут опробовать в течение всего срока действия пробной версии, не требуя от них установки каких-либо специальных флажков в Chrome.

Более подробную информацию о пробных версиях Origin можно найти в Руководстве по пробным версиям Origin для веб-разработчиков . Вы можете просмотреть список активных пробных версий Origin и зарегистрироваться на них на странице пробных версий Chrome Origin .

Блокировка пробуждения

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

Но с новым API Wake Lock страница может запросить блокировку и предотвратить затемнение экрана или включение заставки. Это идеально подходит для Slides, но также полезно для таких вещей, как сайты с рецептами, где вы можете захотеть оставить экран включенным, пока следуете инструкциям.

Чтобы запросить блокировку пробуждения, необходимо вызвать navigator.wakeLock.request() и сохранить возвращаемый им объект WakeLockSentinel .

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Блокировка сохраняется до тех пор, пока пользователь не покинет страницу или пока вы не вызовете release для объекта WakeLockSentinel , который вы сохранили ранее.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Более подробную информацию можно найти на web.dev/wakelock .

атрибут rendersubtree

Бывают случаи, когда вы не хотите, чтобы часть DOM отображалась немедленно. Например, скроллеры с большим объемом контента или вкладки UI, где в любой момент времени видна только часть контента.

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

Если rendersubtree установлен на invisible , содержимое элемента не отрисовывается и не проверяется на попадание, что позволяет оптимизировать рендеринг.

Изменение rendersubtree на activatable делает содержимое видимым путем удаления атрибута invisible и рендеринга содержимого.

Chrome Dev Summit 2019

Если вы пропустили Chrome Dev Summit, все доклады можно посмотреть на нашем канале YouTube .

У Джейка также есть замечательная ветка в Twitter, где он рассказывает обо всем интересном, что происходило между выступлениями, в том числе о новом члене нашей команды, Сурджико .

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

Это охватывает только некоторые из основных моментов. Проверьте ссылки ниже для дополнительных изменений в Chrome 78.

Подписаться

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

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