Новое в Chrome 76

Пит ЛеПейдж

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

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

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

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

Если ваш сайт соответствует критериям установки 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 автоматически запрашивает и устанавливает Web 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 можно найти по ссылкам ниже.

Подписаться

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

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