Новое в Chrome 76

Пит ЛеПейдж

В Chrome 76 мы добавили поддержку:

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

Кнопка установки омнибокса PWA

В Chrome 76 мы упрощаем пользователям установку Progressive Web Apps на рабочий стол, добавляя кнопку установки в адресную строку, которую иногда называют омнибоксом.

Если ваш сайт соответствует критериям установки Progressive Web App , Chrome отобразит кнопку установки в омнибоксе, указывающую пользователю, что ваше PWA можно установить. Если пользователь нажимает кнопку установки, это, по сути, то же самое, что вызов prompt() для события beforeinstallprompt ; он показывает диалоговое окно установки, упрощая установку PWA.

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


Больше контроля над мини-информационной панелью PWA

Пример мини-информационной панели «Добавить на главный экран» для AirHorner

На мобильных устройствах Chrome показывает мини-информационную панель при первом посещении пользователем вашего сайта, если он соответствует критериям установки Progressive Web App . Мы слышали от вас, что вы хотите запретить появление мини-информационной панели и вместо этого обеспечить собственную рекламу установки.

Начиная с Chrome 76, вызов preventDefault() в событии beforeinstallprompt остановит появление мини-информационной панели.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

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

Более быстрые обновления WebAPK

Когда Progressive Web App устанавливается на Android, Chrome автоматически запрашивает и устанавливает веб-APK . После установки Chrome периодически проверяет, не изменился ли манифест веб-приложения (возможно, вы обновили значки, цвета или изменили имя приложения), чтобы определить, требуется ли новый WebAPK.

Начиная с Chrome 76, Chrome будет проверять манифест чаще; проверка каждый день, а не каждые три дня. Если какое-либо из ключевых свойств изменилось, Chrome запросит и установит новый WebAPK, гарантируя актуальность заголовка, значков и других свойств.

Подробную информацию см. в разделе «Частое обновление WebAPK» .

Темный режим

Многие операционные системы теперь поддерживают темный режим или темную тему.

Медиа-запрос prefers-color-scheme позволяет настроить внешний вид вашего сайта в соответствии с предпочтительным режимом пользователя.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

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

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

Это лишь некоторые изменения в Chrome 76 для разработчиков, конечно, их гораздо больше.

Promise.allSettled()

Лично меня очень радует Promise.allSettled() . Он похож на Promise.all() , за исключением того, что перед возвратом он ожидает, пока все обещания будут выполнены.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Чтение больших двоичных объектов стало проще

Blob -объекты легче читать благодаря трем новым методам: text() , arrayBuffer() stream() ; это означает, что нам больше не нужно создавать оболочку для программы чтения файлов!

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Поддержка изображений в API асинхронного буфера обмена.

Кроме того, мы добавили поддержку изображений в API асинхронного буфера обмена , упрощая программное копирование и вставку изображений.

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

Здесь рассматриваются только некоторые ключевые моменты. Дополнительные изменения в Chrome 76 можно найти по ссылкам ниже.

Подписаться

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

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