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