Новое в Chrome 80

Пит ЛеПейдж

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

Есть поддержка:

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

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

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

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

Переход к модулям JavaScript также позволяет использовать динамический импорт для кода отложенной загрузки, не блокируя выполнение работника. Для получения более подробной информации ознакомьтесь с публикацией Джейсона «Потоки в сети с помощью рабочих модулей» на 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 или неопределенное значение, а не выдает ошибку, все это просто возвращает неопределенное значение.

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

Подробности можно узнать в статье «Необязательная цепочка» в блоге v8!

Пробная градация происхождения

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

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

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

Выбор контактов

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

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

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

Один из наиболее распространенных случаев использования — принятие решения о том, следует ли продвигать установку вашего 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 при регистрации сервисного работника. В параметрах уведомлений добавьте свойство showTrigger с TimestampTrigger . Затем, когда придет время, браузер покажет уведомление.

Пробную версию Origin планируется запустить в Chrome 83, поэтому для получения полной информации ознакомьтесь с публикацией Тома «Триггеры уведомлений» на сайте web.dev.

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

В Chrome 80 начинается еще несколько пробных версий Origin:

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

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

И еще

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

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

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

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

Подписаться

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

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