Chrome 68의 새로운 기능

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 지금부터 Chrome 68의 개발자를 위한 새로운 기능을 살펴보겠습니다.

변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.

홈 화면에 추가 변경사항

사이트가 홈 화면에 추가 기준을 충족하면 Chrome에서 더 이상 '홈 화면에 추가' 배너를 표시하지 않습니다. 대신 사용자에게 메시지를 표시할 시기와 방법을 제어할 수 있습니다.

사용자에게 메시지를 표시하려면 beforeinstallprompt 이벤트를 수신 대기한 다음 이벤트를 저장하고 앱에 설치 가능함을 나타내는 버튼이나 다른 UI 요소를 추가합니다.

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;
});

사용자가 설치 버튼을 클릭하고 저장된 beforeinstallprompt 이벤트에서 prompt()를 호출하면 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

사용자가 다수의 탭을 실행할 때 메모리, CPU, 배터리, 네트워크와 같은 중요한 리소스는 과도하게 구독되어 사용자 환경이 저하될 수 있습니다.

사이트가 백그라운드에서 실행 중인 경우 시스템에서 리소스를 절약하기 위해 사이트를 정지할 수 있습니다. 새로운 Page Lifecycle 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);

코드 샘플, 팁 등 자세한 내용은 Phil의 Page Lifecycle API 게시물에서 많은 내용을 확인하세요. GitHub에서 spec설명 문서를 찾을 수 있습니다.

결제 핸들러 API

Payment Request API는 결제를 수락하는 개방형 표준 기반 방법입니다. Payment Handler 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' }
  }
});

지정된 결제 수단을 처리할 수 있는 서비스 워커가 설치되면 결제 요청 UI에 표시되며 사용자가 이를 통해 결제할 수 있습니다.

Eiji는 판매자 사이트와 결제 핸들러에 이를 구현하는 방법을 보여주는 유용한 게시물을 제공합니다.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 68의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

DevTools의 새로운 기능

Chrome DevTools의 새로운 기능을 확인하여 Chrome 68의 DevTools에서 새로운 기능을 알아보세요.

구독

그런 다음 YouTube 채널에서 구독 버튼을 클릭하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 69가 출시되는 대로 바로 Chrome의 새로운 기능을 소개해 드리겠습니다.