Новое в 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);

Прочтите публикацию Фила об 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!