Новое в Chrome 79

Пит ЛеПейдж

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

  • Установленные прогрессивные веб-приложения на Android теперь поддерживают маскируемые значки .
  • Теперь вы можете создавать захватывающие впечатления с помощью WebXR Device API .
  • API Wake Lock доступен в виде пробной версии.
  • Атрибут rendersubtree доступен в качестве исходной пробной версии.
  • Видео с Chrome DevSummit теперь доступны в сети.
  • И многое другое.

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

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

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

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

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


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

У Тайгера Оукса есть отличный пост «Трюки CSS — Маскируемые значки: адаптивные значки Android для вашего PWA» со всеми подробностями, а также отличный инструмент, который вы можете использовать для тестирования ваших значков, чтобы убедиться, что они подходят.

Веб-XR

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

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

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

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

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

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

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

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

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

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

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

Чтобы запросить блокировку пробуждения, вам необходимо вызвать 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 отображалась немедленно. Например, скроллеры с большим количеством контента или пользовательские интерфейсы с вкладками, где в любой момент времени видна только часть контента.

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

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

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

Саммит разработчиков Chrome 2019

Если вы пропустили Chrome Dev Summit, все выступления — на нашем YouTube-канале .

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

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

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

Подписаться

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

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