Новое в Chrome 68

Пит ЛеПейдж

И это еще не все !

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

Хотите полный список изменений? Ознакомьтесь со списком изменений в исходном репозитории Chromium .

Добавить изменения на главный экран

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

Чтобы сделать запрос пользователю, прослушивайте событие beforeinstallprompt , затем сохраните событие и добавьте кнопку или другой элемент пользовательского интерфейса в свое приложение, чтобы указать, что его можно установить.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Когда пользователь нажимает кнопку установки, вызывает prompt() для сохраненного события beforeinstallprompt , а затем Chrome отображает диалоговое окно добавления на главный экран. 


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

Чтобы дать вам время обновить сайт, Chrome покажет мини-информационную панель при первом посещении пользователем сайта, соответствующего критериям добавления на главный экран. После закрытия мини-информационная панель некоторое время не будет отображаться снова.

Изменения в поведении функции «Добавить на главный экран» содержат полную информацию, включая примеры кода, которые вы можете использовать, и многое другое.

API жизненного цикла страницы

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

Если ваш сайт работает в фоновом режиме, система может приостановить его для экономии ресурсов. С новым API жизненного цикла страницы вы теперь можете прослушивать эти события и реагировать на них.

Например, если пользователь некоторое время держал вкладку в фоновом режиме, браузер может решить приостановить выполнение скрипта на этой странице, чтобы сэкономить ресурсы. Перед этим он запустит событие freeze , что позволит вам закрыть открытые IndexedDB или сетевые соединения или сохранить любое несохраненное состояние представления. Затем, когда пользователь снова фокусирует вкладку, запускается событие resume , в котором вы можете повторно инициализировать все, что было удалено.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

Ознакомьтесь с публикацией Фила Page Lifecycle API для получения более подробной информации, включая примеры кода, советы и многое другое. Вы можете найти спецификацию и документацию с пояснениями на GitHub.

API обработчика платежей

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

Для продавца добавление существующего приложения для веб-платежей так же просто, как добавление записи в свойство supportedMethods .

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Если установлен сервисный работник, который может обрабатывать указанный способ оплаты, он отобразится в пользовательском интерфейсе запроса платежа, и пользователь сможет оплатить с его помощью.

У Эйджи есть отличная статья , в которой показано, как реализовать это для сайтов продавцов и обработчиков платежей.

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

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

Новое в DevTools

Обязательно ознакомьтесь с разделом Новое в Chrome DevTools , чтобы узнать, что нового в DevTools в Chrome 68.

Подписаться

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

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