Новое в Chrome 84

Пит ЛеПейдж

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

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

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

Ярлыки значков приложений

Ярлыки иконок приложений для PWA Twitter

Ярлыки значков приложений позволяют пользователям быстро запускать общие задачи в вашем приложении. Например, создавать новый твит, отправлять сообщения или просматривать уведомления. Они поддерживаются в Chrome для Android.

Эти ярлыки вызываются долгим нажатием на иконку приложения на Android. Добавить ярлык в PWA легко, создайте новое свойство shortcuts в манифесте веб-приложения, опишите ярлык и добавьте свои значки. 


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Подробную информацию можно найти в статье «Как быстро выполнить задачи с помощью ярлыков приложений» .

API веб-анимации

Chrome 84 добавляет множество ранее неподдерживаемых функций в API веб-анимации.

  • animation.ready и animation.finished были обещаны.
  • Браузер теперь может очищать и удалять старые анимации, экономя память и повышая производительность.
  • Теперь вы можете комбинировать анимации, используя композитные режимы — с опциями add и accumulate .

Я просто не могу здесь в полной мере описать все улучшения или привести хорошие примеры, поэтому ознакомьтесь с улучшениями API веб-анимации в Chromium 84 для получения полной информации.

API индексации контента

Если ваш контент доступен без подключения к сети. Но пользователь об этом не знает? Действительно ли он доступен? Возникает проблема обнаружения!

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

Чтобы добавить контент в индекс, вызовите index.add() при регистрации сервисного работника и укажите необходимые метаданные о контенте. 


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Хотите увидеть, что уже есть в вашем индексе? Вызовите index.getAll() при регистрации сервисного работника.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Подробную информацию см. в разделе Индексирование офлайн-страниц с помощью API индексации контента .

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

Реализация блокировки пробуждения на сайте Бетти Крокер.

Я люблю готовить, но меня это очень раздражает, когда я следую рецепту, и включается заставка! С API блокировки пробуждения, который также выходит из своего первоначального пробного периода в Chrome 84, сайты могут запрашивать блокировку пробуждения, чтобы предотвратить затемнение и блокировку экрана.

Фактически, сайт Бетти Крокер использует это сегодня и опубликовал на web.dev исследование, показывающее 300%-ное увеличение показателей намерения покупки.

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


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Конечно, это еще не все, поэтому ознакомьтесь с разделом «Не спите с помощью API блокировки экрана» , но, по крайней мере, мой экран больше не будет покрыт мукой!

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

Я хочу рассказать о двух новых испытаниях Origin. Если вы новичок в испытаниях Origin, ознакомьтесь с разделом Начало работы с испытаниями Origin Chrome .

Обнаружение простоя

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

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

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

Веб-сборка SIMD

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

Чтобы узнать больше о WebAssembly SIMD, ознакомьтесь с разделом Быстрые параллельные приложения с WebAssembly SIMD .

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

Chrome 84 — это большой релиз, но есть еще несколько важных обновлений, на которые я хотел бы обратить внимание.

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

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

Подписаться

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

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