- Android의 홈 화면에 추가 동작이 더 많은 제어 기능을 제공하도록 변경됩니다.
- Page Lifecycle API는 탭이 일시중지되었거나 복원되었음을 알려줍니다.
- Payment Handler API를 사용하면 웹 기반 결제 앱에서 Payment Request 환경을 지원할 수 있습니다.
이 외에도 다양한 기능이 있습니다.
저는 피트 르페이지입니다. 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은 사용자가 홈 화면에 추가 기준을 충족하는 사이트를 처음 방문할 때 미니 정보 표시줄을 표시합니다. 일단 미니 정보 표시줄을 해제하고 나면 한동안 다시 표시되지 않습니다.
사용할 수 있는 코드 샘플을 비롯한 자세한 내용은 홈 화면 동작에 추가할 변경사항을 참고하세요.
Page Lifecycle 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);
코드 샘플, 도움말 등을 포함한 자세한 내용은 필의 Page Lifecycle API 게시물을 확인하세요. GitHub에서 사양 및 설명 문서를 확인할 수 있습니다.
Payment Handler API
Payment Request API는 결제를 수락하는 개방형 표준 기반 방법입니다. Payment Handler API는 웹 기반 결제 앱을 사용하여 Payment Request 환경 내에서 바로 간편하게 결제할 수 있도록 함으로써 Payment Request의 적용 범위를 넓혀줍니다.
판매자는 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에 표시되며 사용자가 이 수단으로 결제할 수 있습니다.
판매자 사이트와 결제 핸들러에 이를 구현하는 방법을 보여주는 유용한 게시물이 있습니다.
그 외에도 다양한 기능 제공
이는 Chrome 68에서 개발자를 위해 변경된 사항 중 일부에 불과하며, 물론 그 외에도 많은 변경사항이 있습니다.
iframe에 삽입된 콘텐츠는 최상위 검색 컨텍스트를 다른 출처로 안내하려면 사용자 동작이 필요합니다.- Chrome 1부터 CSS
grab및grabbing의cursor값에 접두사가 추가되었으며 이제 접두사가 없는 표준 값이 지원됩니다. 마지막으로 - 그리고 중요한 점은 이제 서비스 워커 업데이트를 요청할 때 HTTP 캐시가 무시되므로 Chrome이 사양 및 다른 브라우저와 일치하게 됩니다.
DevTools의 새로운 기능
Chrome 68의 DevTools에 관한 새로운 기능을 알아보려면 Chrome DevTools의 새로운 기능을 확인하세요.
구독
그런 다음 YouTube 채널에서 구독 버튼을 클릭하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 피트 르페이지입니다. Chrome 69가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.