Новое в 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();

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

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

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

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

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 веб-сборки

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

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

И более

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

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

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

Подписаться

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

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