2018년 7월 25일 크롬 68 버전이 업데이트 되었습니다. (Stable)버전이죠
not Stable 버전인 Dev 버전은 지금 69.0.3497.12 for Windows, Mac and Linux라고 표기되어있네요
그래서! 오늘은 68버전에 뭐가 변경되어있나 확인해보려고 합니다.
우선
크롬 패치에 대한 로그 사이트입니다.
// 크롬 로그 사이트 69 버전이기 때문에 참고만 하시는게 좋을것 같습니다.
https://chromium.googlesource.com/chromium/src/+log/69.0.3493.3..69.0.3497.12?pretty=fuller&n=10000
우선 68버전의 공식 명칭은
Chrome 68.0.3440.75 이며 해당 에 대한 수정 사항은 위의 로그를 통해서 확인할수 있으며
Chrome 또는 Chromium 블로그 에서 68에 대한 기능 및 큰 변화들을 제공하기 떄문에 참고 하여도 좋을 것 같습니다.
1. HTTP Sites Marked as 'Not Secure'
대표적인 안건으로 되어있네요 SSL(Secure Socket Layer) 를 입히지 않은 사이트에 대해서는 Not Secure 마크를 붙이겠다 라는 거같습니다. 68버전 부터는 이제 안전하지 않은 사이트로 취급이 되겠네요 제 티스토리도 마찬가지...
크롬 블로그 내용 입니다.
'Chrome 68 에서는 모든 HTTP 페이지에 대한 Not Secure("안전하지않음") 이라는 마크를 붙일 겁니다. 그리고 이에 대한 해당 내용은 2월 8일 의 Google Chromium 및 ONline Security 블로그에 게시하여 이를 발표 하였습니다.'
'또한 Chrome에서 보안되지않음 (Not Secure) 경고 페이지를 보지 않기 위해서는 HTTPS로 마이그레이션 하는것이 좋습니다. HTTPS는 SEO,광고 수익 및 실적 영향등 문제를 해결해 줍니다.'
라네요
이미 공표 된 패치였나보네요
** 업뎃 하니 나타납니다.
2. Security Fixed and Rewards
이외의 자잘한 보안 수정 관련 로그입니다. 약 42개의 보안 패치를 적용 하였으며
// 해당 내용은 아래의 URL에서 보안 패치에 대한 내용을 읽을수 있습니다.
https://sites.google.com/a/chromium.org/dev/Home/chromium-security
여기까지는 Google Chrome 블로그에 게시된 내용이였으며
New in Chrome 68 로 게시된 개발자 사이트에서 변경된 점을 포스팅하려 합니다.
대표적인 카테고리 부터 보고 들어가자면
Add to Home Screen behavior
Page Lifecycle API
Payment Handler API
3가지가 있겠네요 해당 내용은 크롬 개발 도구창에 들어가면 나타납니다.
1. Add to Home Screen changes
정해진 웹사이트가 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;
});
해당 에서 ADD버튼을 클릭하게되면 beforeinstall 이벤트에서 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);
});
이에 대한 자세한 내용에 대해서는
사이트를 참조 바랍니다. 풀 코드가 있습니다.
// 홈 화면 배너 관련
https://developers.google.com/web/updates/2018/06/a2hs-updates
2. Page Lifecycle API
페이지 라이프 사이클 관련 API 입니다. 이에 대한 해당 내용은 좀더 분석하고 따로 한번 더 포스팅 하도록 해야 될거 같아서 따로 하겠습니다.
러프하게 말씀드리자면
(이미지를 누르시면 원본으로..)
FROZEN -> HIDDEN 부분에 보시면 resume 과 freeze라는 개념이도입되었습니다.
크롬 사이프 사이클 중 freeze -> resume -> freeze가 가능하게 되어있네요 무슨 의미인지는 모르겠지만 좀더 봐야겠네요
내용 전문입니다.
"사용자가 다수의 탭을 실행하게 되면 메모리,CPU,배터리 및 네트워크와 같은 중요한 리소스가 과도하게 발생할수 있기 때문에 사용자 환경은 매우 좋지 않습니다."
"만약에 사이트가 백그라운드에서 실행 중이면 시스템 리소스를 절약하기 위해서 사이트를 일시 중지 할수 있습니다.
새로운 Page LifeCycle API 를 사용하면 이러한 이벤트를 수신 및 응답이 가능합니다."
"예를 들면 잠시 동안 백그라운드에서 탭이있는 경우 브라우저를 해당 페이지에서 스크립트 실행을 일시 중단하여 리소스를 절약 할수 있습니다."
" 그전에 Freeze 이벤트를 실행하여 열려있는 IndexedDB 또는 네트워크 연결을 닫거나 저장하지 않은 보기 상태를 저장할 수 있습니다. 그 후 -> 사용자가 탭을 다시 초점 맞추면 다시 시작 이벤트가 발생하여 해체된 항목을 다시 초기화 할수 있습니다."
// 관련 freeze -> 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 doc
https://developers.google.com/web/updates/2018/07/page-lifecycle-api
// Page Lifecycle 1 Spec
https://wicg.github.io/page-lifecycle/spec.html
// 해당 git hub
https://github.com/WICG/page-lifecycle
3. Payment Handler API
표준 방식의 결재를 받아들이는 결재 관련 요청 API 가 오픈되었습니다.
결재 API 는 웹 기반 결재 응용 프로그램이 결재 환경에서 직접 결재 할수 있도록 용이하게 함으로 결재의 범위를 확장합니다.
크롬팀에서 이렇게 말하네요
"기존의 웹 에 결재 기능을 추가하는 것은 supportedMethod 등록 정보에 항목 추가하는 것 만큼 쉽습니다."
// 관련 결재 코드
const request = new PaymentRequest([{
// Your custom payment method identifier comes here
supportedMethods: 'https://bobpay.xyz/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
결재 를 처리할수 있는 서비스 워커(Service Worker) 가 설치되면 결재관련 UI가 나타나며 사용자는 결재를 할수 있습니다.
이와관련하여서 Eiji 는 훌륭한 내용을 담고 있습니다.
// Eiji URL
https://developers.google.com/web/updates/2018/06/payment-handler-api
이번 내용은 너무 광범위해서 포스팅을 러프하게 가져오는 정도로는 애매한거 같네요 시간이 된다면 꼭 LifeCycle 관련은 한번 더 쓰려고 합니다.
감사합니다
