Новое в Chrome 80

Pete LePage

Chrome 80 сейчас развертывается, и в нем есть тонна новых вещей для разработчиков!

Поддерживаются:

• Модули в рабочих
• Необязательное связывание в JavaScript
• Испытания нового происхождения
• Функции, которые вышли из первоначального пробного периода
• И многое другое .

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

Рабочие модуля

Module Workers, новый режим для веб-работников - с эргономикой и преимуществами производительности модулей JavaScript теперь доступен. Конструктор Worker принимает новую опцию {type: "module"} , которая изменяет способ загрузки и выполнения скриптов, чтобы соответствовать <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Переход на модули JavaScript также позволяет использовать динамический импорт для кода ленивой загрузки, не блокируя выполнение воркера. Ознакомьтесь с постом Джейсона Threading the web with module workers на web.dev для получения более подробной информации.

Необязательное объединение в цепочку

Попытка прочитать глубоко вложенные свойства в объекте может быть подвержена ошибкам, особенно если есть шанс, что что-то может не оценить.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Проверка каждого значения, прежде чем продолжить, легко превращается в глубоко вложенный оператор, if требует блока try / catch .

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 добавляет поддержку новой функции JavaScript, называемой необязательной цепочкой . При необязательной цепочке, если одно из свойств возвращает null или undefined, вместо того, чтобы выдать ошибку, все просто возвращает undefined.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Проверьте необязательный пост блога цепочки в блоге V8 для всех деталей!

Пробные градуировки по происхождению

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

Периодическая фоновая синхронизация

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

Контактный выбор

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

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

Получить установленные связанные приложения

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

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

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

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

Как вы сообщаете пользователям узнать о контенте, который вы кэшировали в своем PWA? Здесь есть проблема с открытием. Они узнают, чтобы открыть ваше приложение? Или какой контент доступен?

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

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

Чтобы добавить что -то в индекс, мне нужно получить регистрацию работника службы, а затем вызовать index.add и предоставить метаданные о содержании.

После заполнения индекса он отображается в специальной области страницы загрузок Chrome для Android. Ознакомьтесь с публикацией Джеффа «Индексирование офлайн-страниц с помощью API индексации контента» на web.dev для получения полной информации.

Триггеры уведомлений

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

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

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Чтобы запланировать уведомление, вызовите showNotification в регистрации service worker. В параметрах уведомления добавьте свойство showTrigger с TimestampTrigger . Затем, когда придет время, браузер покажет уведомление.

Планируется, что испытание происхождения планируется пройти через Chrome 83, поэтому проверьте уведомление Тома, чтобы получить полную информацию.

Другие испытания происхождения

Есть несколько других испытаний происхождения, начиная с Chrome 80:

• Веб-сериал
• Возможность регистрации PWAS в качестве обработчиков файлов
• Новые свойства для подборщика контактов

Проверять для получения полного списка функций в пробной версии Origin.

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

Конечно, есть еще много чего!

• Теперь вы можете ссылаться напрямую на фрагменты текста на странице, используя #:~:text=something . Chrome прокрутит страницу и выделит первый экземпляр этого фрагмента текста. Например https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
• Настройка display: minimal-ui на рабочем столе PWA добавляет кнопку обратной и перезагрузки в строку заголовка установленного PWA.
• И Chrome теперь поддерживает использование изображений SVG в качестве любимых.

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

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

• Что нового в Chrome DevTools (80)
• Устаревание и удаление Chrome 80
• Обновления ChromeStatus.com для Chrome 80
• Что нового в JavaScript в Chrome 80
• Список изменений в исходном репозитории Chromium

Подписаться

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

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