CINXE.COM

<!DOCTYPE html> <html class='v2 list-page' dir='ltr' itemscope='' itemtype='http://schema.org/Blog' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <link href='https://www.blogger.com/static/v1/widgets/3566091532-css_bundle_v2.css' rel='stylesheet' type='text/css'/> <title> Chromium Blog: capabilities </title> <meta content='width=device-width, height=device-height, initial-scale=1.0' name='viewport'/> <meta content='IE=Edge' http-equiv='X-UA-Compatible'/> <meta content='Chromium Blog' property='og:title'/> <meta content='en_US' property='og:locale'/> <meta content='https://blog.chromium.org/search/label/capabilities' property='og:url'/> <meta content='Chromium Blog' property='og:site_name'/>  <meta content='Chromium Blog' property='og:title'/> <meta content='summary' name='twitter:card'/> <meta content='@ChromiumDev' name='twitter:creator'/> <link href='https://fonts.googleapis.com/css?family=Roboto:400italic,400,500,500italic,700,700italic' rel='stylesheet' type='text/css'/> <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>  <style id='page-skin-1' type='text/css'></style> <style id='template-skin-1' type='text/css'></style>  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link href='https://blog.chromium.org/favicon.ico' rel='icon' type='image/x-icon'/> <link href='https://blog.chromium.org/search/label/capabilities' rel='canonical'/> <link rel="alternate" type="application/atom+xml" title="Chromium Blog - Atom" href="https://blog.chromium.org/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Chromium Blog - RSS" href="https://blog.chromium.org/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Chromium Blog - Atom" href="https://www.blogger.com/feeds/2471378914199150966/posts/default" />  <meta content='https://blog.chromium.org/search/label/capabilities' property='og:url'/> <meta content='Chromium Blog' property='og:title'/> <meta content='News and developments from the open source browser project' property='og:description'/>  <base target='_self'/> <style> html { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body { padding: 0; /* This ensures that the scroll bar is always present, which is needed */ /* because content render happens after page load; otherwise the header */ /* would "bounce" in-between states. */ min-height: 150%; } h2 { font-size: 16px; } h1, h2, h3, h4, h5 { line-height: 2em; } html, h4, h5, h6 { font-size: 14px; } a, a:visited { /* Ensures links meet minimum contrast ratios. */ color: #3974d6; text-decoration: none; } a:focus, a:hover, a:active { text-decoration: none; } .Header { margin-top: 15px; } .Header h1 { font-size: 32px; font-weight: 300; line-height: 32px; height: 42px; } .header-inner .Header .titlewrapper { padding: 0; margin-top: 30px; } .header-inner .Header .descriptionwrapper { padding: 0; margin: 0; } .cols-wrapper { margin-top: 56px; } .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer { padding: 0 60px; } .header-inner { height: 256px; position: relative; } html, .header-inner a { color: #212121; color: rgba(0,0,0,.87); } .header-inner .google-logo { display: inline-block; background-size: contain; z-index: 1; height: 70px; overflow: hidden; margin-top: 4px; margin-right: 8px; } .header-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 12px; width: 100%; } .google-logo { margin-left: -4px; } .google-logo img{ height:70px; } #google-footer { position: relative; font-size: 13px; list-style: none; text-align: right; } #google-footer a { color: #444; } #google-footer ul { margin: 0; padding: 0; height: 144px; line-height: 144px; } #google-footer ul li { display: inline; } #google-footer ul li:before { color: #999; content: "\00b7"; font-weight: bold; margin: 5px; } #google-footer ul li:first-child:before { content: ''; } #google-footer .google-logo-dark { left: 0; margin-top: -16px; position: absolute; top: 50%; } /** Sitemap links. **/ .footer-inner-2 { font-size: 14px; padding-top: 42px; padding-bottom: 74px; } .footer-inner-2 .HTML h2 { color: #212121; color: rgba(0,0,0,.87); font-size: 14px; font-weight: 500; padding-left: 0; margin: 10px 0; } .footer-inner-2 .HTML ul { font-weight: normal; list-style: none; padding-left: 0; } .footer-inner-2 .HTML li { line-height: 24px; padding: 0; } .footer-inner-2 li a { color: rgba(65,132,243,.87); } /** Archive widget. **/ .BlogArchive { font-size: 13px; font-weight: normal; } .BlogArchive .widget-content { display: none; } .BlogArchive h2, .Label h2 { color: #4184F3; text-decoration: none; } .BlogArchive .hierarchy li { display: inline-block; } /* Specificity needed here to override widget CSS defaults. */ .BlogArchive #ArchiveList ul li, .BlogArchive #ArchiveList ul ul li { margin: 0; padding-left: 0; text-indent: 0; } .BlogArchive .intervalToggle { cursor: pointer; } .BlogArchive .expanded .intervalToggle .new-toggle { -ms-transform: rotate(180deg); transform: rotate(180deg); } .BlogArchive .new-toggle { float: right; padding-top: 3px; opacity: 0.87; } #ArchiveList { text-transform: uppercase; } #ArchiveList .expanded > ul:last-child { margin-bottom: 16px; } #ArchiveList .archivedate { width: 100%; } /* Months */ .BlogArchive .items { max-width: 150px; margin-left: -4px; } .BlogArchive .expanded .items { margin-bottom: 10px; overflow: hidden; } .BlogArchive .items > ul { float: left; height: 32px; } .BlogArchive .items a { padding: 0 4px; } .Label { font-size: 13px; font-weight: normal; } .sidebar-icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-right: 12px; margin-top: -1px } .Label a { margin-right: 4px; } .Label .widget-content { display: none; } .FollowByEmail { font-size: 13px; font-weight: normal; } .FollowByEmail h2 { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: 0 50%; text-indent: 30px; } .FollowByEmail .widget-content { display: none; } .searchBox input { border: 1px solid #eee; color: #212121; color: rgba(0,0,0,.87); font-size: 14px; padding: 8px 8px 8px 40px; width: 164px; font-family: Roboto, sans-serif; background: url("https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png") 8px center no-repeat; } .searchBox ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: rgba(0,0,0,.54); } .searchBox :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; opacity: 0.54; } .searchBox ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; opacity: 0.54; } .searchBox :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #757575; } .widget-item-control { margin-top: 0px; } .section { margin: 0; padding: 0; } #sidebar-top { border: 1px solid #eee; } #sidebar-top > div { margin: 16px 0; } .widget ul { line-height: 1.6; } /*main post*/ .post { margin-bottom:30px; } #main .post .title { margin: 0; } #main .post .title a { color: #212121; color: rgba(0,0,0,.87); font-weight: normal; font-size: 24px; } #main .post .title a:hover { text-decoration:none; color: #3974d6; } .message, #main .post .post-header { margin: 0; padding: 0; } #main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption { color: #444; font-weight: 500; } #main .tr-caption-container td { text-align: left; } #main .post .tr-caption { color: #757575; color: rgba(0,0,0,.54); display: block; max-width: 560px; padding-bottom: 20px; } #main .post .tr-caption-container { line-height: 24px; margin: -1px 0 0 0 !important; padding: 4px 0; text-align: left; } #main .post .post-header .published{ font-size:11px; font-weight:bold; } .post-header .publishdate { font-size: 17px; font-weight:normal; color: #757575; color: rgba(0,0,0,.54); } #main .post .post-footer{ font-size:12px; padding-bottom: 21px; } .label-footer { margin-bottom: 12px; margin-top: 12px; } .comment-img { margin-right: 16px; opacity: 0.54; vertical-align: middle; } #main .post .post-header .published { margin-bottom: 40px; margin-top: -2px; } .post .post-content { color: #212121; color: rgba(0,0,0,.87); font-size: 17px; margin: 25px 0 36px 0; line-height: 32px; } .post-body .post-content ul, .post-body .post-content ol { margin: 16px 0; padding: 0 48px; } .post-summary { display: none; } /* Another old-style caption. */ .post-content div i, .post-content div + i { font-size: 14px; font-style: normal; color: #757575; color: rgba(0,0,0,.54); display: block; line-height: 24px; margin-bottom: 16px; text-align: left; } /* Another old-style caption (with link) */ .post-content a > i { color: #4184F3 !important; } /* Old-style captions for images. */ .post-content .separator + div:not(.separator) { margin-top: -16px; } /* Capture section headers. */ .post-content br + br + b, .post-content .space + .space + b, .post-content .separator + b { display: inline-block; margin-bottom: 8px; margin-top: 24px; } .post-content li { line-height: 32px; } /* Override all post images/videos to left align. */ .post-content .separator, .post-content > div { text-align: left; } .post-content .separator > a, .post-content .separator > span { margin-left: 0 !important; } .post-content img { max-width: 100%; height: auto; width: auto; } .post-content .tr-caption-container img { margin-bottom: 12px; } .post-content iframe, .post-content embed { max-width: 100%; } .post-content .carousel-container { margin-bottom: 48px; } #main .post-content b { font-weight: 500; } /* These are the main paragraph spacing tweaks. */ #main .post-content br { content: ' '; display: block; padding: 4px; } .post-content .space { display: block; height: 8px; } .post-content iframe + .space, .post-content iframe + br { padding: 0 !important; } #main .post .jump-link { margin-bottom:10px; } .post-content img, .post-content iframe { margin: 30px 0 20px 0; } .post-content > img:first-child, .post-content > iframe:first-child { margin-top: 0; } .col-right .section { padding: 0 16px; } #aside { background:#fff; border:1px solid #eee; border-top: 0; } #aside .widget { margin:0; } #aside .widget h2, #ArchiveList .toggle + a.post-count-link { color: #212121; color: rgba(0,0,0,.87); font-weight: 400 !important; margin: 0; } #ArchiveList .toggle { float: right; } #ArchiveList .toggle .material-icons { padding-top: 4px; } #sidebar .tab { cursor: pointer; } #sidebar .tab .arrow { display: inline-block; float: right; } #sidebar .tab .icon { display: inline-block; vertical-align: top; height: 24px; width: 24px; margin-right: 13px; margin-left: -1px; margin-top: 1px; color: #757575; color: rgba(0,0,0,.54); } #sidebar .widget-content > :first-child { padding-top: 8px; } #sidebar .active .tab .arrow { -ms-transform: rotate(180deg); transform: rotate(180deg); } #sidebar .arrow { color: #757575; color: rgba(0,0,0,.54); } #sidebar .widget h2 { font-size: 14px; line-height: 24px; display: inline-block; } #sidebar .widget .BlogArchive { padding-bottom: 8px; } #sidebar .widget { border-bottom: 1px solid #eee; box-shadow: 0px 1px 0 white; margin-bottom: 0; padding: 14px 0; min-height: 20px; } #sidebar .widget:last-child { border-bottom: none; box-shadow: none; margin-bottom: 0; } #sidebar ul { margin: 0; padding: 0; } #sidebar ul li { list-style:none; padding:0; } #sidebar ul li a { line-height: 32px; } #sidebar .archive { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC"); height: 24px; line-height: 24px; padding-left: 30px; } #sidebar .labels { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC"); height: 20px; line-height: 20px; padding-left: 30px; } #sidebar .rss a { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII="); } #sidebar .subscription a { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC"); } #sidebar-bottom { background: #f5f5f5; border-top:1px solid #eee; } #sidebar-bottom .widget { border-bottom: 1px solid #e0e0e0; padding: 15px 0; text-align: center; } #sidebar-bottom > div:last-child { border-bottom: 0; } #sidebar-bottom .text { line-height: 20px; } /* Home, forward, and backward pagination. */ .blog-pager { border-top : 1px #e0e0e0 solid; padding-top: 10px; margin-top: 15px; text-align: right !important; } #blog-pager { margin-botom: 0; margin-top: -14px; padding: 16px 0 0 0; } #blog-pager a { display: inline-block; } .blog-pager i.disabled { opacity: 0.2 !important; } .blog-pager i { color: black; margin-left: 16px; opacity: 0.54; } .blog-pager i:hover, .blog-pager i:active { opacity: 0.87; } #blog-pager-older-link, #blog-pager-newer-link { float: none; } .gplus-profile { background-color: #fafafa; border: 1px solid #eee; overflow: hidden; width: 212px; } .gplus-profile-inner { margin-left: -1px; margin-top: -1px; } /* Sidebar follow buttons. */ .followgooglewrapper { padding: 12px 0 0 0; } .loading { visibility: hidden; } .detail-page .post-footer .cmt_iframe_holder { padding-top: 40px !important; } /** Desktop **/ @media (max-width: 900px) { .col-right { display: none; } .col-main { margin-right: 0; min-width: initial; } .footer-outer { display: none; } .cols-wrapper { min-width: initial; } .google-footer-outer { background-color: #f5f5f5; } } /** Tablet **/ @media (max-width: 712px) { .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer { padding: 0 40px; } } /* An extra breakpoint accommodating for long blog titles. */ @media (max-width: 600px) { .header-left { height: 100%; position: initial; top: inherit; margin-top: 0; -webkit-transform: initial; transform: initial; } .header-title { margin-top: 18px; } .header-inner { height: auto; margin-bottom: 32px; margin-top: 32px; } .header-desc { margin-top: 12px; } .header-inner .google-logo { height: 70px; margin-top: 3px; } .header-inner .google-logo img { height: 70px; } .header-title h2 { font-size: 32px; line-height: 76px; } } /** Mobile/small desktop window; also landscape. **/ @media (max-width: 480px), (max-height: 480px) { .header-outer, .cols-wrapper, .footer-outer, .google-footer-outer { padding: 0 16px; } .cols-wrapper { margin-top: 0; } .post-header .publishdate, .post .post-content { font-size: 16px; } .post .post-content { line-height: 28px; margin-bottom: 30px; } .post { margin-top: 30px; } .byline-author { display: block; font-size: 12px; line-height: 24px; margin-top: 6px; } #main .post .title a { font-weight: 500; color: #4c4c4c; color: rgba(0,0,0,.70); } #main .post .post-header { padding-bottom: 12px; } #main .post .post-header .published { margin-bottom: -8px; margin-top: 3px; } .post .read-more { display: block; margin-top: 14px; } .post .tr-caption { font-size: 12px; } #main .post .title a { font-size: 20px; line-height: 30px; } .post-content iframe { /* iframe won't keep aspect ratio when scaled down. */ max-height: 240px; } .post-content .separator img, .post-content .tr-caption-container img, .post-content iframe { margin-left: -16px; max-width: inherit; width: calc(100% + 32px); } .post-content table, .post-content td { width: 100%; } #blog-pager { margin: 0; padding: 16px 0; } /** List page tweaks. **/ .list-page .post-original { display: none; } .list-page .post-summary { display: block; } .list-page .comment-container { display: none; } .list-page #blog-pager { padding-top: 0; border: 0; margin-top: -8px; } .list-page .label-footer { display: none; } .list-page #main .post .post-footer { border-bottom: 1px solid #eee; margin: -16px 0 0 0; padding: 0 0 20px 0; } .list-page .post .share { display: none; } /** Detail page tweaks. **/ .detail-page .post-footer .cmt_iframe_holder { padding-top: 32px !important; } .detail-page .label-footer { margin-bottom: 0; } .detail-page #main .post .post-footer { padding-bottom: 0; } .detail-page #comments { display: none; } } [data-about-pullquote], [data-is-preview], [data-about-syndication] { display: none; } </style> <noscript> <style> .loading { visibility: visible }</style> </noscript> <script type='text/javascript'> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-37592578-1', 'auto', 'blogger'); ga('blogger.send', 'pageview'); </script> <link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2471378914199150966&zx=1c2c238c-e52c-4f00-81f6-e81b420ff116' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2471378914199150966&zx=1c2c238c-e52c-4f00-81f6-e81b420ff116' rel='stylesheet'/></noscript> <meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/> <meta name='google-adsense-platform-domain' content='blogspot.com'/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?display=swap&family=Roboto"></head> <body> <script type='text/javascript'> //<![CDATA[ var axel = Math.random() + ""; var a = axel * 10000000000000; document.write('<iframe src="https://2542116.fls.doubleclick.net/activityi;src=2542116;type=gblog;cat=googl0;ord=ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>'); //]]> </script> <noscript> <img alt='' height='1' src='https://ad.doubleclick.net/ddm/activity/src=2542116;type=gblog;cat=googl0;ord=1?' width='1'/> </noscript>  <div class='header-outer'> <div class='header-inner'> <div class='section' id='header'><div class='widget Header' data-version='1' id='Header1'> <div class='header-left'> <div class='header-title'> <a class='google-logo' href='https://blog.chromium.org/'> <img alt="Chromium Blog" height="50" src="//1.bp.blogspot.com/-vkF7AFJOwBk/VkQxeAGi1mI/AAAAAAAARYo/57denvsQ8zA/s1600-r/logo_chromium.png"> </a> <a href='/.'> <h2> Chromium Blog </h2> </a> </div> <div class='header-desc'> News and developments from the open source browser project </div> </div> </div></div> </div> </div>  <div class='cols-wrapper loading'> <div class='col-main-wrapper'> <div class='col-main'> <div class='section' id='main'><div class='widget Blog' data-version='1' id='Blog1'> <div class='post' data-id='3464798918513391503' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2019/08/chrome-77-beta-new-performance-metrics.html' itemprop='url' title='Chrome 77 Beta: New performance metrics, new form capabilities, capabilities in origin trials and more'> Chrome 77 Beta: New performance metrics, new form capabilities, capabilities in origin trials and more </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Friday, August 9, 2019 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on <a href="https://www.chromestatus.com/features#milestone%3D77">ChromeStatus.com</a>. Chrome 77 is beta as of August 8, 2019.<br /> <h2> <span style="font-size: x-large;"> New Performance Metrics</span></h2> <h3> Largest Contentful Paint</h3> It has not always been easy for developers to measure how quickly the main content of a web page loads and is visible to users. The usefulness of existing metrics varies. Some metrics are only measurable in a lab, while others tell nothing about content that users care about. Consider the example below, taken from a DevTools performance audit. At the time of the first contentful paint, there's no content on screen that a user can interact with. <br /> <br /> <span id="docs-internal-guid-d288df5e-7fff-dbf3-259a-595bb7fe2a83"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><span style="border: none; display: inline-block; height: 243px; overflow: hidden; width: 624px;"><img height="243" src="https://lh5.googleusercontent.com/_YIQ2Wmd0n34RdRV0NIWeexb2mfU1lWAuxOmpJHaH6I-q4S8xgQdDWHJ3D2zyC_PkqUKHH79IXAxjpQ89Q9lgLJI6DyWTD3CTbjTVYQnIRvS8MfVB24FlEObEfG72Mqcun0HNsqe" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></span><br /> <br /> Largest Contentful Paint attempts to provide more meaningful data by using the largest content element as a proxy for when the main content of the page is likely visible to users. <br /> <br /> You're probably asking questions like what does the new metric track? When is the metric reported? How do I improve it if it's slow? For answers to these and other questions, see "<a href="https://www.google.com/url?q=https://web.dev/largest-contentful-paint/&sa=D&ust=1565283116213000&usg=AFQjCNHWkzX9e0w5g3Nq4C912a3rSC0v8w">Largest Contentful Paint</a>" on <a href="https://web.dev/">web.dev</a>.<br /> <h3> First Input Timing</h3> The <a href="https://www.chromestatus.com/feature/5149663191629824">PerformanceEventTiming interface</a> provides timing information about the latency of the first discrete user interaction, specifically one of key down, mouse down, click, or the combination of pointer down and pointer up. Pointer down may be the start of scrolling, which is not tracked. This is a subset of the EventTiming API, but will be exposed in advance because it provides key metrics to help measure and optimize responsiveness.<br /> <h2> <span style="font-size: x-large;"> New Form Capabilities</span></h2> Many websites use custom form controls to either add features that aren't available in standard controls or to tailor a form's design. A drawback of custom controls is that data must be stored in hidden <code><input></code> elements.<br /> <br /> Two new features support custom form controls. The <code>formdata</code> event lets sites use JavaScript instead of hidden <code><input></code> elements to add data to a form. With this feature, site builders add a <code>formdata</code> event listener to a form element. The passed event includes a <code>FormData</code> object containing the data being submitted, which can now be modified.<br /> <br /> The <code>formdata</code> event only lets sites interact with the submission process. Form-associated custom elements let site creators build custom elements that act like built-in form controls, providing capabilities such as enabling input validation or submitting data to the server. <br /> <br /> To learn more and to see example code, read <a href="https://web.dev/more-capable-form-controls/" target="_blank">More capable form controls</a> on <a href="https://web.dev/">web.dev</a>. <br /> <h2> <span style="font-size: x-large;"> Origin Trials</span></h2> This version of Chrome introduces the origin trials listed below. Origin trials allow you to try new features and give feedback on usability, practicality, and effectiveness to the web standards community. To register for any of the origin trials currently supported in Chrome, including the ones listed below, visit the <a href="https://developers.chrome.com/origintrials/#/trials/active">Origin Trials dashboard</a>. To learn more about origin trials themselves, visit the <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md">Origin Trials Guide for Web Developers</a>.<br /> <h3> A Contact Picker for the Web</h3> The Contact Picker API is a new, on-demand picker that allows users to select entries from their contact list and share limited details of the selected entries with a website. It allows users to share only what they want, when they want, and makes it easier for users to reach and connect with their friends and family. See <a href="https://developers.google.com/web/updates/2019/08/contact-picker">A Contact Picker for the Web</a> for details.<br /> <h2> <span style="font-size: x-large;"> Other features in this release</span></h2> <h3> Enter Key Hint</h3> The <code><a href="https://www.chromestatus.com/feature/5654529808793600">enterkeyhint</a></code> content attribute<br /> is an enumerated attribute for <code><form></code> elements that specifies what action label (or icon) to present as the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key to make it more helpful for users. The attribute takes one of <code>enter</code>, <code>done</code>, <code>go</code>, <code>next</code>, <code>previous</code>, <code>search</code>, or <code>send</code>. <br /> <h3> Feature Policy Control over Document.domain</h3> The <a href="https://www.chromestatus.com/feature/5341992867332096">document-domain policy</a> governs access to document.domain. It is enabled by default, and, if disabled, attempting to set <code>document.domain</code> will throw an error.<br /> <h3> Layout Instability Monitoring</h3> Adds the <code><a href="https://www.chromestatus.com/feature/5110682739539968">LayoutShift</a></code> interface<br /> to the Performance API, allowing developers to monitor changes to a DOM element's on-screen position. <br /> <h3> Limit the "referer" Header's Length to 4kB</h3> <a href="https://www.chromestatus.com/feature/5648956820291584">Strips the <code>referer</code> header down</a> to an origin when it's size exceeds 4kB.<br /> Servers will often behave in unexpected ways when presented with an overly-long <code>referer</code> header. This is unfortunate, because <code>referer</code> is one header whose length attackers generally retain control over when generating <code>no-cors</code> requests.<br /> <h3> Limit registerProtocolHandler() url Argument to http/https </h3> <a href="https://www.chromestatus.com/feature/5066079862784000">The <code>registerProtocolHandler()</code></a> now only accepts URLs with http or https schemas. Because the intent of the API is to allow an endpoint to handle something like an SMS message, for example, it doesn't make much sense for handlers to be data URLs, blob URLs, and so on.<br /> <h3> New Features for Intl.NumberFormat</h3> This change <a href="https://v8.dev/features/intl-numberformat">improves <code>Intl.NumberFormat</code></a> by adding support for measurement units, currency and sign display policies, and scientific and compact notation. <br /> <h3> Overscroll Behavior Logical Longhands</h3> Adds <a href="https://www.chromestatus.com/feature/5729982653399040">CSS <code>flow-relative</code> properties</a> for controlling overscroll behavior through logical dimensions. <code>flow-relative</code> properties are those that are interpreted relative to the flow of content. The new properties are <code>overscroll-behavior-inline</code> and <code>overscroll-behavior-block</code>.<br /> <h3> PerformanceObserverInit Buffered Flag</h3> <a href="https://www.chromestatus.com/feature/5118272741572608">Adds a <code>buffered</code> flag to <code>observer.observe()</code></a> so that <code>PerformanceObserver</code> can receive entries created before the call is executed.<br /> <h3> WebRTC</h3> <b>RTCPeerConnection.onicecandidateerror</b><br /> Adds the <code><a href="https://www.chromestatus.com/feature/6602864602382336">incecandidateerror</a></code> event which provides detailed information about WebRTC ICE candidate gathering failures, including the ones defined by <a href="https://tools.ietf.org/html/rfc5389">STUN (RFC5389)</a> and <a href="https://tools.ietf.org/html/rfc5766">TURN (RFC5766)</a>.<br /> <br /> Diagnosing ICE connectivity issues without access to detailed gathering failures can be a challenge. Support for ICE candidate errors is targeted towards better connectivity troubleshooting and network diagnostics.<br /> <br /> <b>RTCPeerConnection.restartIce()</b><br /> Adds <a href="https://www.chromestatus.com/feature/5723155500892160">a method for triggering an ICE restart</a> which causes a WebRTC connection to try to reconnect. This feature is already available in Chrome by passing the <code>iceRestart</code> argument to <code>createOffer()</code>. <code>restartIce()</code> is a version of this method that works regardless of <code>signalingState</code>.<br /> <h3> Service Workers</h3> <b>Preserve Request Priorities through Service Worker</b><br /> <a href="https://www.chromestatus.com/feature/5642182885113856">Preserves a request's original priority</a> when it passes through a service worker. Previously, all requests going through a service worker would get "High" priority. This means render-blocking style sheets would have their priority clamped, while less important resources would get boosted. <br /> <br /> <b>Service Workers Support Basic HTTP Authentication</b><br /> <a href="https://www.chromestatus.com/feature/5682567464353792">Displays HTTP authentication dialog boxes</a> even if the request was from a service worker. This shows the native login dialog shown when an HTTP 401 response is received.<br /> <h3> Stop Action for Media Sessions</h3> Adds <code><a href="https://www.chromestatus.com/feature/6140125320839168">stop</a></code> as a <code>MediaSessionAction </code>for calls to <code>MediaSession.setActionHandler()</code>. An action is an event tied specifically to a common media function such as pause or play. The <code>stop</code> action handler is called when the site should stop the playback and clear the state if appropriate. <a href="https://googlechrome.github.io/samples/media-session/index.html">Samples are available</a> on GitHub.<br /> <h3> Web Payments: Throw a TypeError on Invalid "basic-card" Data</h3> The <code>PaymentRequest</code> constructor <a href="https://www.chromestatus.com/feature/4793925806063616">now throws a <code>TypeError</code></a> when invalid <code>supportedNetworks</code> or <code>supportedTypes</code> are specified for basic card payment.<br /> <br /> See Deprecations and Removals for an additional Web Payments update item. For more about recent web payments updates, see <a href="https://www.google.com/url?q=https://spectrum.chat/web-payments/chrome-updates/w3c-payment-api-changes-in-chrome-77~e40090a7-583d-4f3f-8495-af81c206236d&sa=D&ust=1565030561491000&usg=AFQjCNFlbGvYXPb_T_weqRrz1AxTyC6fTw">W3C Payment API changes in Chrome 77</a>. <br /> <h2> <span style="font-size: x-large;"> Interoperability Improvements</span></h2> <h3> Support Step Timing Functions jump-start|end|both|none</h3> Adds support for <a href="https://www.chromestatus.com/feature/5730327525851136">a richer set of step animations</a>. Firefox already supports <code>jump-*</code> step timing functions. The step timing functions <code>jump-both</code>, <code>jump-none</code>, <code>jump-start</code> and <code>jump-end</code> were introduced to the spec for easing functions in 2018. Two of these, <code>jump-start</code> and <code>jump-end</code> are aliases for <code>start</code> and <code>end</code>. The remaining two provide increased flexibility for step transitions by enabling step functions in which both or neither endpoint has a discontinuous step. Previously, one and only one of the two endpoints could have a step discontinuity. Adding support in Chromium improves cross-browser interoperability. <br /> <h3> white-space: break-spaces</h3> Adds the <code><a href="https://www.chromestatus.com/feature/4842781306519552">break-spaces</a></code> value for the <code>white-space</code> property which specifies that any sequence of preserved white space that would otherwise overflow a line and hang (as per the CSS Text Module spec's Trimming and Positioning rules) must be broken.<br /> <br /> With <code>white-space: pre-wrap</code> it's possible to wrap and preserve white space sequences in the middle of a text line. However, if there is a sequence at the end of the line, it either collapses or hangs, maybe overflowing its box area. The new value <code>overflow-wrap: break-spaces</code> allows authors to wrap and preserve these white space sequences. This can be also useful for <code>textarea</code> or <code>contenteditable</code> elements, so that white space sequences added by spacebar press events are handled properly and generate line breaks if needed. Finally, there is an ongoing effort to enhance interoperability of the line breaking CSS properties (<code>white-space</code>, <code>word-break</code> and <code>overflow-wrap</code>) and this new value was defined precisely to achieve that.<br /> <h2> <span style="font-size: x-large;"> Deprecations, and Removals</span></h2> <h3> Card Issuer Networks as Payment Method Names</h3> Remotes <a href="https://www.chromestatus.com/feature/5725727580225536">support for calling <code>PaymentRequest</code></a> with card issuer networks (e.g., "visa", "amex", "mastercard") in the <code>supportedMethods</code> field.<br /> <h3> Deprecate Web MIDI Use on Insecure Origins </h3> Web MIDI use is classified into two groups: non-privilege use, and privilege use with sysex permission. Until Chrome 77, only the latter use prompts users for permission. To reduce security concerns, permissions will always be requested regardless of sysex use. This means that using Web MIDI on insecure origins <a href="https://www.chromestatus.com/feature/5138066234671104">will no longer be allowed</a>.<br /> <h3> Deprecate WebVR 1.1 API</h3> This API is now <a href="https://www.chromestatus.com/feature/4532810371039232">deprecated in Chrome</a>, <a href="https://www.chromestatus.com/feature/5680169905815552">being replaced by</a> the WebXR Device API, which is expected to ship in Chrome 78. The WebVR Origin Trial ended on July 24, 2018.<br /> <br /> WebVR was never enabled by default in Chrome, and was never ratified as a web standard. The <a href="https://immersive-web.github.io/webxr/">WebXR Device API</a> is the replacement API for WebVR. Removing WebVR from Chrome allows us to focus on the future of WebXR and remove the maintenance burden of WebVR, as well as reaffirm that Chrome is committed to WebXR as the future for building immersive web-based experiences. Removal is expected in Chrome 79. <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on <a href="https://www.chromestatus.com/features#milestone%3D77">ChromeStatus.com</a>. Chrome 77 is beta as of August 8, 2019.<br /> <h2> <span style="font-size: x-large;"> New Performance Metrics</span></h2> <h3> Largest Contentful Paint</h3> It has not always been easy for developers to measure how quickly the main content of a web page loads and is visible to users. The usefulness of existing metrics varies. Some metrics are only measurable in a lab, while others tell nothing about content that users care about. Consider the example below, taken from a DevTools performance audit. At the time of the first contentful paint, there's no content on screen that a user can interact with. <br /> <br /> <span id="docs-internal-guid-d288df5e-7fff-dbf3-259a-595bb7fe2a83"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><span style="border: none; display: inline-block; height: 243px; overflow: hidden; width: 624px;"><img height="243" src="https://lh5.googleusercontent.com/_YIQ2Wmd0n34RdRV0NIWeexb2mfU1lWAuxOmpJHaH6I-q4S8xgQdDWHJ3D2zyC_PkqUKHH79IXAxjpQ89Q9lgLJI6DyWTD3CTbjTVYQnIRvS8MfVB24FlEObEfG72Mqcun0HNsqe" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></span><br /> <br /> Largest Contentful Paint attempts to provide more meaningful data by using the largest content element as a proxy for when the main content of the page is likely visible to users. <br /> <br /> You're probably asking questions like what does the new metric track? When is the metric reported? How do I improve it if it's slow? For answers to these and other questions, see "<a href="https://www.google.com/url?q=https://web.dev/largest-contentful-paint/&sa=D&ust=1565283116213000&usg=AFQjCNHWkzX9e0w5g3Nq4C912a3rSC0v8w">Largest Contentful Paint</a>" on <a href="https://web.dev/">web.dev</a>.<br /> <h3> First Input Timing</h3> The <a href="https://www.chromestatus.com/feature/5149663191629824">PerformanceEventTiming interface</a> provides timing information about the latency of the first discrete user interaction, specifically one of key down, mouse down, click, or the combination of pointer down and pointer up. Pointer down may be the start of scrolling, which is not tracked. This is a subset of the EventTiming API, but will be exposed in advance because it provides key metrics to help measure and optimize responsiveness.<br /> <h2> <span style="font-size: x-large;"> New Form Capabilities</span></h2> Many websites use custom form controls to either add features that aren't available in standard controls or to tailor a form's design. A drawback of custom controls is that data must be stored in hidden <code><input></code> elements.<br /> <br /> Two new features support custom form controls. The <code>formdata</code> event lets sites use JavaScript instead of hidden <code><input></code> elements to add data to a form. With this feature, site builders add a <code>formdata</code> event listener to a form element. The passed event includes a <code>FormData</code> object containing the data being submitted, which can now be modified.<br /> <br /> The <code>formdata</code> event only lets sites interact with the submission process. Form-associated custom elements let site creators build custom elements that act like built-in form controls, providing capabilities such as enabling input validation or submitting data to the server. <br /> <br /> To learn more and to see example code, read <a href="https://web.dev/more-capable-form-controls/" target="_blank">More capable form controls</a> on <a href="https://web.dev/">web.dev</a>. <br /> <h2> <span style="font-size: x-large;"> Origin Trials</span></h2> This version of Chrome introduces the origin trials listed below. Origin trials allow you to try new features and give feedback on usability, practicality, and effectiveness to the web standards community. To register for any of the origin trials currently supported in Chrome, including the ones listed below, visit the <a href="https://developers.chrome.com/origintrials/#/trials/active">Origin Trials dashboard</a>. To learn more about origin trials themselves, visit the <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md">Origin Trials Guide for Web Developers</a>.<br /> <h3> A Contact Picker for the Web</h3> The Contact Picker API is a new, on-demand picker that allows users to select entries from their contact list and share limited details of the selected entries with a website. It allows users to share only what they want, when they want, and makes it easier for users to reach and connect with their friends and family. See <a href="https://developers.google.com/web/updates/2019/08/contact-picker">A Contact Picker for the Web</a> for details.<br /> <h2> <span style="font-size: x-large;"> Other features in this release</span></h2> <h3> Enter Key Hint</h3> The <code><a href="https://www.chromestatus.com/feature/5654529808793600">enterkeyhint</a></code> content attribute<br /> is an enumerated attribute for <code><form></code> elements that specifies what action label (or icon) to present as the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key to make it more helpful for users. The attribute takes one of <code>enter</code>, <code>done</code>, <code>go</code>, <code>next</code>, <code>previous</code>, <code>search</code>, or <code>send</code>. <br /> <h3> Feature Policy Control over Document.domain</h3> The <a href="https://www.chromestatus.com/feature/5341992867332096">document-domain policy</a> governs access to document.domain. It is enabled by default, and, if disabled, attempting to set <code>document.domain</code> will throw an error.<br /> <h3> Layout Instability Monitoring</h3> Adds the <code><a href="https://www.chromestatus.com/feature/5110682739539968">LayoutShift</a></code> interface<br /> to the Performance API, allowing developers to monitor changes to a DOM element's on-screen position. <br /> <h3> Limit the "referer" Header's Length to 4kB</h3> <a href="https://www.chromestatus.com/feature/5648956820291584">Strips the <code>referer</code> header down</a> to an origin when it's size exceeds 4kB.<br /> Servers will often behave in unexpected ways when presented with an overly-long <code>referer</code> header. This is unfortunate, because <code>referer</code> is one header whose length attackers generally retain control over when generating <code>no-cors</code> requests.<br /> <h3> Limit registerProtocolHandler() url Argument to http/https </h3> <a href="https://www.chromestatus.com/feature/5066079862784000">The <code>registerProtocolHandler()</code></a> now only accepts URLs with http or https schemas. Because the intent of the API is to allow an endpoint to handle something like an SMS message, for example, it doesn't make much sense for handlers to be data URLs, blob URLs, and so on.<br /> <h3> New Features for Intl.NumberFormat</h3> This change <a href="https://v8.dev/features/intl-numberformat">improves <code>Intl.NumberFormat</code></a> by adding support for measurement units, currency and sign display policies, and scientific and compact notation. <br /> <h3> Overscroll Behavior Logical Longhands</h3> Adds <a href="https://www.chromestatus.com/feature/5729982653399040">CSS <code>flow-relative</code> properties</a> for controlling overscroll behavior through logical dimensions. <code>flow-relative</code> properties are those that are interpreted relative to the flow of content. The new properties are <code>overscroll-behavior-inline</code> and <code>overscroll-behavior-block</code>.<br /> <h3> PerformanceObserverInit Buffered Flag</h3> <a href="https://www.chromestatus.com/feature/5118272741572608">Adds a <code>buffered</code> flag to <code>observer.observe()</code></a> so that <code>PerformanceObserver</code> can receive entries created before the call is executed.<br /> <h3> WebRTC</h3> <b>RTCPeerConnection.onicecandidateerror</b><br /> Adds the <code><a href="https://www.chromestatus.com/feature/6602864602382336">incecandidateerror</a></code> event which provides detailed information about WebRTC ICE candidate gathering failures, including the ones defined by <a href="https://tools.ietf.org/html/rfc5389">STUN (RFC5389)</a> and <a href="https://tools.ietf.org/html/rfc5766">TURN (RFC5766)</a>.<br /> <br /> Diagnosing ICE connectivity issues without access to detailed gathering failures can be a challenge. Support for ICE candidate errors is targeted towards better connectivity troubleshooting and network diagnostics.<br /> <br /> <b>RTCPeerConnection.restartIce()</b><br /> Adds <a href="https://www.chromestatus.com/feature/5723155500892160">a method for triggering an ICE restart</a> which causes a WebRTC connection to try to reconnect. This feature is already available in Chrome by passing the <code>iceRestart</code> argument to <code>createOffer()</code>. <code>restartIce()</code> is a version of this method that works regardless of <code>signalingState</code>.<br /> <h3> Service Workers</h3> <b>Preserve Request Priorities through Service Worker</b><br /> <a href="https://www.chromestatus.com/feature/5642182885113856">Preserves a request's original priority</a> when it passes through a service worker. Previously, all requests going through a service worker would get "High" priority. This means render-blocking style sheets would have their priority clamped, while less important resources would get boosted. <br /> <br /> <b>Service Workers Support Basic HTTP Authentication</b><br /> <a href="https://www.chromestatus.com/feature/5682567464353792">Displays HTTP authentication dialog boxes</a> even if the request was from a service worker. This shows the native login dialog shown when an HTTP 401 response is received.<br /> <h3> Stop Action for Media Sessions</h3> Adds <code><a href="https://www.chromestatus.com/feature/6140125320839168">stop</a></code> as a <code>MediaSessionAction </code>for calls to <code>MediaSession.setActionHandler()</code>. An action is an event tied specifically to a common media function such as pause or play. The <code>stop</code> action handler is called when the site should stop the playback and clear the state if appropriate. <a href="https://googlechrome.github.io/samples/media-session/index.html">Samples are available</a> on GitHub.<br /> <h3> Web Payments: Throw a TypeError on Invalid "basic-card" Data</h3> The <code>PaymentRequest</code> constructor <a href="https://www.chromestatus.com/feature/4793925806063616">now throws a <code>TypeError</code></a> when invalid <code>supportedNetworks</code> or <code>supportedTypes</code> are specified for basic card payment.<br /> <br /> See Deprecations and Removals for an additional Web Payments update item. For more about recent web payments updates, see <a href="https://www.google.com/url?q=https://spectrum.chat/web-payments/chrome-updates/w3c-payment-api-changes-in-chrome-77~e40090a7-583d-4f3f-8495-af81c206236d&sa=D&ust=1565030561491000&usg=AFQjCNFlbGvYXPb_T_weqRrz1AxTyC6fTw">W3C Payment API changes in Chrome 77</a>. <br /> <h2> <span style="font-size: x-large;"> Interoperability Improvements</span></h2> <h3> Support Step Timing Functions jump-start|end|both|none</h3> Adds support for <a href="https://www.chromestatus.com/feature/5730327525851136">a richer set of step animations</a>. Firefox already supports <code>jump-*</code> step timing functions. The step timing functions <code>jump-both</code>, <code>jump-none</code>, <code>jump-start</code> and <code>jump-end</code> were introduced to the spec for easing functions in 2018. Two of these, <code>jump-start</code> and <code>jump-end</code> are aliases for <code>start</code> and <code>end</code>. The remaining two provide increased flexibility for step transitions by enabling step functions in which both or neither endpoint has a discontinuous step. Previously, one and only one of the two endpoints could have a step discontinuity. Adding support in Chromium improves cross-browser interoperability. <br /> <h3> white-space: break-spaces</h3> Adds the <code><a href="https://www.chromestatus.com/feature/4842781306519552">break-spaces</a></code> value for the <code>white-space</code> property which specifies that any sequence of preserved white space that would otherwise overflow a line and hang (as per the CSS Text Module spec's Trimming and Positioning rules) must be broken.<br /> <br /> With <code>white-space: pre-wrap</code> it's possible to wrap and preserve white space sequences in the middle of a text line. However, if there is a sequence at the end of the line, it either collapses or hangs, maybe overflowing its box area. The new value <code>overflow-wrap: break-spaces</code> allows authors to wrap and preserve these white space sequences. This can be also useful for <code>textarea</code> or <code>contenteditable</code> elements, so that white space sequences added by spacebar press events are handled properly and generate line breaks if needed. Finally, there is an ongoing effort to enhance interoperability of the line breaking CSS properties (<code>white-space</code>, <code>word-break</code> and <code>overflow-wrap</code>) and this new value was defined precisely to achieve that.<br /> <h2> <span style="font-size: x-large;"> Deprecations, and Removals</span></h2> <h3> Card Issuer Networks as Payment Method Names</h3> Remotes <a href="https://www.chromestatus.com/feature/5725727580225536">support for calling <code>PaymentRequest</code></a> with card issuer networks (e.g., "visa", "amex", "mastercard") in the <code>supportedMethods</code> field.<br /> <h3> Deprecate Web MIDI Use on Insecure Origins </h3> Web MIDI use is classified into two groups: non-privilege use, and privilege use with sysex permission. Until Chrome 77, only the latter use prompts users for permission. To reduce security concerns, permissions will always be requested regardless of sysex use. This means that using Web MIDI on insecure origins <a href="https://www.chromestatus.com/feature/5138066234671104">will no longer be allowed</a>.<br /> <h3> Deprecate WebVR 1.1 API</h3> This API is now <a href="https://www.chromestatus.com/feature/4532810371039232">deprecated in Chrome</a>, <a href="https://www.chromestatus.com/feature/5680169905815552">being replaced by</a> the WebXR Device API, which is expected to ship in Chrome 78. The WebVR Origin Trial ended on July 24, 2018.<br /> <br /> WebVR was never enabled by default in Chrome, and was never ratified as a web standard. The <a href="https://immersive-web.github.io/webxr/">WebXR Device API</a> is the replacement API for WebVR. Removing WebVR from Chrome allows us to focus on the future of WebXR and remove the maintenance burden of WebVR, as well as reaffirm that Chrome is committed to WebXR as the future for building immersive web-based experiences. Removal is expected in Chrome 79. <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:Chrome 77 Beta: New performance metrics, new form capabilities, capabilities in origin trials and more&url=https://blog.chromium.org/2019/08/chrome-77-beta-new-performance-metrics.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2019/08/chrome-77-beta-new-performance-metrics.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2019/08/chrome-77-beta-new-performance-metrics.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/beta' rel='tag'> beta </a> , <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/origin%20trials' rel='tag'> origin trials </a> , <a class='label' href='https://blog.chromium.org/search/label/performance' rel='tag'> performance </a> </span> </div> </div> </div> <div class='post' data-id='4860392654067948402' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html' itemprop='url' title='Chrome 76 Beta: dark mode, payments, new PWA features and more'> Chrome 76 Beta: dark mode, payments, new PWA features and more </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Thursday, June 13, 2019 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Find more information about the features listed here through the provided links or from the list on <a href="https://www.chromestatus.com/features#milestone%3D76">ChromeStatus.com</a>. Chrome 76 is beta as of June 13, 2019.<br /> <h2> <span style="font-size: x-large;">Dark mode</span></h2> Many operating systems now support inverted color schemes with a system setting referred to as ‘dark theme' or ‘dark mode', depending on the system.<br /> <span style="border: none; clear: right; display: inline-block; float: right; height: 372px; margin-bottom: 1em; margin-left: 1em; overflow: hidden; width: 332px;"><img height="372" src="https://lh3.googleusercontent.com/mN1ug2uAYCeg1zXpCNsgkPIVb5B1bWE6yGmjAH5xpZSqVhfOVAbuOGA76DolGRYWfe337pE2FSZg-w5v5Qh1_jo5nttGHI0fc7SWGZvsiBEQf_FvASwUEkCWzEPDIQplq81IqDTK" style="margin-left: 0px; margin-top: 0px;" width="332" /></span><span id="docs-internal-guid-573a8bd1-7fff-d650-7097-72c014ab8272"></span><br /> <br /> The <code>prefers-color-scheme</code> media query allows a website or web app to adopt the preferred display mode of the user. Use the query in your CSS code like so:<br /> <br /> <br /> <pre>@media (prefers-color-scheme: dark) { body { color: white; background-color: black; } }</pre> <br /> <br /> What is left out of this is the explanation? For that, read the article titled <a href="https://web.dev/prefers-color-scheme/">Hello Darkness, My Old Friend</a>.<br /> <h2> <span style="font-size: x-large;">Payments API</span></h2> Over the last few versions of Chrome we've rolled out a number of improvements to the payments APIs. These APIs provide a way to interact with proprietary payment systems without needing to build your own user interactions. Changes in Chrome 75 included replacing <code>hasEnrolledInstrument()</code> with <code>canMakePayment()</code> and removal of <code>languageCode</code> from the billing address. With the <code>detailsPromise</code> option Chrome 75 gives <code>PaymentRequest.show()</code> a means of performing a quick server call before showing payment details to the buyer.<br /> <br /> Chrome 76 brings three changes to the payment realm. Now implemented are features that allow a merchant website or web app to respond when a user changes payment instruments. Additionally, the <code>PaymentRequestEvent</code> has a new method called <code>changePaymentMethod()</code> and the <code>PaymentRequest</code> object now supports an event handler called <code>paymentmethodchange</code>. You can use both to notify a merchant when the user changes payment instruments. The former returns a promise that resolves with a new <code>PaymentRequest</code> instance. <br /> <br /> Additionally, Chrome now makes it easier to use the payments APIs for self-signed certificates on the local development environment. To do this, launch Chrome from a command line with the <code>—ignore-certificate-errors</code> flag. <br /> <br /> For detailed information about these features, read <a href="https://web.dev/web-payments-updates/">Web Payments Updates</a>. <br /> <h2> <span style="font-size: x-large;">Improvements for Progressive Web Apps</span></h2> <h3> Install Progressive Web Apps on the desktop with ease</h3> On desktop, there is typically no indication to a user that a Progressive Web App is installable, and if it is, the install flow is hidden within the three dot menu. <br /> <br /> In Chrome 76, we're making it easier for users to install Progressive Web Apps on the desktop by adding an <a href="https://developers.google.com/web/updates/2019/06/pwa-install-addressbar">install button to the omnibox</a>.<br /> <br /> <span style="border: none; clear: right; display: inline-block; float: right; height: 279px; margin-bottom: 1em; margin-left: 1em; overflow: hidden; width: 446px;"><img height="279" src="https://lh6.googleusercontent.com/98SHn5p9ylaefvICBSAxRhDmvMujdOylOh43ng-KoSdSWc4CUjA2gxs6POBUiuj4xjMyJqVYPCPkgQYMCZE1-G0ARFRjgnMu17FKPAPYa6phyMzTa_zhe6bWgRN7lLtBhQMzH7iu" style="margin-left: 0px; margin-top: 0px;" width="446" /></span><span id="docs-internal-guid-20b3c859-7fff-7bcd-093e-de56f88dd607"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span><br /> If a site meets the Progressive Web App <a href="https://developers.google.com/web/fundamentals/app-install-banners/#criteria">installability criteria</a>, Chrome shows an install icon in the omnibox. There is no extra work required from developers. Clicking the button prompts the user to install the PWA.<br /> <h3> Control the Add to Home Screen mini-infobar</h3> In Chrome 76, we're giving you control over the add to home screen mini-infobar. <br /> <br /> <img src="insert_image_url_here" /><br /> <span id="docs-internal-guid-76686c5f-7fff-2269-e5a2-1f55f41e04d0"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><span style="border: none; display: inline-block; height: 87px; overflow: hidden; width: 328px;"><img height="87" src="https://lh6.googleusercontent.com/1e06kr9yTL7Shc3jCJJrSWRbnqvaAGbPaJjxiJl3kbIv2BDUPG0gXPcv6AJzVrFqpXK8cg4ZwiWQI6OUXm5RvbXNRkKHkcjQTqkKJOxWNe6lB0NwxzdMGPpCbfABadlR_5wKlOIu" style="margin-left: 0px; margin-top: 0px;" width="328" /></span></span></span><br /> <br /> Chrome shows the mini-infobar the first time a user visits a site that meets the <a href="https://developers.google.com/web/fundamentals/app-install-banners/#criteria">Progressive Web App installability criteria</a>. Developers want to prevent the mini-infobar from appearing, and provide their own install promotion instead.<br /> <br /> To do this, listen for the <code>beforeinstallprompt</code> event, and call <code><a href="https://developers.google.com/web/updates/2019/05/mini-infobar-update">preventDefault()</a></code><br /> on it. Then, update your UI to notify the user by adding an install button or other element. Depending on your app, there are several different patterns you can use to <a href="https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile">promote installation of your PWA</a>. <br /> <br /> The add to home screen mini-infobar is still a temporary measure. We are experimenting with new UI patterns for giving Progressive Web App users the ability to install, and do this in a way that reduces clutter in the browsing experience.<br /> <h3> Updating WebAPKs more frequently</h3> When a PWA is installed on Android, Chrome automatically requests and installs a <a href="https://developers.google.com/web/fundamentals/integration/webapks">WebAPK</a>. Chrome periodically checks to see if the manifest has changed, and if a new WebAPK is required. Starting in Chrome 76, <a href="https://developers.google.com/web/updates/2019/06/webapk-update-frequency">Chrome will check the manifest more frequently</a>: checking every day, instead of every three days. If any of the key properties have changed, Chrome will request and install a new WebAPK.<br /> <h2> <span style="font-size: x-large;">Other features in this release</span></h2> <h3> Animation.updatePlaybackRate</h3> <a href="https://www.chromestatus.com/feature/6276633918963712">Adds <code>Animation.updatePlaybackRate()</code></a>, which lets you seamlessly transition the playback rate of an animation such that there is no visible jump in the animation. Current time is preserved at the instance the new playback rate takes effect.<br /> <h3> Async clipboard: read and write images</h3> Implements <a href="https://www.chromestatus.com/feature/5074658793619456">programmatic copying and pasting of images</a> for the Async Clipboard API. This change also updates <code>navigator.clipboard.read()</code> and <code>navigator.clipboard.write()</code> to comply with the specification. Programmatic copying and pasting of images is Chromium's top starred bug.<br /> <h3> Escape key is not a user activation</h3> The escape key is <a href="https://www.chromestatus.com/feature/5302245493047296">no longer treated as a user activation</a>. Browsers prevent calls to abusable APIs (like popup, fullscreen, vibrate, etc.) unless the user activates the page through direct interactions. Not all interactions trigger user activation. For example, clicking on a link or typing in a textbox does, but swiping fingers on a screen or hovering with the mouse cursor does not. Since users never intend to interact with the page through the escape key, it should not trigger user activation.<br /> <h3> Fetch Metadata</h3> Introduces a <a href="https://www.chromestatus.com/feature/5155867204780032">new HTTP request header</a> that sends additional metadata about a request's provenance (is it cross-site, is it triggered from <code><img></code>, etc.) to the server to allow it to make security decisions which might mitigate some kinds of attacks based on timing the server's response (<a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Cross-site_scripting&sa=D&ust=1559835672088000&usg=AFQjCNHxYTsK7FbUbzSALEynoJ-2xUeg7g">XSS leaks</a> and others).<br /> <br /> For example, it is unlikely that a bank's "Transfer all money" endpoint would be referenced from an <code><img></code> tag, and likewise unlikely that evil.com is going to be making any legitimate requests whatsoever. Ideally, the server could reject these requests a priori rather than deliver them to the application backend.<br /> <h3> form.requestSubmit()</h3> <a href="https://www.chromestatus.com/feature/6097749495775232">Adds the <code>form.requestSubmit()</code> function</a>, which requests form submission. It includes interactive constraint validation, dispatches a <code>submit</code> event, and takes a reference to the submitter button.<br /> <h3> ImageCapture support for focusDistance constraint</h3> The Image Capture API provides a means to set the focusMode to manual which is not useful if you cannot set the focus distance. This change <a href="https://www.chromestatus.com/feature/5181454237564928">provides an interface</a> for getting focus range values and setting focus distance value.<br /> <h3> Implement Animation.pending</h3> Adds <a href="https://www.chromestatus.com/feature/4843845109940224">the pending attribute</a> to the Web Animations API. A pending animation is one that is waiting on an asynchronous operation that affects the play state. Adding support for this attribute does not affect the rendering or timing of animations, but simply exposes the signal. <br /> <h3> IndexedDB transaction explicit commit API call</h3> Adds <a href="https://www.chromestatus.com/feature/5375472036741120">a <code>commit()</code> function to <code>IDBTransaction</code></a> objects, which explicitly marks a transaction as not accepting further requests. Currently, IndexedDB only commits a transaction after all associated requests have had their completion event handlers executed, and no new requests have been queued by the event handlers. Developers can use the explicit <code>commit()</code> function to shave a few event loop cycles off of the latency of their transactions.<br /> <br /> The primary benefit of explicit commit is that it increases the throughput of read and write requests made on an object store. This is a clear performance benefit in terms of the rate at which operations can be processed. Additionally, the increase in speed is advantageous because it adds stability to IndexedDB by reducing the probability that a disruptive event occurs within the lifetime of a transaction.<br /> <h3> JavaScript</h3> <strong>DateTimeFormat dateStyle and timeStyle </strong><br /> Adds <code><a href="https://www.chromestatus.com/feature/5091631933947904">dateStyle</a></code> and <code>timeStyle</code> options to functions on <code>Intl.DateTimeFormat</code>, specifically <code>formatToParts()</code> and <code>resolveOptions()</code>. These options provide a compact way to request the appropriate, locale-specific date and time of given length styles.<br /> <br /> <strong>Locale sensitive BigInt.prototype.toLocaleString and allow Intl.NumberFormat format/formatToParts to take BigInt.</strong><br /> <a href="https://www.chromestatus.com/feature/5742274625404928">Changes <code>BigInt.prototype.toLocaleString()</code></a> to locale-sensitive number formatting and changes <code>Intl.NumberFormat.prototype.format()</code> and <code>formatToParts()</code> to accept <code>BigInt</code> as input.<br /> <h3> Media capabilities in workers</h3> <a href="https://www.chromestatus.com/feature/5730672977117184">Enables the Media Capabilities API in all types of workers</a> to help website and web apps pick the best media to stream from a worker. The information can then be used to create the <code>MediaStream</code> from a worker.<br /> <h3> Promise.allSettled</h3> <a href="https://www.chromestatus.com/feature/5547381053456384">Adds Promise.allSettled()</a>, which returns a promise that is fulfilled with an array of promise state snapshots, but only after all the original promises have settled, in other words after it has either resolved or rejected.<br /> <h3> Simpler reading methods for Blob interface</h3> Adds <a href="https://www.chromestatus.com/feature/6206980857266176">three new methods to the Blob interface</a> to perform read operations: <code>text()</code>, <code>arrayBuffer()</code>, and <code>stream()</code>.<br /> <h3> WebRTC</h3> <strong>RTCSctpTransport</strong><br /> <a href="https://www.chromestatus.com/feature/5847754483957760">Exposes information about the SCTP transport</a> that is used to carry WebRTC data channels such as <code>max-message-size</code> and <code>max</code> channels.<br /> <br /> <strong>RTCRtpSender.setStreams</strong><br /> Allows <a href="https://www.chromestatus.com/feature/6044840062091264">changing the association between</a> the track associated with an <code>RTCRtpSender</code> and streams. Stream association causes tracks in the same stream to be synchronized. This is useful, for example, if during a call a user switches from a front-facing camera to a back-facing camera and the application uses <code>RTCRtpSender.replaceTrack()</code>. On the receiving end the new track must be associated with the existing stream and synchronized with its auto track.<br /> <br /> <strong>RTCRtpTransceiver.setCodecPreferences()</strong><br /> Adds the <code><a href="https://www.chromestatus.com/feature/5242890959716352">setCodecPreferences()</a></code> method, which overrides the default codec preferences used by the user agent. This allows applications to disable the negotiation of specific codecs. It also allows an application to cause a remote peer to prefer the codec that appears first in the list for sending.<br /> <h3> white-space: break-spaces</h3> The <code><a href="https://www.chromestatus.com/feature/4842781306519552">white-space:break-spaces</a></code> value allows authors to specify that any sequence of preserved white space that would otherwise overflow a line and hang (as per the CSS Text Module specification's <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">Trimming and Positioning rules</a>) must be broken.<br /> <h2> <span style="font-size: x-large;">Removals</span></h2> <h3> Remove feature policy: lazyload</h3> The <a href="https://www.chromestatus.com/feature/5641405942726656">lazyload feature policy</a> was intended to allow developers to selectively control the lazyload attribute on the <code><iframe></code> and <code><img></code> tags to provide more control over loading delay for embedded contents and images on a per origin basis. <br /> <br /> The policy is removed in favor of a newer feature policy for loading, namely <code>loading-frame-default-eager</code> which is more aligned with how the <code>loading</code> attribute will be used. The removal applies to both the Feature-Policy header and the <code><iframe> allow</code> attribute.<br /> <h3> Remove outputs from MediaStreamAudioDestinationNode</h3> According to the specification, the <code>MediaStreamAudioDestinationNode</code> in the Web Audio API should have no outputs. Chrome's implementation has a single output which <a href="https://www.chromestatus.com/feature/5702493226926080">has been removed</a>.<br /> <h3> Remove insecure usage of DeviceMotionEvent</h3> Chromium has been showing deprecation warnings since 2015 whenever the API is used in a non-secure browsing context. Chrome <a href="https://www.chromestatus.com/feature/5688035094036480">now restricts the API</a> to secure browsing contexts. This change brings Chromium's implementation in line with the privacy and security recommendations in the specification, and is aligned with the effort to deprecate powerful features on insecure origins.<br /> <h3> Remove insecure usage of DeviceOrientationEvent</h3> <div> Chromium has been showing deprecation warnings since 2015 whenever the API is used in a non-secure browsing context. Chrome <a href="https://www.chromestatus.com/features/5468407470227456">now restricts the API</a> to secure browsing contexts. This change brings Chromium’s implementation in line with the privacy and security recommendations in the specification, and is aligned with the effort to deprecate powerful features on insecure origins.</div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Find more information about the features listed here through the provided links or from the list on <a href="https://www.chromestatus.com/features#milestone%3D76">ChromeStatus.com</a>. Chrome 76 is beta as of June 13, 2019.<br /> <h2> <span style="font-size: x-large;">Dark mode</span></h2> Many operating systems now support inverted color schemes with a system setting referred to as ‘dark theme' or ‘dark mode', depending on the system.<br /> <span style="border: none; clear: right; display: inline-block; float: right; height: 372px; margin-bottom: 1em; margin-left: 1em; overflow: hidden; width: 332px;"><img height="372" src="https://lh3.googleusercontent.com/mN1ug2uAYCeg1zXpCNsgkPIVb5B1bWE6yGmjAH5xpZSqVhfOVAbuOGA76DolGRYWfe337pE2FSZg-w5v5Qh1_jo5nttGHI0fc7SWGZvsiBEQf_FvASwUEkCWzEPDIQplq81IqDTK" style="margin-left: 0px; margin-top: 0px;" width="332" /></span><span id="docs-internal-guid-573a8bd1-7fff-d650-7097-72c014ab8272"></span><br /> <br /> The <code>prefers-color-scheme</code> media query allows a website or web app to adopt the preferred display mode of the user. Use the query in your CSS code like so:<br /> <br /> <br /> <pre>@media (prefers-color-scheme: dark) { body { color: white; background-color: black; } }</pre> <br /> <br /> What is left out of this is the explanation? For that, read the article titled <a href="https://web.dev/prefers-color-scheme/">Hello Darkness, My Old Friend</a>.<br /> <h2> <span style="font-size: x-large;">Payments API</span></h2> Over the last few versions of Chrome we've rolled out a number of improvements to the payments APIs. These APIs provide a way to interact with proprietary payment systems without needing to build your own user interactions. Changes in Chrome 75 included replacing <code>hasEnrolledInstrument()</code> with <code>canMakePayment()</code> and removal of <code>languageCode</code> from the billing address. With the <code>detailsPromise</code> option Chrome 75 gives <code>PaymentRequest.show()</code> a means of performing a quick server call before showing payment details to the buyer.<br /> <br /> Chrome 76 brings three changes to the payment realm. Now implemented are features that allow a merchant website or web app to respond when a user changes payment instruments. Additionally, the <code>PaymentRequestEvent</code> has a new method called <code>changePaymentMethod()</code> and the <code>PaymentRequest</code> object now supports an event handler called <code>paymentmethodchange</code>. You can use both to notify a merchant when the user changes payment instruments. The former returns a promise that resolves with a new <code>PaymentRequest</code> instance. <br /> <br /> Additionally, Chrome now makes it easier to use the payments APIs for self-signed certificates on the local development environment. To do this, launch Chrome from a command line with the <code>—ignore-certificate-errors</code> flag. <br /> <br /> For detailed information about these features, read <a href="https://web.dev/web-payments-updates/">Web Payments Updates</a>. <br /> <h2> <span style="font-size: x-large;">Improvements for Progressive Web Apps</span></h2> <h3> Install Progressive Web Apps on the desktop with ease</h3> On desktop, there is typically no indication to a user that a Progressive Web App is installable, and if it is, the install flow is hidden within the three dot menu. <br /> <br /> In Chrome 76, we're making it easier for users to install Progressive Web Apps on the desktop by adding an <a href="https://developers.google.com/web/updates/2019/06/pwa-install-addressbar">install button to the omnibox</a>.<br /> <br /> <span style="border: none; clear: right; display: inline-block; float: right; height: 279px; margin-bottom: 1em; margin-left: 1em; overflow: hidden; width: 446px;"><img height="279" src="https://lh6.googleusercontent.com/98SHn5p9ylaefvICBSAxRhDmvMujdOylOh43ng-KoSdSWc4CUjA2gxs6POBUiuj4xjMyJqVYPCPkgQYMCZE1-G0ARFRjgnMu17FKPAPYa6phyMzTa_zhe6bWgRN7lLtBhQMzH7iu" style="margin-left: 0px; margin-top: 0px;" width="446" /></span><span id="docs-internal-guid-20b3c859-7fff-7bcd-093e-de56f88dd607"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span><br /> If a site meets the Progressive Web App <a href="https://developers.google.com/web/fundamentals/app-install-banners/#criteria">installability criteria</a>, Chrome shows an install icon in the omnibox. There is no extra work required from developers. Clicking the button prompts the user to install the PWA.<br /> <h3> Control the Add to Home Screen mini-infobar</h3> In Chrome 76, we're giving you control over the add to home screen mini-infobar. <br /> <br /> <img src="insert_image_url_here" /><br /> <span id="docs-internal-guid-76686c5f-7fff-2269-e5a2-1f55f41e04d0"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><span style="border: none; display: inline-block; height: 87px; overflow: hidden; width: 328px;"><img height="87" src="https://lh6.googleusercontent.com/1e06kr9yTL7Shc3jCJJrSWRbnqvaAGbPaJjxiJl3kbIv2BDUPG0gXPcv6AJzVrFqpXK8cg4ZwiWQI6OUXm5RvbXNRkKHkcjQTqkKJOxWNe6lB0NwxzdMGPpCbfABadlR_5wKlOIu" style="margin-left: 0px; margin-top: 0px;" width="328" /></span></span></span><br /> <br /> Chrome shows the mini-infobar the first time a user visits a site that meets the <a href="https://developers.google.com/web/fundamentals/app-install-banners/#criteria">Progressive Web App installability criteria</a>. Developers want to prevent the mini-infobar from appearing, and provide their own install promotion instead.<br /> <br /> To do this, listen for the <code>beforeinstallprompt</code> event, and call <code><a href="https://developers.google.com/web/updates/2019/05/mini-infobar-update">preventDefault()</a></code><br /> on it. Then, update your UI to notify the user by adding an install button or other element. Depending on your app, there are several different patterns you can use to <a href="https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile">promote installation of your PWA</a>. <br /> <br /> The add to home screen mini-infobar is still a temporary measure. We are experimenting with new UI patterns for giving Progressive Web App users the ability to install, and do this in a way that reduces clutter in the browsing experience.<br /> <h3> Updating WebAPKs more frequently</h3> When a PWA is installed on Android, Chrome automatically requests and installs a <a href="https://developers.google.com/web/fundamentals/integration/webapks">WebAPK</a>. Chrome periodically checks to see if the manifest has changed, and if a new WebAPK is required. Starting in Chrome 76, <a href="https://developers.google.com/web/updates/2019/06/webapk-update-frequency">Chrome will check the manifest more frequently</a>: checking every day, instead of every three days. If any of the key properties have changed, Chrome will request and install a new WebAPK.<br /> <h2> <span style="font-size: x-large;">Other features in this release</span></h2> <h3> Animation.updatePlaybackRate</h3> <a href="https://www.chromestatus.com/feature/6276633918963712">Adds <code>Animation.updatePlaybackRate()</code></a>, which lets you seamlessly transition the playback rate of an animation such that there is no visible jump in the animation. Current time is preserved at the instance the new playback rate takes effect.<br /> <h3> Async clipboard: read and write images</h3> Implements <a href="https://www.chromestatus.com/feature/5074658793619456">programmatic copying and pasting of images</a> for the Async Clipboard API. This change also updates <code>navigator.clipboard.read()</code> and <code>navigator.clipboard.write()</code> to comply with the specification. Programmatic copying and pasting of images is Chromium's top starred bug.<br /> <h3> Escape key is not a user activation</h3> The escape key is <a href="https://www.chromestatus.com/feature/5302245493047296">no longer treated as a user activation</a>. Browsers prevent calls to abusable APIs (like popup, fullscreen, vibrate, etc.) unless the user activates the page through direct interactions. Not all interactions trigger user activation. For example, clicking on a link or typing in a textbox does, but swiping fingers on a screen or hovering with the mouse cursor does not. Since users never intend to interact with the page through the escape key, it should not trigger user activation.<br /> <h3> Fetch Metadata</h3> Introduces a <a href="https://www.chromestatus.com/feature/5155867204780032">new HTTP request header</a> that sends additional metadata about a request's provenance (is it cross-site, is it triggered from <code><img></code>, etc.) to the server to allow it to make security decisions which might mitigate some kinds of attacks based on timing the server's response (<a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Cross-site_scripting&sa=D&ust=1559835672088000&usg=AFQjCNHxYTsK7FbUbzSALEynoJ-2xUeg7g">XSS leaks</a> and others).<br /> <br /> For example, it is unlikely that a bank's "Transfer all money" endpoint would be referenced from an <code><img></code> tag, and likewise unlikely that evil.com is going to be making any legitimate requests whatsoever. Ideally, the server could reject these requests a priori rather than deliver them to the application backend.<br /> <h3> form.requestSubmit()</h3> <a href="https://www.chromestatus.com/feature/6097749495775232">Adds the <code>form.requestSubmit()</code> function</a>, which requests form submission. It includes interactive constraint validation, dispatches a <code>submit</code> event, and takes a reference to the submitter button.<br /> <h3> ImageCapture support for focusDistance constraint</h3> The Image Capture API provides a means to set the focusMode to manual which is not useful if you cannot set the focus distance. This change <a href="https://www.chromestatus.com/feature/5181454237564928">provides an interface</a> for getting focus range values and setting focus distance value.<br /> <h3> Implement Animation.pending</h3> Adds <a href="https://www.chromestatus.com/feature/4843845109940224">the pending attribute</a> to the Web Animations API. A pending animation is one that is waiting on an asynchronous operation that affects the play state. Adding support for this attribute does not affect the rendering or timing of animations, but simply exposes the signal. <br /> <h3> IndexedDB transaction explicit commit API call</h3> Adds <a href="https://www.chromestatus.com/feature/5375472036741120">a <code>commit()</code> function to <code>IDBTransaction</code></a> objects, which explicitly marks a transaction as not accepting further requests. Currently, IndexedDB only commits a transaction after all associated requests have had their completion event handlers executed, and no new requests have been queued by the event handlers. Developers can use the explicit <code>commit()</code> function to shave a few event loop cycles off of the latency of their transactions.<br /> <br /> The primary benefit of explicit commit is that it increases the throughput of read and write requests made on an object store. This is a clear performance benefit in terms of the rate at which operations can be processed. Additionally, the increase in speed is advantageous because it adds stability to IndexedDB by reducing the probability that a disruptive event occurs within the lifetime of a transaction.<br /> <h3> JavaScript</h3> <strong>DateTimeFormat dateStyle and timeStyle </strong><br /> Adds <code><a href="https://www.chromestatus.com/feature/5091631933947904">dateStyle</a></code> and <code>timeStyle</code> options to functions on <code>Intl.DateTimeFormat</code>, specifically <code>formatToParts()</code> and <code>resolveOptions()</code>. These options provide a compact way to request the appropriate, locale-specific date and time of given length styles.<br /> <br /> <strong>Locale sensitive BigInt.prototype.toLocaleString and allow Intl.NumberFormat format/formatToParts to take BigInt.</strong><br /> <a href="https://www.chromestatus.com/feature/5742274625404928">Changes <code>BigInt.prototype.toLocaleString()</code></a> to locale-sensitive number formatting and changes <code>Intl.NumberFormat.prototype.format()</code> and <code>formatToParts()</code> to accept <code>BigInt</code> as input.<br /> <h3> Media capabilities in workers</h3> <a href="https://www.chromestatus.com/feature/5730672977117184">Enables the Media Capabilities API in all types of workers</a> to help website and web apps pick the best media to stream from a worker. The information can then be used to create the <code>MediaStream</code> from a worker.<br /> <h3> Promise.allSettled</h3> <a href="https://www.chromestatus.com/feature/5547381053456384">Adds Promise.allSettled()</a>, which returns a promise that is fulfilled with an array of promise state snapshots, but only after all the original promises have settled, in other words after it has either resolved or rejected.<br /> <h3> Simpler reading methods for Blob interface</h3> Adds <a href="https://www.chromestatus.com/feature/6206980857266176">three new methods to the Blob interface</a> to perform read operations: <code>text()</code>, <code>arrayBuffer()</code>, and <code>stream()</code>.<br /> <h3> WebRTC</h3> <strong>RTCSctpTransport</strong><br /> <a href="https://www.chromestatus.com/feature/5847754483957760">Exposes information about the SCTP transport</a> that is used to carry WebRTC data channels such as <code>max-message-size</code> and <code>max</code> channels.<br /> <br /> <strong>RTCRtpSender.setStreams</strong><br /> Allows <a href="https://www.chromestatus.com/feature/6044840062091264">changing the association between</a> the track associated with an <code>RTCRtpSender</code> and streams. Stream association causes tracks in the same stream to be synchronized. This is useful, for example, if during a call a user switches from a front-facing camera to a back-facing camera and the application uses <code>RTCRtpSender.replaceTrack()</code>. On the receiving end the new track must be associated with the existing stream and synchronized with its auto track.<br /> <br /> <strong>RTCRtpTransceiver.setCodecPreferences()</strong><br /> Adds the <code><a href="https://www.chromestatus.com/feature/5242890959716352">setCodecPreferences()</a></code> method, which overrides the default codec preferences used by the user agent. This allows applications to disable the negotiation of specific codecs. It also allows an application to cause a remote peer to prefer the codec that appears first in the list for sending.<br /> <h3> white-space: break-spaces</h3> The <code><a href="https://www.chromestatus.com/feature/4842781306519552">white-space:break-spaces</a></code> value allows authors to specify that any sequence of preserved white space that would otherwise overflow a line and hang (as per the CSS Text Module specification's <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">Trimming and Positioning rules</a>) must be broken.<br /> <h2> <span style="font-size: x-large;">Removals</span></h2> <h3> Remove feature policy: lazyload</h3> The <a href="https://www.chromestatus.com/feature/5641405942726656">lazyload feature policy</a> was intended to allow developers to selectively control the lazyload attribute on the <code><iframe></code> and <code><img></code> tags to provide more control over loading delay for embedded contents and images on a per origin basis. <br /> <br /> The policy is removed in favor of a newer feature policy for loading, namely <code>loading-frame-default-eager</code> which is more aligned with how the <code>loading</code> attribute will be used. The removal applies to both the Feature-Policy header and the <code><iframe> allow</code> attribute.<br /> <h3> Remove outputs from MediaStreamAudioDestinationNode</h3> According to the specification, the <code>MediaStreamAudioDestinationNode</code> in the Web Audio API should have no outputs. Chrome's implementation has a single output which <a href="https://www.chromestatus.com/feature/5702493226926080">has been removed</a>.<br /> <h3> Remove insecure usage of DeviceMotionEvent</h3> Chromium has been showing deprecation warnings since 2015 whenever the API is used in a non-secure browsing context. Chrome <a href="https://www.chromestatus.com/feature/5688035094036480">now restricts the API</a> to secure browsing contexts. This change brings Chromium's implementation in line with the privacy and security recommendations in the specification, and is aligned with the effort to deprecate powerful features on insecure origins.<br /> <h3> Remove insecure usage of DeviceOrientationEvent</h3> <div> Chromium has been showing deprecation warnings since 2015 whenever the API is used in a non-secure browsing context. Chrome <a href="https://www.chromestatus.com/features/5468407470227456">now restricts the API</a> to secure browsing contexts. This change brings Chromium’s implementation in line with the privacy and security recommendations in the specification, and is aligned with the effort to deprecate powerful features on insecure origins.</div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:Chrome 76 Beta: dark mode, payments, new PWA features and more&url=https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/beta' rel='tag'> beta </a> , <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/css' rel='tag'> css </a> , <a class='label' href='https://blog.chromium.org/search/label/javascript' rel='tag'> javascript </a> , <a class='label' href='https://blog.chromium.org/search/label/payments' rel='tag'> payments </a> , <a class='label' href='https://blog.chromium.org/search/label/removals' rel='tag'> removals </a> , <a class='label' href='https://blog.chromium.org/search/label/webrtc' rel='tag'> webrtc </a> </span> </div> </div> </div> <div class='post' data-id='3510160291254849919' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html' itemprop='url' title='Google I/O 2019: What's new with Chrome and the Web'> Google I/O 2019: What's new with Chrome and the Web </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Wednesday, May 8, 2019 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <div style="text-align: center;"> <br /> <br /> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/rUUazNIZW7I" width="560"></iframe></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> The web celebrated its 30th anniversary this year, and what an amazing three decades they have been. We’ve seen the platform go from powering simple hypertext documents, to one that enables rich, immersive, and dynamic experiences that are at the forefront of design.<br /> <br /> Looking forward, the world’s needs continue to evolve, and that motivates us to continue our participation with the global web community to adapt and improve the platform to meet the needs of the future. Our efforts are focused on making the web faster and more powerful, while keeping our users’ trust and safety front and center.<br /> <br /> <br /> <h3> <b>Vision for an Instant Web</b></h3> <br /> Speed matters on the web. We’ve <a href="https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-site-speed-importance/">found</a> that users are highly sensitive to loading speed and this can have a direct impact on the business.<br /> <br /> So we’ve been working hard to make the <b>browser faster and lighter </b>so developers can do more with their experience. By focusing on startup bottlenecks, we were able to improve the loading speed on Chrome’s startup by 50% on low-end devices; and 10% across devices. We also improved scrolling performance by 18% and through V8, JavaScript memory usage reduced by up to 20% for real world apps.<br /> <br /> Apart from making the browser more efficient, we’ve also been adding more features to the platform to take the burden away from developers. And we’d like to share a few of these here:<br /> <br /> <ul> <li>To deliver a great image loading experience without needing developers to build their own JavaScript solutions, we’re bringing<b> <a href="https://addyosmani.com/blog/lazy-loading/">lazy loading</a></b> for images and iframes directly into the browser. All developers have to do is add a simple HTML attribute and Chrome will take care of the rest.</li> <li>For fast sites, Chrome’s eager clearing of the page, when a user wants to navigate to another page, can be detrimental to the experience. To avoid this flash of a white “loading page”, we’re rolling out a new experiment called <b>Paint Holding</b> to improve navigation on the web. You can see it in action for the Awwwards website here: </li> </ul> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/3k1I_zA1SEg" width="560"></iframe></div> <div style="text-align: center;"> <br /></div> <br /> <br /> Speaking of navigations, <a href="https://web.dev/hands-on-portals"><b>Portals</b></a>, is a new technology that we believe will fundamentally change the way users traverse the web. Portals are similar to iframes and allow content to be embedded directly in a page, but unlike standard iframes, they can be ‘activated’ to become the top-level page, enabling instant transitions across the web. Advanced experiences can even hold pieces of the original page’s UI privately and securely, so that you can provide seamless overlays that still hold our ideals of the origin model.<br /> <br /> At I/O, we shared our vision of how developers would be able to use Portals and associated APIs to support pre-fetching, enhanced transitions and the exchange of contextual information between sites. And now that Portals API is available behind a flag in Chrome Canary, we’re excited to see what developers will build with this new primitive.<br /> <div> <br /></div> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/RAtuBSfqCjU" width="560"></iframe> </div> <div style="text-align: center;"> <br /></div> Another technology that we’re particularly excited about is <a href="https://github.com/WICG/webpackage"><b>Web Packaging</b></a>, a bold new contract between web developers and web servers. With Web Packaging, the model for loading pages changes from the browser requesting the page from the origin’s server to it being able to load from anywhere — even potentially other peer devices. <br /> <div style="text-align: center;"> <span id="docs-internal-guid-58af7879-7fff-9117-39b4-7be264d6314b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span><span id="docs-internal-guid-58af7879-7fff-9117-39b4-7be264d6314b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span><span id="docs-internal-guid-920c15e8-7fff-dc48-cad9-0f15b9c0aa46"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="351" src="https://lh6.googleusercontent.com/n6lWJFxp7RqGt2HalG6-pHCDlGSUso1EHRGzpWP8CZRQ9jmfn18XwbxtUcaFvA5AwcyygTzp_sUu-UTgukCd8C-BTjpyytfyIpiAWuVD7sSuIlbQjeVqNH4ZbqWaqObfpr6cHw_S" style="border: none;" width="624" /></span></span></div> <div style="text-align: center;"> <span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div> <br /> <br /> This gives the browser the flexibility to preload content and load pages instantly while doing so in a privacy preserving way. <a href="https://developers.google.com/web/updates/2018/11/signed-exchanges"><b>Signed Exchanges</b></a>, the first phase of this vision is now available in Chrome for developers to use.<br /> <br /> These are some of the things that we’re doing to make the web more instant, but its success is predicated on developers making their experiences fast and maintaining that performance. So we’ve added a bunch of tools to help.<br /> <br /> In 2017, we launched the <a href="https://web.dev/chrome-ux-report"><b>Chrome UX report</b> </a>to give developers a better sense of how their users truly experience their webpages by providing them real world metrics. The report is now includes a data set of nearly 6 million origins and is powering more of our tools, including the latest Speed Report in the <a href="https://search.google.com/search-console/about"><b>Google Search Console</b></a>. The report is currently in beta and you can register <a href="https://docs.google.com/forms/d/e/1FAIpQLSfCpmZbF7t0lZbyXuc6rsB8CiB3ySifqe4Vn-58A9pCbFTGfw/viewform">here</a> to join the program and share your feedback.<br /> <br /> To give developers an even wider array of real world metrics, the <b>Firebase</b> team have broadened their <a href="https://firebase.google.com/docs/perf-mon"><b>Performance Monitoring</b></a> tool to also cover web apps.<br /> <br /> And to stay on the rails for performance, we’ve seen many top sites implement ‘performance budgets’ within their build environments, and that is why we’ve built <a href="https://developers.google.com/web/tools/lighthouse/audits/budgets"><b>performance budgets directly into Lighthouse</b></a>, so that you can get alerted to performance regressions before they hit your production site.<br /> <br /> <br /> <h3> <b>Creating a more powerful web</b></h3> Our vision is to allow you to do absolutely anything that you want your users to do, on the web. So we’ve been working hard over the last year to close the capability gap by focusing on the features that get your experiences closer to your users.<br /> <div> <br /> Working closely with the community to address the most pressing and critical needs, we’re bringing many of these features to fruition at a great pace. Some of the capabilities that we’re most excited about include <a href="https://github.com/WICG/native-file-system">File system access</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=897276" target="_blank">Unlimited Quota</a> and the <a href="https://github.com/sso-google/sms-otp-retrieval/blob/master/README.md">SMS based authentication</a> feature that is particularly important for developers working in markets where “one-time passwords” are an important part of the authentication process.<br /> <br /> And while we continue our momentum here, we’ve already launched the <a href="https://developers.google.com/web/updates/2018/12/web-share-target">Web Share Target API</a> allowing your apps to be integrated into the native system sharing, and opened up <a href="https://developers.google.com/web/updates/2019/01/shape-detection">Shape Detection APIs</a> that enable experiences like the <a href="https://perceptiontoolkit.dev/">Web Perception toolkit</a> that we launched at I/O today. The toolkit allows developers to integrate with the mobile camera and enable people to use their website more effectively.<br /> <br /> With mobile gaining many such strong capabilities, we also wanted to enable developers who build quality web experiences to get more reach. So we’ve launched <a href="https://developers.google.com/web/updates/2019/02/using-twa"><b>Trusted Web Activities</b></a>, that allow developers to integrate their web content into Android apps. And businesses like <a href="https://play.google.com/store/apps/details?id=com.oyo.consumerlite&hl=en_US" target="_blank">OYO Rooms</a>, India’s biggest affordable hotels network, are already using Trusted Web Activities to power a lite version of their experience, a common pattern that we’re seeing amongst partners in some markets.</div> <div> <div> <span id="docs-internal-guid-c6f927b1-7fff-942f-9b6e-d2548fbe66f8"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span></div> <div> <br /></div> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/XMaDMYjHP0Y" width="560"></iframe></div> <div style="text-align: center;"> <br /></div> But the thing that we’re most excited about is the progress that we’ve made on desktop capabilities, with technologies like Web Assembly and individual media and productivity APIs unlocking many new use cases. <a href="https://www.hulu.com/app">Hulu</a> and <a href="https://duo.google.com/">Google’s Duo</a> are great examples of what’s possible on the web today. And we’re excited to have our friends at Slack join in and fully committed to roll out an offline-enabled web-powered version of their desktop app later this year.<br /> <br /> PWAs on desktop came to ChromeOS last year, to enable web apps that need full window support and common desktop app capabilities. And now we’re excited to have extended support to Windows, Mac, and Linux.<br /> <br /> We’re excited to see the momentum for PWAs on desktop and we wanted to ensure that we do our part to ensure that users can identify high quality PWAs and install them easily, so we’ve improved discoverability by bringing a new “Install” button directly into Chrome’s UI, within the Omnibox. This is one step to support developers building amazing experiences to get more engagement with their loyal users and we hope to continue doing more here.<br /> <br /> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/IKSZYbfiz1Q" width="560"></iframe></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <span id="docs-internal-guid-1b24ad18-7fff-10e6-6b89-d004cdc009db"></span></div> In this landscape of massive device fragmentation, we wanted to see if it is possible for us to build an experience that could work across all devices, from the lowest-end feature phones to the large screen desktops. So we built a fun game - <a href="https://proxx.app/"><b>Proxx</b></a>, that uses preact for UI, <a href="https://github.com/GoogleChromeLabs/comlink">Comlink</a> to be able to use workers and do more off the main thread. And yes, it works across all devices and performs well even on the most constrained ones. And because it's on the web, you can play it right here; but maybe after you're done reading. :)<br /> <div> <br /></div> <div style="text-align: center;"> <iframe allow="" allowfullscreen="" frameborder="0" height="640" src="https://proxx.app" width="320"></iframe></div> <div style="text-align: center;"> <br /></div> <br /> <br /> Over the next year we will continue to open up even more of the capabilities that enable the next generation of games, productivity, media and social apps to come to the web, all whilst ensuring that the core principles of user safety and trust are preserved.<br /> <br /> <br /> <br /> <h3> Bringing transparency, choice and control</h3> User experience is extremely important to us and their safety and privacy remains at the heart of it. At I/O, we <a href="https://blog.chromium.org/2019/05/improving-privacy-and-security-on-web.html">shared</a> important upcoming changes to how Chrome will handle cookies in order to enable choice over tracking, and that enhance web security and privacy generally. And later this year, we will preview new features in Chrome that give users transparency and control over how they are tracked on the web.<br /> <br /> We believe these changes will help improve user privacy and security on the web — but we know that it will take time. So we’re committed to working with the web ecosystem to understand how Chrome can continue to support these positive use cases and to build a better web.<br /> <br /> <br /> <br /> <h3> Improving your developer experience</h3> As the scope of the web platform increases and the demand from users to have ever faster, safer and more capable experiences at their fingertips it should be easier, not harder to build high-quality sites. <br /> <br /> We built <a href="https://web.dev/"><b>web.dev</b></a> to bring our measurement tools, aka, Lighthouse and guidance all in one place. We’ve improved the site that now provides over 200 easy to follow guides for performance, safety, accessibility, resilience, and more. And at I/O, we announced our intent to build guidance for the tools that you use, starting with <a href="https://web.dev/react">React</a>.</div> <div> <br /></div> <div> <div style="text-align: center;"> <img height="348" src="https://lh3.googleusercontent.com/wHv0Iil9QqTGtg1RA4MA29aEIzK6UCkefCmgOW4TQV28JVPg4czxnx9SN0-6r8_t3GFY8Mk4bOseUdPpVVOAUiDefm7oKIkJ58Ea83MoOBVVbYz3w-VUhdVMDRP9ukM-JWCWPgkj" style="border: none; font-family: Arial; font-size: 11pt; white-space: pre-wrap;" width="624" /></div> <br /> And we’re adding the same level of <b><a href="https://developers.google.com/web/updates/2019/01/lighthouse-platform-packs">personalization to Lighthouse</a>,</b> to give developers reports and improvement tips for the framework that they use. We’ve built in guidance for Wordpress and will be adding more over the rest of 2019 and beyond.<br /> <br /> The web has come a long way over the last 30 years and we’re excited to be working with the developer community and other browsers with a shared mission to bring universal access to information and services to more people than ever.<br /> <br /> <br /> Posted by Ben Galbraith and Dion Almaer</div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <div style="text-align: center;"> <br /> <br /> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/rUUazNIZW7I" width="560"></iframe></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> The web celebrated its 30th anniversary this year, and what an amazing three decades they have been. We’ve seen the platform go from powering simple hypertext documents, to one that enables rich, immersive, and dynamic experiences that are at the forefront of design.<br /> <br /> Looking forward, the world’s needs continue to evolve, and that motivates us to continue our participation with the global web community to adapt and improve the platform to meet the needs of the future. Our efforts are focused on making the web faster and more powerful, while keeping our users’ trust and safety front and center.<br /> <br /> <br /> <h3> <b>Vision for an Instant Web</b></h3> <br /> Speed matters on the web. We’ve <a href="https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-site-speed-importance/">found</a> that users are highly sensitive to loading speed and this can have a direct impact on the business.<br /> <br /> So we’ve been working hard to make the <b>browser faster and lighter </b>so developers can do more with their experience. By focusing on startup bottlenecks, we were able to improve the loading speed on Chrome’s startup by 50% on low-end devices; and 10% across devices. We also improved scrolling performance by 18% and through V8, JavaScript memory usage reduced by up to 20% for real world apps.<br /> <br /> Apart from making the browser more efficient, we’ve also been adding more features to the platform to take the burden away from developers. And we’d like to share a few of these here:<br /> <br /> <ul> <li>To deliver a great image loading experience without needing developers to build their own JavaScript solutions, we’re bringing<b> <a href="https://addyosmani.com/blog/lazy-loading/">lazy loading</a></b> for images and iframes directly into the browser. All developers have to do is add a simple HTML attribute and Chrome will take care of the rest.</li> <li>For fast sites, Chrome’s eager clearing of the page, when a user wants to navigate to another page, can be detrimental to the experience. To avoid this flash of a white “loading page”, we’re rolling out a new experiment called <b>Paint Holding</b> to improve navigation on the web. You can see it in action for the Awwwards website here: </li> </ul> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/3k1I_zA1SEg" width="560"></iframe></div> <div style="text-align: center;"> <br /></div> <br /> <br /> Speaking of navigations, <a href="https://web.dev/hands-on-portals"><b>Portals</b></a>, is a new technology that we believe will fundamentally change the way users traverse the web. Portals are similar to iframes and allow content to be embedded directly in a page, but unlike standard iframes, they can be ‘activated’ to become the top-level page, enabling instant transitions across the web. Advanced experiences can even hold pieces of the original page’s UI privately and securely, so that you can provide seamless overlays that still hold our ideals of the origin model.<br /> <br /> At I/O, we shared our vision of how developers would be able to use Portals and associated APIs to support pre-fetching, enhanced transitions and the exchange of contextual information between sites. And now that Portals API is available behind a flag in Chrome Canary, we’re excited to see what developers will build with this new primitive.<br /> <div> <br /></div> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/RAtuBSfqCjU" width="560"></iframe> </div> <div style="text-align: center;"> <br /></div> Another technology that we’re particularly excited about is <a href="https://github.com/WICG/webpackage"><b>Web Packaging</b></a>, a bold new contract between web developers and web servers. With Web Packaging, the model for loading pages changes from the browser requesting the page from the origin’s server to it being able to load from anywhere — even potentially other peer devices. <br /> <div style="text-align: center;"> <span id="docs-internal-guid-58af7879-7fff-9117-39b4-7be264d6314b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span><span id="docs-internal-guid-58af7879-7fff-9117-39b4-7be264d6314b"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span><span id="docs-internal-guid-920c15e8-7fff-dc48-cad9-0f15b9c0aa46"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="351" src="https://lh6.googleusercontent.com/n6lWJFxp7RqGt2HalG6-pHCDlGSUso1EHRGzpWP8CZRQ9jmfn18XwbxtUcaFvA5AwcyygTzp_sUu-UTgukCd8C-BTjpyytfyIpiAWuVD7sSuIlbQjeVqNH4ZbqWaqObfpr6cHw_S" style="border: none;" width="624" /></span></span></div> <div style="text-align: center;"> <span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div> <br /> <br /> This gives the browser the flexibility to preload content and load pages instantly while doing so in a privacy preserving way. <a href="https://developers.google.com/web/updates/2018/11/signed-exchanges"><b>Signed Exchanges</b></a>, the first phase of this vision is now available in Chrome for developers to use.<br /> <br /> These are some of the things that we’re doing to make the web more instant, but its success is predicated on developers making their experiences fast and maintaining that performance. So we’ve added a bunch of tools to help.<br /> <br /> In 2017, we launched the <a href="https://web.dev/chrome-ux-report"><b>Chrome UX report</b> </a>to give developers a better sense of how their users truly experience their webpages by providing them real world metrics. The report is now includes a data set of nearly 6 million origins and is powering more of our tools, including the latest Speed Report in the <a href="https://search.google.com/search-console/about"><b>Google Search Console</b></a>. The report is currently in beta and you can register <a href="https://docs.google.com/forms/d/e/1FAIpQLSfCpmZbF7t0lZbyXuc6rsB8CiB3ySifqe4Vn-58A9pCbFTGfw/viewform">here</a> to join the program and share your feedback.<br /> <br /> To give developers an even wider array of real world metrics, the <b>Firebase</b> team have broadened their <a href="https://firebase.google.com/docs/perf-mon"><b>Performance Monitoring</b></a> tool to also cover web apps.<br /> <br /> And to stay on the rails for performance, we’ve seen many top sites implement ‘performance budgets’ within their build environments, and that is why we’ve built <a href="https://developers.google.com/web/tools/lighthouse/audits/budgets"><b>performance budgets directly into Lighthouse</b></a>, so that you can get alerted to performance regressions before they hit your production site.<br /> <br /> <br /> <h3> <b>Creating a more powerful web</b></h3> Our vision is to allow you to do absolutely anything that you want your users to do, on the web. So we’ve been working hard over the last year to close the capability gap by focusing on the features that get your experiences closer to your users.<br /> <div> <br /> Working closely with the community to address the most pressing and critical needs, we’re bringing many of these features to fruition at a great pace. Some of the capabilities that we’re most excited about include <a href="https://github.com/WICG/native-file-system">File system access</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=897276" target="_blank">Unlimited Quota</a> and the <a href="https://github.com/sso-google/sms-otp-retrieval/blob/master/README.md">SMS based authentication</a> feature that is particularly important for developers working in markets where “one-time passwords” are an important part of the authentication process.<br /> <br /> And while we continue our momentum here, we’ve already launched the <a href="https://developers.google.com/web/updates/2018/12/web-share-target">Web Share Target API</a> allowing your apps to be integrated into the native system sharing, and opened up <a href="https://developers.google.com/web/updates/2019/01/shape-detection">Shape Detection APIs</a> that enable experiences like the <a href="https://perceptiontoolkit.dev/">Web Perception toolkit</a> that we launched at I/O today. The toolkit allows developers to integrate with the mobile camera and enable people to use their website more effectively.<br /> <br /> With mobile gaining many such strong capabilities, we also wanted to enable developers who build quality web experiences to get more reach. So we’ve launched <a href="https://developers.google.com/web/updates/2019/02/using-twa"><b>Trusted Web Activities</b></a>, that allow developers to integrate their web content into Android apps. And businesses like <a href="https://play.google.com/store/apps/details?id=com.oyo.consumerlite&hl=en_US" target="_blank">OYO Rooms</a>, India’s biggest affordable hotels network, are already using Trusted Web Activities to power a lite version of their experience, a common pattern that we’re seeing amongst partners in some markets.</div> <div> <div> <span id="docs-internal-guid-c6f927b1-7fff-942f-9b6e-d2548fbe66f8"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"></span></span></div> <div> <br /></div> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/XMaDMYjHP0Y" width="560"></iframe></div> <div style="text-align: center;"> <br /></div> But the thing that we’re most excited about is the progress that we’ve made on desktop capabilities, with technologies like Web Assembly and individual media and productivity APIs unlocking many new use cases. <a href="https://www.hulu.com/app">Hulu</a> and <a href="https://duo.google.com/">Google’s Duo</a> are great examples of what’s possible on the web today. And we’re excited to have our friends at Slack join in and fully committed to roll out an offline-enabled web-powered version of their desktop app later this year.<br /> <br /> PWAs on desktop came to ChromeOS last year, to enable web apps that need full window support and common desktop app capabilities. And now we’re excited to have extended support to Windows, Mac, and Linux.<br /> <br /> We’re excited to see the momentum for PWAs on desktop and we wanted to ensure that we do our part to ensure that users can identify high quality PWAs and install them easily, so we’ve improved discoverability by bringing a new “Install” button directly into Chrome’s UI, within the Omnibox. This is one step to support developers building amazing experiences to get more engagement with their loyal users and we hope to continue doing more here.<br /> <br /> <div style="text-align: center;"> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/IKSZYbfiz1Q" width="560"></iframe></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <span id="docs-internal-guid-1b24ad18-7fff-10e6-6b89-d004cdc009db"></span></div> In this landscape of massive device fragmentation, we wanted to see if it is possible for us to build an experience that could work across all devices, from the lowest-end feature phones to the large screen desktops. So we built a fun game - <a href="https://proxx.app/"><b>Proxx</b></a>, that uses preact for UI, <a href="https://github.com/GoogleChromeLabs/comlink">Comlink</a> to be able to use workers and do more off the main thread. And yes, it works across all devices and performs well even on the most constrained ones. And because it's on the web, you can play it right here; but maybe after you're done reading. :)<br /> <div> <br /></div> <div style="text-align: center;"> <iframe allow="" allowfullscreen="" frameborder="0" height="640" src="https://proxx.app" width="320"></iframe></div> <div style="text-align: center;"> <br /></div> <br /> <br /> Over the next year we will continue to open up even more of the capabilities that enable the next generation of games, productivity, media and social apps to come to the web, all whilst ensuring that the core principles of user safety and trust are preserved.<br /> <br /> <br /> <br /> <h3> Bringing transparency, choice and control</h3> User experience is extremely important to us and their safety and privacy remains at the heart of it. At I/O, we <a href="https://blog.chromium.org/2019/05/improving-privacy-and-security-on-web.html">shared</a> important upcoming changes to how Chrome will handle cookies in order to enable choice over tracking, and that enhance web security and privacy generally. And later this year, we will preview new features in Chrome that give users transparency and control over how they are tracked on the web.<br /> <br /> We believe these changes will help improve user privacy and security on the web — but we know that it will take time. So we’re committed to working with the web ecosystem to understand how Chrome can continue to support these positive use cases and to build a better web.<br /> <br /> <br /> <br /> <h3> Improving your developer experience</h3> As the scope of the web platform increases and the demand from users to have ever faster, safer and more capable experiences at their fingertips it should be easier, not harder to build high-quality sites. <br /> <br /> We built <a href="https://web.dev/"><b>web.dev</b></a> to bring our measurement tools, aka, Lighthouse and guidance all in one place. We’ve improved the site that now provides over 200 easy to follow guides for performance, safety, accessibility, resilience, and more. And at I/O, we announced our intent to build guidance for the tools that you use, starting with <a href="https://web.dev/react">React</a>.</div> <div> <br /></div> <div> <div style="text-align: center;"> <img height="348" src="https://lh3.googleusercontent.com/wHv0Iil9QqTGtg1RA4MA29aEIzK6UCkefCmgOW4TQV28JVPg4czxnx9SN0-6r8_t3GFY8Mk4bOseUdPpVVOAUiDefm7oKIkJ58Ea83MoOBVVbYz3w-VUhdVMDRP9ukM-JWCWPgkj" style="border: none; font-family: Arial; font-size: 11pt; white-space: pre-wrap;" width="624" /></div> <br /> And we’re adding the same level of <b><a href="https://developers.google.com/web/updates/2019/01/lighthouse-platform-packs">personalization to Lighthouse</a>,</b> to give developers reports and improvement tips for the framework that they use. We’ve built in guidance for Wordpress and will be adding more over the rest of 2019 and beyond.<br /> <br /> The web has come a long way over the last 30 years and we’re excited to be working with the developer community and other browsers with a shared mission to bring universal access to information and services to more people than ever.<br /> <br /> <br /> Posted by Ben Galbraith and Dion Almaer</div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:Google I/O 2019: What's new with Chrome and the Web&url=https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome' rel='tag'> chrome </a> , <a class='label' href='https://blog.chromium.org/search/label/google%20io%202019' rel='tag'> google io 2019 </a> , <a class='label' href='https://blog.chromium.org/search/label/portals' rel='tag'> portals </a> , <a class='label' href='https://blog.chromium.org/search/label/twa' rel='tag'> twa </a> , <a class='label' href='https://blog.chromium.org/search/label/web' rel='tag'> web </a> </span> </div> </div> </div> <div class='post' data-id='5827126985380768429' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/11/chrome-dev-summit-2018-building-faster.html' itemprop='url' title='Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web'> Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Monday, November 12, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Today, we’re welcoming the web community to the 2018 edition of the <a href="https://developer.chrome.com/devsummit/">Chrome Dev Summit</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Over the next two days we will celebrate the evolution of the platform and share updates on our efforts moving the web forward with the help of the entire ecosystem.</span></span></div> <b id="docs-internal-guid-bef3e6a1-7fff-fe0e-5162-101a72ce4226" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Chrome’s 10th birthday gave us an opportunity to <a href="https://www.blog.google/perspectives/rahul-roy-chowdhury/happy-10th-birthday-chrome-best-yet-come/">reminisce</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> about how much Chrome and the web have evolved over the past decade. We love seeing how rich the <a href="https://highline.huffingtonpost.com/articles/en/poor-millennials/">content</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, <a href="https://www.figma.com/">apps</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and <a href="https://poki.com/en/g/crossy-road">games</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> you build have become.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Amongst other updates that we’ve made to Chrome, one that we work very hard at is making the browser fast. We see speed as one of the defining and most important features of the web. No other platform can match how quickly a user can go from discovery to the actual experience and move between websites, but this breaks down if the sites take too long to load or if the UI is janky.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Thus, we'd like to collaborate even more with the web developer community in delivering delightfully fast experiences to our end users, from the moment they click on a link.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Fast from the first click</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">HTTPArchive shows that since 2011, sites are using on an <a href="https://httparchive.org/reports/state-of-javascript">average of 8x more JavaScript</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. We’re starting to see the CPU becoming one of the main performance bottlenecks, especially with more and more code often compiled and executed on under-powered mobile devices.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Businesses who focus on the first load (and beyond) are increasingly seeing great results by focusing on the use of </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b><a href="https://addyosmani.com/blog/performance-budgets/">Performance Budgets</a></b></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. These budgets can be based on the byte size of your JavaScript, CSS, images and other resources, as well as other loading metrics. For example, you could specify that Time-to-Interactive will not exceed 5s on an emulated 3G network and specific class of mobile phone. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Consistently staying within budget as you add features over time isn’t easy. After <a href="https://www.wayfair.com/">Wayfair</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> noticed their own regressions, they built an internal performance budgeting system for their developers to track their performance scores. Since then, their page speeds have continuously become faster, and they’ve seen a year-over-year conversion rate increase of more than 10%.</span></span><br /> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline;"><a href="https://www.pinterest.com/">Pinterest</a> revamped their mobile web experience focusing on performance and saw an uplift in user sentiment and engagement. Their mobile website is now their </span><a href="https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05" style="font-family: inherit; font-size: medium; text-decoration-line: none; white-space: normal;"><span style="color: #1155cc; font-size: 11pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">top platform for sign-ups</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline;">! You can see their journey here:</span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/2hyIbCE1T9E/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/3bKMnYJzrqI?feature=player_embedded" width="600"></iframe></div> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Buttery smooth beyond the click</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Optimizing the loading speed of your webpage is important, but so is ensuring that the page delivers a smooth, interactive user experience as it loads and after it’s displayed. This means responding to all user input quickly, in less than a 1/10th of a second, and ensuring that the user interface doesn’t “jank”— meaning the UI doesn’t pause and then jump suddenly.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Over the past decade, we’ve been evolving Chrome so that it can off-load as much work as possible from the main thread. For example, now we decode images and parse JavaScript separately, and with Web Workers you can execute long running JavaScript without blocking up the UI.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">How buttery smooth can you make your web apps today? Especially if you have non-trivial workloads? Our team set out to explore just this, and the end result is a new application launching today called <a href="https://squoosh.app/">Squoosh</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work, including using Web Assembly to do more with codecs the browser doesn’t have baked in. Tune in to <a href="https://developer.chrome.com/devsummit/schedule/complex-js-web-apps">Jake and Mariko's session</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> later today to learn how they did it.</span></span></div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/4jPwanaGnfQ/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/4jPwanaGnfQ?feature=player_embedded" width="600"></iframe></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">But there is even more to do here, and we are excited about up-coming platform APIs, such as Worklets , Virtual Scroller, and even a scheduler, that help developers build smoother experiences more easily. You’ll hear more about many of these tools and techniques in our <a href="https://developer.chrome.com/devsummit/schedule/keynote-1">Day 2 keynote</a></span><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and beyond. </span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Capable with deeper integrations</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We’ve seen that PWAs make it easy to delight your users, grow engagement and increase conversions. Now with deeper integrations to the host OS and the ability to load and run faster than ever, your PWAs can really shine, yet most of these integrations have been focused on mobile-first, or even mobile-only.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Over the last 6 months we’ve been renewing our investments in providing these same set of capabilities across all desktop platforms. Chrome OS has given us a fantastic surface to really push the boundaries of the web, and based on these learnings we are expanding our Desktop PWA support across Chrome for Windows and Linux, with Mac support targeted to land in Chrome 72.</span></span></div> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-406f1363-7fff-0f18-805e-86408711bc6e"><span style="font-family: "arial"; font-size: 11pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;"><img height="305" src="https://lh5.googleusercontent.com/zOtSasB5UtUO4ijpohe9kDFiDDpj1Qn8tQYDx_7KmDQLmC3ZhZxuzxdlju0lFMYxBN15hKGqOtijxUACx_uugZPexMcwDykPggZLpg76asbv2FZp9CkXHKbBdQbGEEcHTVxmhm2w" style="border: none; transform: rotate(0rad);" width="518" /></span></span></div> <br /> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">As we bring more and more capabilities to both mobile and desktop, we want to include the voice of the community to ensure we prioritize features that are important to the community. So today we are sharing <a href="https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html">our plan</a> to get the capabilities YOU need on the web, and how we can work together to make sure we are solving your real world needs.</span></span></span></div> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"> </span> <br /> <div> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"> </span><b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Helping you as a web.dev</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We know that you want </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">one place</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> that consolidates all the reference information for modern Web APIs, and this is why we continue to <a href="https://blog.chromium.org/2017/10/building-unified-documentation-for-web.html">collaborate with MDN</a> </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">on improving the core reference documentation of the web.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We have also heard that you would like more hands on guidance on how to deliver on the principles that make a web experience great. So today, we’re excited to announce a new approach: <a href="http://web.dev/">web.dev</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Through a partnership with <a href="https://glitch.com/">Glitch</a>,</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> a deep integration with our <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> tool and best-practice guidance from our team, <a href="http://web.dev/">web.dev</a> </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">helps you improve </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">your</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> site through direct and targeted best-practice and the ability to monitor your sites over time to ensure that you are always able to keep your site fast, resilient and accessible.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/a6pLdPnDvb8/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/a6pLdPnDvb8?feature=player_embedded" width="600"></iframe></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">As we were working on web.dev, we were inspired by other amazing content on the web that help you learn. </span><a href="https://twitter.com/geddski?lang=en" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Dave Geddes</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">, who created Flexbox Zombies and CSS Grid Critters, created a new learning game. </span><a href="http://serviceworkies.com/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Service Workies</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> helps you understand Service Workers soup to nuts. The first chapter of the adventure is rolling out in beta now. We partnered with Dave to make sure the full adventure can be free to all, so check it out now and whatever you do, listen to Grannie!</span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><img height="351" src="https://lh3.googleusercontent.com/sZwQuVVFY2AP50cNzA2u5RrpIZNWJhLLmRtOA5elaaN6BUJljJ2VADO2j9LUFKJFHDxrcYLWI3LxPqJHenAFGNviLTCUBgDeOV2fKcMmRlg6QXm_WC16zKfEVtH0YjXSohrnSloM" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="624" /></span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Web design, right in the browser</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">At Chrome Dev Summit we cover all of the updates to our developer centric tools and libraries that you know and love, but we also want to show you a new, early experiment that we would love your feedback on. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We remember the impact that Firebug had when it hit the scene, and how it showed how the browser could be the developer tool platform itself. Now we are also thinking about design on the web, and just as Lighthouse started as a Chrome extension to explore, we have another extension, <a href="https://github.com/GoogleChromeLabs/ProjectVisBug">Project Visbug</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, which allows you to design — right in the browser. You can <a href="https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/related">download</a> it now, but before you do see it in action right here:</span></span><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Z9V6B-tOIkc/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/Z9V6B-tOIkc?feature=player_embedded" width="600"></iframe></div> </div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Tune into our</span></span><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="font-family: inherit;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://developer.chrome.com/devsummit/" style="text-decoration-line: none;">livestream</a></span><span style="color: black; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> </span></span><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">or watch the videos on the </span><a href="https://www.youtube.com/user/ChromeDevelopers" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chrome Developers Youtube channel</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> to follow the rest of the sessions of the day and watch this space for our Day 2 wrap up blog where we will have some more exciting announcements.</span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Posted by Ben Galbraith & Dion Almaer</span></span></div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Today, we’re welcoming the web community to the 2018 edition of the <a href="https://developer.chrome.com/devsummit/">Chrome Dev Summit</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Over the next two days we will celebrate the evolution of the platform and share updates on our efforts moving the web forward with the help of the entire ecosystem.</span></span></div> <b id="docs-internal-guid-bef3e6a1-7fff-fe0e-5162-101a72ce4226" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Chrome’s 10th birthday gave us an opportunity to <a href="https://www.blog.google/perspectives/rahul-roy-chowdhury/happy-10th-birthday-chrome-best-yet-come/">reminisce</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> about how much Chrome and the web have evolved over the past decade. We love seeing how rich the <a href="https://highline.huffingtonpost.com/articles/en/poor-millennials/">content</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, <a href="https://www.figma.com/">apps</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and <a href="https://poki.com/en/g/crossy-road">games</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> you build have become.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Amongst other updates that we’ve made to Chrome, one that we work very hard at is making the browser fast. We see speed as one of the defining and most important features of the web. No other platform can match how quickly a user can go from discovery to the actual experience and move between websites, but this breaks down if the sites take too long to load or if the UI is janky.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Thus, we'd like to collaborate even more with the web developer community in delivering delightfully fast experiences to our end users, from the moment they click on a link.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Fast from the first click</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">HTTPArchive shows that since 2011, sites are using on an <a href="https://httparchive.org/reports/state-of-javascript">average of 8x more JavaScript</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. We’re starting to see the CPU becoming one of the main performance bottlenecks, especially with more and more code often compiled and executed on under-powered mobile devices.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Businesses who focus on the first load (and beyond) are increasingly seeing great results by focusing on the use of </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b><a href="https://addyosmani.com/blog/performance-budgets/">Performance Budgets</a></b></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. These budgets can be based on the byte size of your JavaScript, CSS, images and other resources, as well as other loading metrics. For example, you could specify that Time-to-Interactive will not exceed 5s on an emulated 3G network and specific class of mobile phone. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Consistently staying within budget as you add features over time isn’t easy. After <a href="https://www.wayfair.com/">Wayfair</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> noticed their own regressions, they built an internal performance budgeting system for their developers to track their performance scores. Since then, their page speeds have continuously become faster, and they’ve seen a year-over-year conversion rate increase of more than 10%.</span></span><br /> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline;"><a href="https://www.pinterest.com/">Pinterest</a> revamped their mobile web experience focusing on performance and saw an uplift in user sentiment and engagement. Their mobile website is now their </span><a href="https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05" style="font-family: inherit; font-size: medium; text-decoration-line: none; white-space: normal;"><span style="color: #1155cc; font-size: 11pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">top platform for sign-ups</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline;">! You can see their journey here:</span></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/2hyIbCE1T9E/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/3bKMnYJzrqI?feature=player_embedded" width="600"></iframe></div> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Buttery smooth beyond the click</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Optimizing the loading speed of your webpage is important, but so is ensuring that the page delivers a smooth, interactive user experience as it loads and after it’s displayed. This means responding to all user input quickly, in less than a 1/10th of a second, and ensuring that the user interface doesn’t “jank”— meaning the UI doesn’t pause and then jump suddenly.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Over the past decade, we’ve been evolving Chrome so that it can off-load as much work as possible from the main thread. For example, now we decode images and parse JavaScript separately, and with Web Workers you can execute long running JavaScript without blocking up the UI.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">How buttery smooth can you make your web apps today? Especially if you have non-trivial workloads? Our team set out to explore just this, and the end result is a new application launching today called <a href="https://squoosh.app/">Squoosh</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work, including using Web Assembly to do more with codecs the browser doesn’t have baked in. Tune in to <a href="https://developer.chrome.com/devsummit/schedule/complex-js-web-apps">Jake and Mariko's session</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> later today to learn how they did it.</span></span></div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/4jPwanaGnfQ/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/4jPwanaGnfQ?feature=player_embedded" width="600"></iframe></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">But there is even more to do here, and we are excited about up-coming platform APIs, such as Worklets , Virtual Scroller, and even a scheduler, that help developers build smoother experiences more easily. You’ll hear more about many of these tools and techniques in our <a href="https://developer.chrome.com/devsummit/schedule/keynote-1">Day 2 keynote</a></span><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and beyond. </span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Capable with deeper integrations</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">We’ve seen that PWAs make it easy to delight your users, grow engagement and increase conversions. Now with deeper integrations to the host OS and the ability to load and run faster than ever, your PWAs can really shine, yet most of these integrations have been focused on mobile-first, or even mobile-only.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Over the last 6 months we’ve been renewing our investments in providing these same set of capabilities across all desktop platforms. Chrome OS has given us a fantastic surface to really push the boundaries of the web, and based on these learnings we are expanding our Desktop PWA support across Chrome for Windows and Linux, with Mac support targeted to land in Chrome 72.</span></span></div> <br /> <div style="text-align: center;"> <span id="docs-internal-guid-406f1363-7fff-0f18-805e-86408711bc6e"><span style="font-family: "arial"; font-size: 11pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;"><img height="305" src="https://lh5.googleusercontent.com/zOtSasB5UtUO4ijpohe9kDFiDDpj1Qn8tQYDx_7KmDQLmC3ZhZxuzxdlju0lFMYxBN15hKGqOtijxUACx_uugZPexMcwDykPggZLpg76asbv2FZp9CkXHKbBdQbGEEcHTVxmhm2w" style="border: none; transform: rotate(0rad);" width="518" /></span></span></div> <br /> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">As we bring more and more capabilities to both mobile and desktop, we want to include the voice of the community to ensure we prioritize features that are important to the community. So today we are sharing <a href="https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html">our plan</a> to get the capabilities YOU need on the web, and how we can work together to make sure we are solving your real world needs.</span></span></span></div> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"> </span> <br /> <div> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <span id="docs-internal-guid-2c959832-7fff-8b3a-99c6-9e4c3269665d"> </span><b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 14pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Helping you as a web.dev</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We know that you want </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">one place</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> that consolidates all the reference information for modern Web APIs, and this is why we continue to <a href="https://blog.chromium.org/2017/10/building-unified-documentation-for-web.html">collaborate with MDN</a> </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">on improving the core reference documentation of the web.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We have also heard that you would like more hands on guidance on how to deliver on the principles that make a web experience great. So today, we’re excited to announce a new approach: <a href="http://web.dev/">web.dev</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Through a partnership with <a href="https://glitch.com/">Glitch</a>,</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> a deep integration with our <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> tool and best-practice guidance from our team, <a href="http://web.dev/">web.dev</a> </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">helps you improve </span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: italic; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">your</span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> site through direct and targeted best-practice and the ability to monitor your sites over time to ensure that you are always able to keep your site fast, resilient and accessible.</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/a6pLdPnDvb8/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/a6pLdPnDvb8?feature=player_embedded" width="600"></iframe></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">As we were working on web.dev, we were inspired by other amazing content on the web that help you learn. </span><a href="https://twitter.com/geddski?lang=en" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Dave Geddes</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">, who created Flexbox Zombies and CSS Grid Critters, created a new learning game. </span><a href="http://serviceworkies.com/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">Service Workies</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> helps you understand Service Workers soup to nuts. The first chapter of the adventure is rolling out in beta now. We partnered with Dave to make sure the full adventure can be free to all, so check it out now and whatever you do, listen to Grannie!</span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><img height="351" src="https://lh3.googleusercontent.com/sZwQuVVFY2AP50cNzA2u5RrpIZNWJhLLmRtOA5elaaN6BUJljJ2VADO2j9LUFKJFHDxrcYLWI3LxPqJHenAFGNviLTCUBgDeOV2fKcMmRlg6QXm_WC16zKfEVtH0YjXSohrnSloM" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="624" /></span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Web design, right in the browser</span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">At Chrome Dev Summit we cover all of the updates to our developer centric tools and libraries that you know and love, but we also want to show you a new, early experiment that we would love your feedback on. </span></span></div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We remember the impact that Firebug had when it hit the scene, and how it showed how the browser could be the developer tool platform itself. Now we are also thinking about design on the web, and just as Lighthouse started as a Chrome extension to explore, we have another extension, <a href="https://github.com/GoogleChromeLabs/ProjectVisBug">Project Visbug</a></span><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, which allows you to design — right in the browser. You can <a href="https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/related">download</a> it now, but before you do see it in action right here:</span></span><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Z9V6B-tOIkc/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/Z9V6B-tOIkc?feature=player_embedded" width="600"></iframe></div> </div> <b style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">Tune into our</span></span><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="font-family: inherit;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://developer.chrome.com/devsummit/" style="text-decoration-line: none;">livestream</a></span><span style="color: black; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> </span></span><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">or watch the videos on the </span><a href="https://www.youtube.com/user/ChromeDevelopers" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chrome Developers Youtube channel</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> to follow the rest of the sessions of the day and watch this space for our Day 2 wrap up blog where we will have some more exciting announcements.</span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Posted by Ben Galbraith & Dion Almaer</span></span></div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web&url=https://blog.chromium.org/2018/11/chrome-dev-summit-2018-building-faster.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/11/chrome-dev-summit-2018-building-faster.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/11/chrome-dev-summit-2018-building-faster.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/cds18' rel='tag'> cds18 </a> , <a class='label' href='https://blog.chromium.org/search/label/cds2018' rel='tag'> cds2018 </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome%20dev%20summit%202018' rel='tag'> chrome dev summit 2018 </a> , <a class='label' href='https://blog.chromium.org/search/label/performance' rel='tag'> performance </a> , <a class='label' href='https://blog.chromium.org/search/label/web.dev' rel='tag'> web.dev </a> </span> </div> </div> </div> <div class='post' data-id='2638139355448782769' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html' itemprop='url' title='Our commitment to a more capable web'> Our commitment to a more capable web </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Monday, November 12, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <span style="font-family: inherit;">Since the <a href="https://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html">beginning of Chrome</a> we have worked to provide a solid foundation for modern web applications. Those capabilities have enabled new experiences on the web that were never thought possible. WASM is enabling new classes of games and productivity apps like Sketchup and AutoCAD, WebRTC enables new ways to communicate, and <a href="https://developers.google.com/web/fundamentals/primers/service-workers/">service workers</a> allow developers to create reliably fast web experiences regardless of network conditions.</span><br /> <span style="font-family: inherit;">However, there are some capabilities, like file system access, idle detection, and more that are available to native but aren’t available on the web. These missing capabilities mean some types of apps can't be delivered on the web, or are less useful. To cope, some developers build native apps, or use wrappers like Cordova or Electron to access the underlying capabilities of the device.</span><br /> <span style="font-family: inherit;">We strongly believe that every developer should have access to the capabilities they need to make a great web experience, and we want to support them as they do.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Closing the gap</span></h2> <span style="font-family: inherit;">We want to close the capability gap between the web and native and make it easy for developers to build great experiences on the open web. Meanwhile we need to preserve everything that is great about the web. We will rapidly bring new, powerful, portable, and standardized capabilities that unlock key verticals on both mobile and desktop. Giving developers these new tools will empower the open web as a place where any experience can be created, and make the web a first class platform for developing apps that run on any browser, with any operating system, and on any device.</span><br /> <span style="font-family: inherit;">We plan to design and develop these new capabilities in an open and transparent way, using the existing open web platform standards processes while getting early feedback from developers and other browser vendors as we iterate on the design, to ensure an interoperable design.</span><br /> <span style="font-family: inherit;">Per our practice of open design and public iteration, look for many proposals for new designs to surface at the <a href="https://www.w3.org/">W3C</a>'s <a href="https://discourse.wicg.io/">Web Incubator Community Group</a>.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">What are the initial capabilities?</span></h2> <span style="font-family: inherit;">We’ve identified and prioritized an initial set of capabilities we feel are critical to closing the gap between web and native, and have already started work on a handful of them. You can see the list by searching the Chromium bug database for bugs that are tagged with <a href="https://goo.gl/JkDCXM"><code>proj-fugu</code></a>.</span><br /> <span style="font-family: inherit;">Personally I’m really excited about the <a href="https://developers.google.com/web/updates/2018/11/writable-files">writable file API</a> that make it possible to create web based editors, and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=891339">event alarms</a> that help perform arbitrary work at some point in the future. But there are <a href="https://goo.gl/JkDCXM">plenty more</a>: Web Share Target, Async cookies, Wake Lock, WebHID, user idle detection, just to name a few.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Early feedback is critical</span></h2> <span style="font-family: inherit;">We developed a <a href="https://developers.google.com/web/updates/capabilities#process">process</a> to make it possible to design and develop new web platform capabilities that meet the needs of developers quickly, in the open, and most importantly, work within the existing standards process. It’s no different than how we develop every other web platform feature, but it puts an emphasis on developer feedback.</span><br /> <span style="font-family: inherit;">Developer feedback is critical to help us ensure we’re shipping the right features, but it’s easier to change course early in the process. That’s why we’re starting to ask for feedback earlier. When actionable technical and use-case feedback comes in early, it’s easier to course correct or even stop development, without having shipped poorly thought out or badly implemented features. Features being developed at WICG are not set in stone, and <a href="https://discourse.wicg.io/">your input can make a big difference</a> in how they evolve.</span><br /> <span style="font-family: inherit;">It’s worth noting that many ideas never make it past the <a href="https://github.com/w3ctag/w3ctag.github.io/blob/master/explainers.md">explainer</a> or <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md">origin trial</a> stage. The goal of the process is to ship the right feature. That means we need to learn and iterate quickly. Not shipping a feature because it doesn’t solve the developer need is OK.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Getting everyone involved</span></h2> <span style="font-family: inherit;">The first API we’re looking for feedback on is the <a href="https://developers.google.com/web/updates/2018/11/writable-files">writable files API</a>. We want to hear about your use cases and how you expect the security model to work. And keep an eye on our new <a href="https://developers.google.com/web/updates/capabilities">capabilities page</a> on <a href="https://developers.google.com/web/">developers.google.com/web</a> to see the list of capabilities that we’re working on, and how you can participate.</span><br /> <span style="font-family: inherit;">The apps you want to build on the open web should only ever be limited by your imagination, never by missing capabilities. As we look to the future, the gap between web and native will get smaller as browser vendors add new capabilities to the web.</span><br /> <span style="font-family: inherit;">Here’s to a more capable open web.</span><br /> <i><span style="font-family: inherit;"><br /></span></i> <i><span style="font-family: inherit;">Posted by Pete LePage, dreamer.</span></i> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <span style="font-family: inherit;">Since the <a href="https://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html">beginning of Chrome</a> we have worked to provide a solid foundation for modern web applications. Those capabilities have enabled new experiences on the web that were never thought possible. WASM is enabling new classes of games and productivity apps like Sketchup and AutoCAD, WebRTC enables new ways to communicate, and <a href="https://developers.google.com/web/fundamentals/primers/service-workers/">service workers</a> allow developers to create reliably fast web experiences regardless of network conditions.</span><br /> <span style="font-family: inherit;">However, there are some capabilities, like file system access, idle detection, and more that are available to native but aren’t available on the web. These missing capabilities mean some types of apps can't be delivered on the web, or are less useful. To cope, some developers build native apps, or use wrappers like Cordova or Electron to access the underlying capabilities of the device.</span><br /> <span style="font-family: inherit;">We strongly believe that every developer should have access to the capabilities they need to make a great web experience, and we want to support them as they do.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Closing the gap</span></h2> <span style="font-family: inherit;">We want to close the capability gap between the web and native and make it easy for developers to build great experiences on the open web. Meanwhile we need to preserve everything that is great about the web. We will rapidly bring new, powerful, portable, and standardized capabilities that unlock key verticals on both mobile and desktop. Giving developers these new tools will empower the open web as a place where any experience can be created, and make the web a first class platform for developing apps that run on any browser, with any operating system, and on any device.</span><br /> <span style="font-family: inherit;">We plan to design and develop these new capabilities in an open and transparent way, using the existing open web platform standards processes while getting early feedback from developers and other browser vendors as we iterate on the design, to ensure an interoperable design.</span><br /> <span style="font-family: inherit;">Per our practice of open design and public iteration, look for many proposals for new designs to surface at the <a href="https://www.w3.org/">W3C</a>'s <a href="https://discourse.wicg.io/">Web Incubator Community Group</a>.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">What are the initial capabilities?</span></h2> <span style="font-family: inherit;">We’ve identified and prioritized an initial set of capabilities we feel are critical to closing the gap between web and native, and have already started work on a handful of them. You can see the list by searching the Chromium bug database for bugs that are tagged with <a href="https://goo.gl/JkDCXM"><code>proj-fugu</code></a>.</span><br /> <span style="font-family: inherit;">Personally I’m really excited about the <a href="https://developers.google.com/web/updates/2018/11/writable-files">writable file API</a> that make it possible to create web based editors, and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=891339">event alarms</a> that help perform arbitrary work at some point in the future. But there are <a href="https://goo.gl/JkDCXM">plenty more</a>: Web Share Target, Async cookies, Wake Lock, WebHID, user idle detection, just to name a few.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Early feedback is critical</span></h2> <span style="font-family: inherit;">We developed a <a href="https://developers.google.com/web/updates/capabilities#process">process</a> to make it possible to design and develop new web platform capabilities that meet the needs of developers quickly, in the open, and most importantly, work within the existing standards process. It’s no different than how we develop every other web platform feature, but it puts an emphasis on developer feedback.</span><br /> <span style="font-family: inherit;">Developer feedback is critical to help us ensure we’re shipping the right features, but it’s easier to change course early in the process. That’s why we’re starting to ask for feedback earlier. When actionable technical and use-case feedback comes in early, it’s easier to course correct or even stop development, without having shipped poorly thought out or badly implemented features. Features being developed at WICG are not set in stone, and <a href="https://discourse.wicg.io/">your input can make a big difference</a> in how they evolve.</span><br /> <span style="font-family: inherit;">It’s worth noting that many ideas never make it past the <a href="https://github.com/w3ctag/w3ctag.github.io/blob/master/explainers.md">explainer</a> or <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md">origin trial</a> stage. The goal of the process is to ship the right feature. That means we need to learn and iterate quickly. Not shipping a feature because it doesn’t solve the developer need is OK.</span><br /> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Getting everyone involved</span></h2> <span style="font-family: inherit;">The first API we’re looking for feedback on is the <a href="https://developers.google.com/web/updates/2018/11/writable-files">writable files API</a>. We want to hear about your use cases and how you expect the security model to work. And keep an eye on our new <a href="https://developers.google.com/web/updates/capabilities">capabilities page</a> on <a href="https://developers.google.com/web/">developers.google.com/web</a> to see the list of capabilities that we’re working on, and how you can participate.</span><br /> <span style="font-family: inherit;">The apps you want to build on the open web should only ever be limited by your imagination, never by missing capabilities. As we look to the future, the gap between web and native will get smaller as browser vendors add new capabilities to the web.</span><br /> <span style="font-family: inherit;">Here’s to a more capable open web.</span><br /> <i><span style="font-family: inherit;"><br /></span></i> <i><span style="font-family: inherit;">Posted by Pete LePage, dreamer.</span></i> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:Our commitment to a more capable web&url=https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/11/our-commitment-to-more-capable-web.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/features' rel='tag'> features </a> , <a class='label' href='https://blog.chromium.org/search/label/feedback' rel='tag'> feedback </a> , <a class='label' href='https://blog.chromium.org/search/label/writable-files' rel='tag'> writable-files </a> </span> </div> </div> </div> <div class='post' data-id='3266026029210949977' itemscope='' itemtype='http://schema.org/BlogPosting'> <h2 class='title' itemprop='name'> <a href='https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html' itemprop='url' title='The ‘Capable Web’: A 10 Year Retrospective'> The ‘Capable Web’: A 10 Year Retrospective </a> </h2> <div class='post-header'> <div class='published'> <span class='publishdate' itemprop='datePublished'> Tuesday, September 4, 2018 </span> </div> </div> <div class='post-body'> <div class='post-content' itemprop='articleBody'> <script type='text/template'> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">When we </span><a href="http://www.scottmccloud.com/googlechrome/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">introduced Chrome</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> in 2008, our goal was to “keep evolving with the web and continuing to build a solid foundation for modern web applications.” In honor of our tenth year, we’d like to highlight some of the major changes in the web’s rich capabilities that we feel lucky to share with other browser vendors.</span></div> <b id="docs-internal-guid-d53e4590-7fff-6f45-264d-e3c8bfe9586c" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">As the very first pages were served on the open web in </span><a href="http://info.cern.ch/hypertext/WWW/TheProject.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">1990</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, people recognized that the ability to deliver dynamic content would make the web unique—you could provide information and function just by sharing a URL. The </span><a href="https://en.wikipedia.org/wiki/Common_Gateway_Interface" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Common Gateway Interface</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> standard released in 1993 defined a simple interface for web servers to run code in response to web requests. It brought a new era of experience and capability to computing, accessible at the click of a link. Hop forward two short years to JavaScript, then another year to frames, specifically the <iframe> tag. These innovations let developers dynamically load content into pages, brought a new level of interactivity to the web, and increased user expectations of what could be done in the browser. </span></span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Accessibility, linkability, indexability, and universal reach have always been the web’s core strengths. Alongside these super powers, users want ever richer and more-engaging experiences. “</span><a href="https://en.wikipedia.org/wiki/Ajax_(programming)" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Ajax</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">” was coined in 2005 to describe the combination of asynchronous JavaScript and XML, which shaped a more interactive, modern web. It led to the creation of such services as Google Maps, cementing the web as the best way to deliver experiences available to anyone, on any device.</span></span></div> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> <br /></h2> <h2> <br /></h2> <h2> 2008 – 2014: Web applications, HTML5, and the start of the mobile era</h2> <div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Chrome saw huge progress in its early years, with a large number of what are now considered “core APIs” coming to the web after the WebKit implementation. The </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">video</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#audio" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">audio</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and </span><a href="https://www.w3.org/TR/2dcontext/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">canvas</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> elements were some of the first “modern web” features that many of us distinctly remember (and who can forget border-radius?). These features brought a new level of interaction to web experiences, and meant developers no longer needed plugins such as Adobe Flash or Java, to build interactive media and graphical experiences. </span><a href="https://experiments.withgoogle.com/collection/chrome" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chrome experiments</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> have captured great examples of rich experiences that are a direct result of the web’s improved performance.</span></span></span></div> <span style="font-family: inherit;"><span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"> </span></span> </span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The “Mobile Web” really hit the world in 2010, and we saw a slew of new platform primitives introduced for the platform (many inspired directly by </span><a href="https://web.archive.org/web/20090317170140/http://code.google.com/apis/gears/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Google Gears</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) to help make building web apps easier. We could now make responsive, offline-enabled applications with </span><a href="https://www.html5rocks.com/tutorials/appcache/beginner/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">AppCache</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://www.w3.org/TR/webdatabase/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebSQL</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, request permission to access the user's </span><a href="https://w3c.github.io/geolocation-api/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">geolocation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and even understand the </span><a href="https://w3c.github.io/deviceorientation/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">orientation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> of the user’s device.</span></span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><a href="https://www.html5rocks.com/en/tutorials/websockets/basics/">WebSocket</a> landed on the platform the same year, heralding a change in the types of experiences developers could deliver on the web. No longer did they have to use long polling to enable a bi-directional channel between the user and a service; developers now had a two-way channel with a simple API to provide real-time communication. </span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div style="text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/CvKHIVFI2w8/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/CvKHIVFI2w8?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> <div style="text-align: center;"> <i style="text-align: center;">Plink is an interactive music experiment synchronising player state via websockets.</i> </div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <div style="text-align: center;"> <span style="font-size: 14.6667px; white-space: pre-wrap;"><br /></span></div> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Four major APIs came to Chrome in 2011. </span><a href="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.html5rocks.com/en/tutorials/webaudio/intro/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Web Audio</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and the </span><a href="https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Fullscreen API</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> let us build rich and immersive experiences that could take advantage of the entire screen. </span><a href="https://w3c.github.io/IndexedDB/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">IndexedDB</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;"> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/EK4rLaGmObU/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/EK4rLaGmObU?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> </div> <div style="text-align: center;"> <i style="text-align: center;">Chrome Web Lab was an experiment that bridged the physical and digital worlds. It used Web Socket, video, real-time streaming, WebGL, and Web Audio to create an immersive world.</i></div> <br /> <div style="text-align: center;"> <span style="font-size: x-small; font-weight: 700;"><br /></span></div> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">A bumper year for game-changing experiences on the web arrived in 2012. On the back of </span><a href="https://www.khronos.org/webgl/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://fullscreen.spec.whatwg.org/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Fullscreen</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">, the </span><a href="https://www.w3.org/TR/pointerlock/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Lock</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://w3c.github.io/gamepad/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Gamepad</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs let us build games and other web experiences that felt really interactive. The game-changing collection of </span><a href="https://www.html5rocks.com/en/tutorials/webrtc/basics/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebRTC</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs truly set the web apart from all of the other platforms: It let us build P2P video-chat and real-time data sharing, without any plug-ins or proprietary stack, and accessible by simply clicking a link.</span><br /> <div style="text-align: center;"> <br /></div> </div> </div> <div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s1600/Paul_WebRTC_Screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s400/Paul_WebRTC_Screenshot.png" style="border: 1px solid black; margin-bottom: 0px; max-width: 300px;" width="240" /></a></div> <div style="margin-top: 0.2em; text-align: center;"> <i style="text-align: center;">One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)</i></div> <br /> <div style="line-height: 1.38;"> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">In just seven years, the web changed drastically. Browsers got significantly faster and more capable, letting developers build richer experiences on the desktop. Users started to consume even more content on mobile, meaning we all had to rethink how our experiences would work across devices and form-factors, even when the user had no connectivity.</span></div> <br /> <div 0pt="" mardir="ltr" margin-bottom:="" style="gin-top: =; line-height: 1.38;"> <div> <div 0pt="" margin-bottom:="" margin-top:=""> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <h2> <span style="font-family: inherit;">2015-2018: PWA, The Extensible Web, and deeper integration era</span></h2> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> asked browser engineers to consider a layered platform that offered lower-level primitives that were easier to explain, more efficient to implement, and allowed web developers to easily build higher-level abstractions, thus increasing the cadence and availability of compelling new features. </span><a href="https://developers.google.com/web/fundamentals/primers/service-workers/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Service Worker</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is an example of building on these APIs to follow these principles. Service Worker is a small piece of JavaScript that sits between the browser and the network, and lets the developer decide what to do with any web requests.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The combination of Service Worker and a handful of new APIs allowed marked the beginning of the Progressive Web Apps (PWA) era. PWAs are high-quality sites that combine the reach of the web with the user expectations that come with native platforms. Specifically, PWAs are...</span></span></span></div> <ul style="font-size: 11pt; line-height: 1.40 !important;"> <li style="line-height: 1.40 !important;"><b>Fast</b>—they load instantly</li> <li style="line-height: 1.40 !important;"><b>Reliable</b>—they never show the “<a href="https://twitter.com/ChromiumDev/status/966800777338671105">downasaur</a>,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs</li> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <li style="line-height: 1.40 !important;"><b>Engaging</b>—they respond quickly to user interactions with silky-smooth animations and no janky scrolling</li> <li style="line-height: 1.40 !important;"><b>Capable</b>—the sites feel like natural extensions on the device, with immersive user experiences provided by features such as “fullscreen” and standalone mode through Web App Manifest; they deliver capabilities for meeting specific business goals, such as re-engagement through the Add to Homescreen feature and Web Push notifications</li> </span></ul> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <span style="font-family: inherit;"></span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">As PWAs became more established, so did the capabilities of the platform. The </span><a href="https://developers.google.com/web/updates/2015/12/background-sync" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Background Sync API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> brought increased opportunities for developers to improve the resilience of their applications. We also got a better understanding of the network capabilities with extensions to the </span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Network Information API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><a href="https://developers.google.com/web/updates/2016/10/pointer-events" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Events</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, a critical component for any web site or app, came to Chrome after a long wait. Pointer Events presented a unified model for handling all forms of gesture-based input, ranging from touch to pens to mouse pointers.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived.. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2016/12/imagecapture" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Image Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://developers.google.com/web/updates/2016/10/capture-stream" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Media Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The </span><a href="https://developers.google.com/web/updates/2016/09/navigator-share" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Share API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let sites share data directly with the operating system’s native sharing systems.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Bluetooth API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let a user securely select a Bluetooth LE device and have a webpage interact with the device. The </span><a href="https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web USB API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> enabled the same level of connectivity, but to devices connected to the user's machine. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> <br /><a href="https://webassembly.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebAssembly</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (WASM) opens up many possibilities. It brings a runtime that can execute code at near-native performance. Plus, it opens a new world of experiences on the web by letting developers use existing codebases built for other platforms on the web platform.</span></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/BnYq7JapeDA/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/BnYq7JapeDA?feature=player_embedded" width="600"></iframe><br /> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <br /></div> <div> <span style="color: #1155cc; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://webvr.info/" style="font-family: inherit; font-size: 11pt; text-decoration-line: none; white-space: pre-wrap;">Web VR</a></span><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> came to the web at roughly the same time it came to native platforms. It let us deliver immersive experiences without installing an app, significantly reducing the gap between a new native primitive arriving on platforms and being available across the web platform.</span></div> <div> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Forward to the future</span></h2> <span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">We’re excited about the possibilities of the web platform. The web can (and should) be feature-rich, but new capabilities don't always have to be more complex. Web development should be predictable, manageable, and pain-free. Coming APIs such as </span><a href="https://developers.google.com/web/updates/2018/06/feature-policy" style="font-family: inherit;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Feature Policy</span></a><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> are great examples of additions that will help developers create amazing sites in a more predictable way, and provide more control and customization over the UX of certain browser features. Feature Policy is the browser's built-in guide rails to help web developers avoid common pitfalls and use best practices.</span><span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"></span><br /> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><a href="https://www.youtube.com/watch?v=dVd8KRLbAx4" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Layered APIs</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is another initiative that we're excited about. With it, developers will be able to load and use high-level features shipped directly into the browser as JS modules. For example, instead of building a custom virtualize-scrolling component, developers can just import and use <virtual-scroller> in a site. Layered APIs can be quickly iterated on by the standards bodies and implemented by browser vendors, and will help create a pay-as-you-go standard library for the web. And looking further, the Houdini and Web XR APIs will radically change experiences we can build on and with the web.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Zu6MXyfi-Ts/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/Zu6MXyfi-Ts?feature=player_embedded" width="600"></iframe></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><br /></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Over the last 10 years, we’ve seen a massive increase in the rate at which new primitives and capabilities can be introduced to the web. We can thank all the browser vendors for their continued work to create and iterate on specs, using streamlined processes like those defined by the </span><a href="https://www.w3.org/community/wicg/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WICG</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and based on the principles in the </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web Manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. We’ll continue our commitment to work with browser vendors and the developer ecosystem to prioritize features that users need, and to ensure that those capabilities arrive in a “webby” way. By doing so, we can uphold our original mission, while also prioritizing user safety, discoverability, instant access, and universal reach for everyone on the planet.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Here’s to the future of an even-more-capable open web.</span></span></span><br /> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span style="font-size: 14.6667px;">Posted by Paul Kinlan, the Wizzy Web Warrior.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </script> <noscript> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">When we </span><a href="http://www.scottmccloud.com/googlechrome/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">introduced Chrome</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> in 2008, our goal was to “keep evolving with the web and continuing to build a solid foundation for modern web applications.” In honor of our tenth year, we’d like to highlight some of the major changes in the web’s rich capabilities that we feel lucky to share with other browser vendors.</span></div> <b id="docs-internal-guid-d53e4590-7fff-6f45-264d-e3c8bfe9586c" style="font-weight: normal;"><span style="font-family: inherit;"><br /></span></b> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">As the very first pages were served on the open web in </span><a href="http://info.cern.ch/hypertext/WWW/TheProject.html" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">1990</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, people recognized that the ability to deliver dynamic content would make the web unique—you could provide information and function just by sharing a URL. The </span><a href="https://en.wikipedia.org/wiki/Common_Gateway_Interface" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Common Gateway Interface</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> standard released in 1993 defined a simple interface for web servers to run code in response to web requests. It brought a new era of experience and capability to computing, accessible at the click of a link. Hop forward two short years to JavaScript, then another year to frames, specifically the <iframe> tag. These innovations let developers dynamically load content into pages, brought a new level of interactivity to the web, and increased user expectations of what could be done in the browser. </span></span></div> <span style="font-family: inherit;"><br /></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Accessibility, linkability, indexability, and universal reach have always been the web’s core strengths. Alongside these super powers, users want ever richer and more-engaging experiences. “</span><a href="https://en.wikipedia.org/wiki/Ajax_(programming)" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Ajax</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">” was coined in 2005 to describe the combination of asynchronous JavaScript and XML, which shaped a more interactive, modern web. It led to the creation of such services as Google Maps, cementing the web as the best way to deliver experiences available to anyone, on any device.</span></span></div> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2> <br /></h2> <h2> <br /></h2> <h2> 2008 – 2014: Web applications, HTML5, and the start of the mobile era</h2> <div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Chrome saw huge progress in its early years, with a large number of what are now considered “core APIs” coming to the web after the WebKit implementation. The </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">video</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.w3.org/TR/2011/WD-html5-20110113/video.html#audio" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">audio</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and </span><a href="https://www.w3.org/TR/2dcontext/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">canvas</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> elements were some of the first “modern web” features that many of us distinctly remember (and who can forget border-radius?). These features brought a new level of interaction to web experiences, and meant developers no longer needed plugins such as Adobe Flash or Java, to build interactive media and graphical experiences. </span><a href="https://experiments.withgoogle.com/collection/chrome" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Chrome experiments</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> have captured great examples of rich experiences that are a direct result of the web’s improved performance.</span></span></span></div> <span style="font-family: inherit;"><span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"> </span></span> </span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-eb904851-7fff-364b-b59b-d1d01308e81c"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The “Mobile Web” really hit the world in 2010, and we saw a slew of new platform primitives introduced for the platform (many inspired directly by </span><a href="https://web.archive.org/web/20090317170140/http://code.google.com/apis/gears/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Google Gears</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">) to help make building web apps easier. We could now make responsive, offline-enabled applications with </span><a href="https://www.html5rocks.com/tutorials/appcache/beginner/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">AppCache</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://www.w3.org/TR/webdatabase/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebSQL</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, request permission to access the user's </span><a href="https://w3c.github.io/geolocation-api/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">geolocation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, and even understand the </span><a href="https://w3c.github.io/deviceorientation/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">orientation</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> of the user’s device.</span></span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><a href="https://www.html5rocks.com/en/tutorials/websockets/basics/">WebSocket</a> landed on the platform the same year, heralding a change in the types of experiences developers could deliver on the web. No longer did they have to use long polling to enable a bi-directional channel between the user and a service; developers now had a two-way channel with a simple API to provide real-time communication. </span></span><br /> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div style="text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/CvKHIVFI2w8/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/CvKHIVFI2w8?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> <div style="text-align: center;"> <i style="text-align: center;">Plink is an interactive music experiment synchronising player state via websockets.</i> </div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <div style="text-align: center;"> <span style="font-size: 14.6667px; white-space: pre-wrap;"><br /></span></div> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Four major APIs came to Chrome in 2011. </span><a href="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, </span><a href="https://www.html5rocks.com/en/tutorials/webaudio/intro/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Web Audio</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and the </span><a href="https://developers.google.com/web/updates/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Fullscreen API</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> let us build rich and immersive experiences that could take advantage of the entire screen. </span><a href="https://w3c.github.io/IndexedDB/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">IndexedDB</span></a><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.</span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;"> <br /> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/EK4rLaGmObU/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/EK4rLaGmObU?feature=player_embedded" style="margin: 0;" width="600"></iframe></div> </div> <div style="text-align: center;"> <i style="text-align: center;">Chrome Web Lab was an experiment that bridged the physical and digital worlds. It used Web Socket, video, real-time streaming, WebGL, and Web Audio to create an immersive world.</i></div> <br /> <div style="text-align: center;"> <span style="font-size: x-small; font-weight: 700;"><br /></span></div> <span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">A bumper year for game-changing experiences on the web arrived in 2012. On the back of </span><a href="https://www.khronos.org/webgl/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebGL</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://fullscreen.spec.whatwg.org/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Fullscreen</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">, the </span><a href="https://www.w3.org/TR/pointerlock/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Lock</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://w3c.github.io/gamepad/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Gamepad</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs let us build games and other web experiences that felt really interactive. The game-changing collection of </span><a href="https://www.html5rocks.com/en/tutorials/webrtc/basics/" style="font-family: inherit; text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebRTC</span></a><span style="color: black; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> APIs truly set the web apart from all of the other platforms: It let us build P2P video-chat and real-time data sharing, without any plug-ins or proprietary stack, and accessible by simply clicking a link.</span><br /> <div style="text-align: center;"> <br /></div> </div> </div> <div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s1600/Paul_WebRTC_Screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJZciH2lQnhTUtebYPC7P4OWBjvjFQNuWW88gN8DX7QjsraagbqQIX6geJxMWmSedkND5VfCEaj8FApsyk8nCopoSXBgJP3LQH37ZDXa-LRuiT_ebjL_Lqj76WjOrBGhqDg36ugLq3DnN/s400/Paul_WebRTC_Screenshot.png" style="border: 1px solid black; margin-bottom: 0px; max-width: 300px;" width="240" /></a></div> <div style="margin-top: 0.2em; text-align: center;"> <i style="text-align: center;">One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)</i></div> <br /> <div style="line-height: 1.38;"> <span style="font-family: inherit; font-size: 11pt; white-space: pre-wrap;">In just seven years, the web changed drastically. Browsers got significantly faster and more capable, letting developers build richer experiences on the desktop. Users started to consume even more content on mobile, meaning we all had to rethink how our experiences would work across devices and form-factors, even when the user had no connectivity.</span></div> <br /> <div 0pt="" mardir="ltr" margin-bottom:="" style="gin-top: =; line-height: 1.38;"> <div> <div 0pt="" margin-bottom:="" margin-top:=""> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span> <br /> <h2> <span style="font-family: inherit;">2015-2018: PWA, The Extensible Web, and deeper integration era</span></h2> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> asked browser engineers to consider a layered platform that offered lower-level primitives that were easier to explain, more efficient to implement, and allowed web developers to easily build higher-level abstractions, thus increasing the cadence and availability of compelling new features. </span><a href="https://developers.google.com/web/fundamentals/primers/service-workers/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Service Worker</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is an example of building on these APIs to follow these principles. Service Worker is a small piece of JavaScript that sits between the browser and the network, and lets the developer decide what to do with any web requests.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The combination of Service Worker and a handful of new APIs allowed marked the beginning of the Progressive Web Apps (PWA) era. PWAs are high-quality sites that combine the reach of the web with the user expectations that come with native platforms. Specifically, PWAs are...</span></span></span></div> <ul style="font-size: 11pt; line-height: 1.40 !important;"> <li style="line-height: 1.40 !important;"><b>Fast</b>—they load instantly</li> <li style="line-height: 1.40 !important;"><b>Reliable</b>—they never show the “<a href="https://twitter.com/ChromiumDev/status/966800777338671105">downasaur</a>,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs</li> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <li style="line-height: 1.40 !important;"><b>Engaging</b>—they respond quickly to user interactions with silky-smooth animations and no janky scrolling</li> <li style="line-height: 1.40 !important;"><b>Capable</b>—the sites feel like natural extensions on the device, with immersive user experiences provided by features such as “fullscreen” and standalone mode through Web App Manifest; they deliver capabilities for meeting specific business goals, such as re-engagement through the Add to Homescreen feature and Web Push notifications</li> </span></ul> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"> <span style="font-family: inherit;"></span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">As PWAs became more established, so did the capabilities of the platform. The </span><a href="https://developers.google.com/web/updates/2015/12/background-sync" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Background Sync API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> brought increased opportunities for developers to improve the resilience of their applications. We also got a better understanding of the network capabilities with extensions to the </span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Network Information API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><a href="https://developers.google.com/web/updates/2016/10/pointer-events" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Pointer Events</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">, a critical component for any web site or app, came to Chrome after a long wait. Pointer Events presented a unified model for handling all forms of gesture-based input, ranging from touch to pens to mouse pointers.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived.. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2016/12/imagecapture" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Image Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and </span><a href="https://developers.google.com/web/updates/2016/10/capture-stream" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Media Capture</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The </span><a href="https://developers.google.com/web/updates/2016/09/navigator-share" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Share API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let sites share data directly with the operating system’s native sharing systems.</span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> </span></span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">The </span><a href="https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web Bluetooth API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> let a user securely select a Bluetooth LE device and have a webpage interact with the device. The </span><a href="https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Web USB API</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> enabled the same level of connectivity, but to devices connected to the user's machine. </span></span></span></div> <span id="docs-internal-guid-003d9055-7fff-e125-fc5d-f624a0023e2e"><span style="font-family: inherit;"> <br /><a href="https://webassembly.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WebAssembly</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> (WASM) opens up many possibilities. It brings a runtime that can execute code at near-native performance. Plus, it opens a new world of experiences on the web by letting developers use existing codebases built for other platforms on the web platform.</span></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/BnYq7JapeDA/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/BnYq7JapeDA?feature=player_embedded" width="600"></iframe><br /> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <br /></div> <div> <span style="color: #1155cc; font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><a href="https://webvr.info/" style="font-family: inherit; font-size: 11pt; text-decoration-line: none; white-space: pre-wrap;">Web VR</a></span><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> came to the web at roughly the same time it came to native platforms. It let us deliver immersive experiences without installing an app, significantly reducing the gap between a new native primitive arriving on platforms and being available across the web platform.</span></div> <div> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;"><br /></span></h2> <h2> <span style="font-family: inherit;">Forward to the future</span></h2> <span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">We’re excited about the possibilities of the web platform. The web can (and should) be feature-rich, but new capabilities don't always have to be more complex. Web development should be predictable, manageable, and pain-free. Coming APIs such as </span><a href="https://developers.google.com/web/updates/2018/06/feature-policy" style="font-family: inherit;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Feature Policy</span></a><span style="font-family: inherit; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"> are great examples of additions that will help developers create amazing sites in a more predictable way, and provide more control and customization over the UX of certain browser features. Feature Policy is the browser's built-in guide rails to help web developers avoid common pitfalls and use best practices.</span><span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"></span><br /> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><a href="https://www.youtube.com/watch?v=dVd8KRLbAx4" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Layered APIs</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> is another initiative that we're excited about. With it, developers will be able to load and use high-level features shipped directly into the browser as JS modules. For example, instead of building a custom virtualize-scrolling component, developers can just import and use <virtual-scroller> in a site. Layered APIs can be quickly iterated on by the standards bodies and implemented by browser vendors, and will help create a pay-as-you-go standard library for the web. And looking further, the Houdini and Web XR APIs will radically change experiences we can build on and with the web.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div class="separator" style="clear: both; text-align: center;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Zu6MXyfi-Ts/0.jpg" frameborder="0" height="350" src="https://www.youtube.com/embed/Zu6MXyfi-Ts?feature=player_embedded" width="600"></iframe></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><br /></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">Over the last 10 years, we’ve seen a massive increase in the rate at which new primitives and capabilities can be introduced to the web. We can thank all the browser vendors for their continued work to create and iterate on specs, using streamlined processes like those defined by the </span><a href="https://www.w3.org/community/wicg/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">WICG</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"> and based on the principles in the </span><a href="https://extensiblewebmanifesto.org/" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;">Extensible Web Manifesto</span></a><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;">. We’ll continue our commitment to work with browser vendors and the developer ecosystem to prioritize features that users need, and to ensure that those capabilities arrive in a “webby” way. By doing so, we can uphold our original mission, while also prioritizing user safety, discoverability, instant access, and universal reach for everyone on the planet.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> <span style="font-family: inherit;"><br /></span></span><br /> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;">Here’s to the future of an even-more-capable open web.</span></span></span><br /> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span> <span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: inherit;"><span style="font-size: 14.6667px;">Posted by Paul Kinlan, the Wizzy Web Warrior.</span></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span> <br /> <div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <span id="docs-internal-guid-5e25db7c-7fff-c486-b8a9-04823d68f1e2"> </span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div> <span style="font-family: inherit;"><span style="font-size: 11pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-family: inherit; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> <div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"> <span style="font-family: inherit;"><span style="background-color: transparent; color: black; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div> </div> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://plus.google.com/116899029375914044550' itemprop='url'/> </span> </noscript> </div> </div> <div class='share'> <span class='twitter-custom social-wrapper' data-href='http://twitter.com/share?text=Chromium Blog:The ‘Capable Web’: A 10 Year Retrospective&url=https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html&via=ChromiumDev'> <img alt='Share on Twitter' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png' width='24'/> </span> <span class='fb-custom social-wrapper' data-href='https://www.facebook.com/sharer.php?u=https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html'> <img alt='Share on Facebook' height='24' src='https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png' width='24'/> </span> </div> <div class='post-footer'> <div class='cmt_iframe_holder' data-href='https://blog.chromium.org/2018/09/the-capable-web-10-year-retrospective.html' data-viewtype='FILTERED_POSTMOD'></div> <a href='https://plus.google.com/112374322230920073195' rel='author' style='display:none;'> Google </a> <div class='label-footer'> <span class='labels-caption'> Labels: </span> <span class='labels'> <a class='label' href='https://blog.chromium.org/search/label/10th%20birthday' rel='tag'> 10th birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/birthday' rel='tag'> birthday </a> , <a class='label' href='https://blog.chromium.org/search/label/capabilities' rel='tag'> capabilities </a> , <a class='label' href='https://blog.chromium.org/search/label/capable%20web' rel='tag'> capable web </a> , <a class='label' href='https://blog.chromium.org/search/label/chrome' rel='tag'> chrome </a> , <a class='label' href='https://blog.chromium.org/search/label/open%20web' rel='tag'> open web </a> </span> </div> </div> </div> <div class='blog-pager' id='blog-pager'> <a class='home-link' href='https://blog.chromium.org/'> <i class='material-icons'>  </i> </a> <i class='material-icons disabled'>  </i> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://blog.chromium.org/search/label/capabilities?updated-max=2018-09-04T10:47:00-07:00&max-results=20&start=6&by-date=false' id='Blog1_blog-pager-older-link' title='Older Posts'> <i class='material-icons'>  </i> </a> </span> </div> <div class='clear'></div> </div></div> </div> </div> <div class='col-right'> <div class='section' id='sidebar-top'><div class='widget HTML' data-version='1' id='HTML8'> <div class='widget-content'> <div class='searchBox'> <input type='text' title='Search This Blog' placeholder='Search blog ...' /> </div> </div> <div class='clear'></div> </div></div> <div id='aside'> <div class='section' id='sidebar'><div class='widget Label' data-version='1' id='Label1'> <div class='tab'> <img class='sidebar-icon' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYpJREFUeNrs2aFuwzAQBmAvKRkMKRjZA4QMDJaWFgyMjuzFRg37DIUlA3uFkoGQSaWzJU+tpri5O9+l/zSfdFJlpe59yTmyVedq1PjfcZMZ70NuQnaF8w8htyE/rABtpviXkLcK88c5HhLkMBfgVan43zfFBNGMjHVGT/s55KP2pAvidbGHd+nzKt1RKSLG3rKF1iPFv6UWiPke8i7kEqGdGsI1O+LYVdqJAjgirwkKYD0ytkJBUNbAMvX8V3q9PhUsYvU1sWD8SO/sQvx2ahxOiNoJCSBCoAHYCEQAC4EKICOQASQEOmAS8RcAFxFN5hiIiugpgC3wk9hQAHH/70EBHXUN7IER5EWMiBgo2+nzOKQv9SCAeEM/OQAkhE/ncccFICB87qzQMia5FsJfOui0zMnmRvipU1ormHQuxGTxUsAcCFLxJQBLBLn4UoAFglW8BkATwS5eC6CBEBWvCShBiIvXBkgQRcVbADiI4uKtABSESvGWgB9EzHt3+tNwyO0qa9SoIYtvAQYAqDJhaWWeMecAAAAASUVORK5CYII='/> <h2> Labels </h2> <i class='material-icons arrow'>  </i> </div> <div class='widget-content list-label-widget-content'> <ul> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/%24200K'> $200K </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/10th%20birthday'> 10th birthday </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/abusive%20ads'> abusive ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/abusive%20notifications'> abusive notifications </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/accessibility'> accessibility </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ad%20blockers'> ad blockers </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ad%20blocking'> ad blocking </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/advanced%20capabilities'> advanced capabilities </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/android'> android </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/anti%20abuse'> anti abuse </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/anti-deception'> anti-deception </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/background%20periodic%20sync'> background periodic sync </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/badging'> badging </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/benchmarks'> benchmarks </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/beta'> beta </a> <span dir='ltr'> 83 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/better%20ads%20standards'> better ads standards </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/billing'> billing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/birthday'> birthday </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/blink'> blink </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/browser'> browser </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/browser%20interoperability'> browser interoperability </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/bundles'> bundles </a> <span dir='ltr'> 1 </span> </li> <li> <span dir='ltr'> capabilities </span> <span dir='ltr'> 6 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/capable%20web'> capable web </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cds'> cds </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cds18'> cds18 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cds2018'> cds2018 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome'> chrome </a> <span dir='ltr'> 35 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%2081'> chrome 81 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%2083'> chrome 83 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%2084'> chrome 84 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20ads'> chrome ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20apps'> chrome apps </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20dev'> Chrome dev </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20dev%20summit'> chrome dev summit </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20dev%20summit%202018'> chrome dev summit 2018 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20dev%20summit%202019'> chrome dev summit 2019 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20developer'> chrome developer </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20Developer%20Center'> Chrome Developer Center </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20developer%20summit'> chrome developer summit </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20devtools'> chrome devtools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20extension'> Chrome extension </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20extensions'> chrome extensions </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20Frame'> Chrome Frame </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20lite'> Chrome lite </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20on%20Android'> Chrome on Android </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20on%20ios'> chrome on ios </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20on%20Mac'> Chrome on Mac </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Chrome%20OS'> Chrome OS </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20privacy'> chrome privacy </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20releases'> chrome releases </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20security'> chrome security </a> <span dir='ltr'> 10 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chrome%20web%20store'> chrome web store </a> <span dir='ltr'> 32 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromedevtools'> chromedevtools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromeframe'> chromeframe </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromeos'> chromeos </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromeos.dev'> chromeos.dev </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/chromium'> chromium </a> <span dir='ltr'> 9 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cloud%20print'> cloud print </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/coalition'> coalition </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/coalition%20for%20better%20ads'> coalition for better ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/contact%20picker'> contact picker </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/content%20indexing'> content indexing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cookies'> cookies </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/core%20web%20vitals'> core web vitals </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/csrf'> csrf </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/css'> css </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/cumulative%20layout%20shift'> cumulative layout shift </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/custom%20tabs'> custom tabs </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/dart'> dart </a> <span dir='ltr'> 8 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/dashboard'> dashboard </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Data%20Saver'> Data Saver </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Data%20saver%20desktop%20extension'> Data saver desktop extension </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/day%202'> day 2 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/deceptive%20installation'> deceptive installation </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/declarative%20net%20request%20api'> declarative net request api </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/design'> design </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/developer%20dashboard'> developer dashboard </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Developer%20Program%20Policy'> Developer Program Policy </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/developer%20website'> developer website </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/devtools'> devtools </a> <span dir='ltr'> 13 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/digital%20event'> digital event </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/discoverability'> discoverability </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/DNS-over-HTTPS'> DNS-over-HTTPS </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/DoH'> DoH </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/emoji'> emoji </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/emscriptem'> emscriptem </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/enterprise'> enterprise </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/extensions'> extensions </a> <span dir='ltr'> 27 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Fast%20badging'> Fast badging </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/faster%20web'> faster web </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/features'> features </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/feedback'> feedback </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/field%20data'> field data </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/first%20input%20delay'> first input delay </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Follow'> Follow </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/fonts'> fonts </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/form%20controls'> form controls </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/frameworks'> frameworks </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/fugu'> fugu </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/fund'> fund </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/funding'> funding </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/gdd'> gdd </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20earth'> google earth </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20event'> google event </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20io%202019'> google io 2019 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/google%20web%20developer'> google web developer </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/googlechrome'> googlechrome </a> <span dir='ltr'> 12 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/harmful%20ads'> harmful ads </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/html5'> html5 </a> <span dir='ltr'> 11 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/HTTP%2F3'> HTTP/3 </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/HTTPS'> HTTPS </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/iframes'> iframes </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/images'> images </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/incognito'> incognito </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/insecure%20forms'> insecure forms </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/intent%20to%20explain'> intent to explain </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ios'> ios </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ios%20Chrome'> ios Chrome </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/issue%20tracker'> issue tracker </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/jank'> jank </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/javascript'> javascript </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lab%20data'> lab data </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/labelling'> labelling </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/largest%20contentful%20paint'> largest contentful paint </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/launch'> launch </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lazy-loading'> lazy-loading </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lighthouse'> lighthouse </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/linux'> linux </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Lite%20Mode'> Lite Mode </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Lite%20pages'> Lite pages </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/loading%20interventions'> loading interventions </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/loading%20optimizations'> loading optimizations </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/lock%20icon'> lock icon </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/long-tail'> long-tail </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/mac'> mac </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/manifest%20v3'> manifest v3 </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/metrics'> metrics </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/microsoft%20edge'> microsoft edge </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/mixed%20forms'> mixed forms </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/mobile'> mobile </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/na'> na </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/native%20client'> native client </a> <span dir='ltr'> 8 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/native%20file%20system'> native file system </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/New%20Features'> New Features </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/notifications'> notifications </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/octane'> octane </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/open%20web'> open web </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/origin%20trials'> origin trials </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/pagespeed%20insights'> pagespeed insights </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/pagespeedinsights'> pagespeedinsights </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/passwords'> passwords </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/payment%20handler'> payment handler </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/payment%20request'> payment request </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/payments'> payments </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/performance'> performance </a> <span dir='ltr'> 20 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/performance%20tools'> performance tools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/permission%20UI'> permission UI </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/permissions'> permissions </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/play%20store'> play store </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/portals'> portals </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/prefetching'> prefetching </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/privacy'> privacy </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/privacy%20sandbox'> privacy sandbox </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/private%20prefetch%20proxy'> private prefetch proxy </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/profile%20guided%20optimization'> profile guided optimization </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/progressive%20web%20apps'> progressive web apps </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Project%20Strobe'> Project Strobe </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/protection'> protection </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/pwa'> pwa </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/QUIC'> QUIC </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/quieter%20permissions'> quieter permissions </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/releases'> releases </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/removals'> removals </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/rlz'> rlz </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/root%20program'> root program </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/safe%20browsing'> safe browsing </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/Secure%20DNS'> Secure DNS </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/security'> security </a> <span dir='ltr'> 36 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/site%20isolation'> site isolation </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/slow%20loading'> slow loading </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/sms%20receiver'> sms receiver </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/spam%20policy'> spam policy </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/spdy'> spdy </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/spectre'> spectre </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/speed'> speed </a> <span dir='ltr'> 4 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/ssl'> ssl </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/store%20listing'> store listing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/strobe'> strobe </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/subscription%20pages'> subscription pages </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/suspicious%20site%20reporter%20extension'> suspicious site reporter extension </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/TCP'> TCP </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/the%20fast%20and%20the%20curious'> the fast and the curious </a> <span dir='ltr'> 23 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/TLS'> TLS </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/tools'> tools </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/tracing'> tracing </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/transparency'> transparency </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/trusted%20web%20activities'> trusted web activities </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/twa'> twa </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/user%20agent%20string'> user agent string </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/user%20data%20policy'> user data policy </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/v8'> v8 </a> <span dir='ltr'> 6 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/video'> video </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/wasm'> wasm </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web'> web </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20apps'> web apps </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20assembly'> web assembly </a> <span dir='ltr'> 2 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20developers'> web developers </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20intents'> web intents </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20packaging'> web packaging </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20payments'> web payments </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20platform'> web platform </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20request%20api'> web request api </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web%20vitals'> web vitals </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web.dev'> web.dev </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/web.dev%20live'> web.dev live </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webapi'> webapi </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webassembly'> webassembly </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webaudio'> webaudio </a> <span dir='ltr'> 3 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webgl'> webgl </a> <span dir='ltr'> 7 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webkit'> webkit </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/WebM'> WebM </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webmaster'> webmaster </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webp'> webp </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webrtc'> webrtc </a> <span dir='ltr'> 6 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/websockets'> websockets </a> <span dir='ltr'> 5 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/webtiming'> webtiming </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/writable-files'> writable-files </a> <span dir='ltr'> 1 </span> </li> <li> <a dir='ltr' href='https://blog.chromium.org/search/label/yerba%20beuna%20center%20for%20the%20arts'> yerba beuna center for the arts </a> <span dir='ltr'> 1 </span> </li> </ul> <div class='clear'></div> </div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <div class='tab'> <i class='material-icons icon'>  </i> <h2> Archive </h2> <i class='material-icons arrow'>  </i> </div> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy toggle-open'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2024/'> 2024 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate expanded'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2024/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2023/'> 2023 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2023/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2022/'> 2022 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2022/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2021/'> 2021 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2021/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2020/'> 2020 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2020/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2019/'> 2019 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2019/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2018/'> 2018 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2018/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2017/'> 2017 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2017/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2016/'> 2016 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2016/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2015/'> 2015 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2015/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2014/'> 2014 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2014/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2013/'> 2013 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2013/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2012/'> 2012 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2012/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2011/'> 2011 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2011/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2010/'> 2010 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2010/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2009/'> 2009 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/08/'> Aug </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/07/'> Jul </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/06/'> Jun </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/05/'> May </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/04/'> Apr </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/03/'> Mar </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/02/'> Feb </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2009/01/'> Jan </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class='intervalToggle'> <span class='new-toggle' href='javascript:void(0)'> <i class='material-icons arrow'>  </i> </span> <a class='toggle' href='javascript:void(0)' style='display: none'> <span class='zippy'> <i class='material-icons'>  </i>   </span> </a> <a class='post-count-link' href='https://blog.chromium.org/2008/'> 2008 </a> </div> <div class='items'> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/12/'> Dec </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/11/'> Nov </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/10/'> Oct </a> </div> <div class='items'> </div> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <div class=''> <a class='post-count-link' href='https://blog.chromium.org/2008/09/'> Sep </a> </div> <div class='items'> </div> </li> </ul> </div> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML6'> <div class='widget-content'> <a href="http://blog.chromium.org/atom.xml"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAihJREFUeNrsWa9Pw0AU7viRMDFRBAkzJDMIBIhJJhCzk7NILIqMv4AEhdz+BCY3OYssAlGBoAJREpZwAlHEBO8lr8nSvNeVbu1dyX3JlzTrXfa+u/e9d7c5joWFhYVO1Fa8PwH2gK6m+BRwAvSlAdsrgr8E1jUuMH73GTAEzrkBWymTewZlihhLmgDXIAFuHgGVQOUF7OSYM1p6PgTuA1vAZlUEvAnPdapcMY0VICECekQ0XRfYrqoHsAGNgXfAoMomRiFDEhOZkkL3S88hMaB2LwXp0bj+ps2edpToZpjfoIDQtBeU+xjoDzP2G/gCPKZ5f8WsCAFJoJgOCcFdWSTeL9YQMSvTA1h9BkI5jaiXhLpSCL/8mVZY0UpyJ9ZdOkniu1dmJ96BpzQu9w6s28gcOq9j6pwLdR8/36NK5CQKwJSMrb2MhhSglBpt4UjsrdsnNu0B3J0HCozbCc4TjyY2srEgos/4RQljCzNxl4ireQD8FOq+T+W0mTB2g7njhlR+Sy2jsXFvU658U8YTbeaGpdIu7mWkEAq5ZtIjIhFZdtfX7QHckSvB2B6zC3VdAkZk0kAQwaXTk/CzTXK3wjIExCs6ZJpTnE4uY1KV+KzFzA3KTiFPENHJkOPcsfpLhwe4btoSuvUqAR+6TOxlCE6ZfKUsJLgsqGW8OpqAGx2X+sLxrwUog+JUeQRMDBIwyXOcnlPtPnL0/UsT/8LnOxYWFhZG4leAAQAAQHEaYuzHbAAAAABJRU5ErkJggg==" class="sidebar-icon" /> <h2>Feed</h2> </a> </div> <div class='clear'></div> </div></div> <div class='section' id='sidebar-bottom'><div class='widget HTML' data-version='1' id='HTML4'> <div class='widget-content'> <div class="share followgooglewrapper"> <button data-href="https://twitter.com/intent/follow?original_referer=http://blog.chromium.org/&screen_name=ChromiumDev" onclick='sharingPopup(this);' id='twitter-share'><span class="twitter-follow">Follow @ChromiumDev</span></button> <script> function sharingPopup (button) { var url = button.getAttribute("data-href"); window.open( url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes'); } </script> </div> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML1'> <div class='widget-content'> Give us feedback in our <a href="http://support.google.com/bin/static.py?hl=en&page=portal_groups.cs">Product Forums</a>. </div> <div class='clear'></div> </div></div> </div> </div> <div style='clear:both;'></div> </div>  <div class='google-footer-outer loading'> <div id='google-footer'> <a href='//www.google.com/'> <img class='google-logo-dark' height='36' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAABICAYAAABFoT/eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACLVJREFUeNrsXd+L20YQ3vOprdLqiMXFXE2qB7dcwEcTSB7ykIc+9A/PQx/yEMq1TWhNuYIpJriNr7XpmZ5IxFEvmW2EKs3Ornb1w50PxIFP0kiz387OzM6uhGAwGAxGP3Ho+f7x7ri1O7LdccPqZjSNA4dEHsLfaHcEFedJom93x9Xu2OyOFTcBo6sED3fHZHeMEELrkAHJF0B8Rr+gDFsZ5n0luLTQ95AXs4W06D/tjpR50xtM4CjD0y48YGB4rnyZxNOzyA7zBHr+nLnDaJLg0mo/ALekCasg3Z4XbM0ZdTEgnDPeHY8bIne+Qz2GvwyGNwsuyT218KWvIIBMcwGpLiipcolecjMxfBDchNyS1EvxLiOSIecp31q6IJ/C3yrIrMqMm4jhg+AxkdwbIO3aUO4KjqqMjCT3uaazMBhWBJfuxH3CtRfiXf66DhSRZWbmlMnNaILgZxrXJQO/eO3wORZwvwm4JUxuhheCjzVBYAbW1ces45YDSoZrFNOEE835M8FT6oyeEnws8Fz3QnBxFKPHBMem4GU+m6fPGb0leCTwWcM5B36MPgeZI01gudyDdw3hPeXfo8L/rmCUWnuMMdqUL2WqWeRbhf+twfVsO7YagZGNC79fw7OthEVtkiJ4jJzTd3KPwf3CRqhhiTu23AP5sl0/0xiwISQXpNwLIJK87mHF+U8ddzzdmgKlGzlPYjyxGJQouIhNT4k9AqWEFkqfguIvagTWbcq3KW1WE3xS3m8NtA9WS451xofwjKT5kkDoK/b6mDk5FfXr1lWDL4BofZEv2/SRsK/EHGlGdBdu8QNRb8HMCFwt7Yy3DDI/QP7fx5z3VLhdlJEIs4rKNuXXJXdxZPdB7kfCzWqwCO4V1LHgLjInX3tQ1KzCR52Cz+vDj1dydeRuS74rcvs2Pi6fT5H8OaaUQPQPYcWwRSGXyhhscn5dpAnEFMkuEZetbfkTAnlSuH4DxisE+aMGeJAQ3lFl7C4LJE6QWCaCd583ORQ1jYAwjFctal7nOs2ZZvicwvlZx+RHGrcoAwKUVX8uwcc/9TT65INeDOr5shL9LDRB6QTeIy3zwfdh3WOi6axLCEhSjXU7F3h6LqggUtvyJxpynwu8tDkD98fXApOxRj8zoZ9MnGveYVIVZKaGrkBXCY65BCYNN9NkjpKOyQ81Q79JgdxS+Jn3SDTEXRI7SWzaiSTB32oI3nU3BvMfM0urhOVYgwKhuiAfc4tM07wXwm1ZRoQYSl2NUwiu01fEAHVcpixd745FvVz4dzUUc0o8rwoLy8ZSwU6CyFx1RP5II9+1bFPEFs9HWbNLiimDXE+vCm7u1CS47cofzD3aEhVY57mxRo5zlqdt+RFC1JUH2S7bcVXg4liTMakaBZZVxiTICRoivcn1sEUBlk24JmaC6kxUbYmWoqvyfck2xZGGnDFYa9MMzkYQ1ijkCX6qidybrgePiQ0QIQqoi6qRLeqQfIoRsEHaQJLBdHOnLGetSdm/IPcymJuS1PAnbQPH0MOw/39C1vL11DiLOqIsbDI8QcHvGiLnySi2qUXBicaqUSxN5LEB0g7Jt3ENXJLPJ5S1tnaZBoWbpRqrmjRE7qHmpSmNHdQcYrEUadoh+TbBnc9ri7iycI1kzPeNcLDIvbiqXpez9Tmdq6zGREPuzECBoxrPMiI2WtvyNwhJba2wy3JZ6ky5dD1lSvmZS3e4SPA1wcf1VTFHKX+cGwZzdUYcqpvUtvwrD/InDttVlyZeAKlNN5MKbAiurHhKIPlUuJvlTCCiDjSKSCsUmCFWbGLZwCESfK07JB8LvMYWVtw0D00JEHV8Mq2HkqPbE0oHLvvK2g0o8ETg+4cfwTlZDT9JDoWygu4uQQE/ivIvtcnfPkaCqhiupz7jWOAzqL/vjtcdkv9G4MVMt+EaylfuImiPAXEUjRF3pjjaHiPPZ6If9TGGAO4ZY0am6jOCb+DQ+ZCqLkIpOIPrdNfIjnFPY6nyFut7TS/fanrziOBOKMupKw94WaLMtuVnSFt9CPrWWdJE6PeltCX432DEBoh+5Dv8RRhdis8YAv9uyq4/JAwtlEApgBe9Cw9xDD3tdk4Jn0MDfiHwPHcRPxBePCMER3GuIx7kGlv9fkZ4V9lolx2Uv4X7hEj7qJ3LDoAMGbTRMRibu4L2xQ8bgt8AyU+Q+x7nYrvDnH4iuO5LxKsYwPVbkPMvKF9Zky9wXzRfVWizi62r9X5VHf55h+WHhDjGBZ4WRhyTr6z5SlCoLMxLSpBZFsQ9F80uQFbF/6aFWi+Ev51vzzsuX+msyzuQXXjUz8zEBy+zpq9yweXAoxJW4JbYrDS6gYDqGHxPl+TKeiBfxj9/EBIElPYeOA4y8/qRQfknjvSzgRgtq0Pw/M1eQeMdOSb2Bnrhr6Led+1vcp2x7oTFHMnedFW+Ivlty062BUt74oHgSj+vHepnhunn0JJAMtBZgDI/qmGtMujRv8DDpo47zBJ8UtPOuAR/7rKn8t9AJ0tBdmBAmJ/Fu71yxp4I3qh+DhyRqbi5Y1ShVPlSb8X7bRNcfgZFl+WRGYo7uecrWq1r8X5bhmzP5OdlDwsGRm1suSxkg5rYm7ConyGQ3Zl+DgSD8V/kPwrWBMG9YcBtyShBnTLdTiHgttw7qAW7cqh/ZnmPKr/6ignOaKsdyxbsToT5UkPsW00bJjijDXficcX/JsLs6w2BwGtherdckH3w/kNXRPVI0OqJQoHX42/66IMfMj/2huRjxIidgKV/W0JS+bsstDoTeAHcrI8E5zTh/sDkqxL5rZup55/3USlswfcHf4IrQplVDgW9XFlOqnwr6pVPMMEZTuC60EttvdzbLbaZ4PsFVa3nohhO+vW+yn/ZB2fUhpysmQrzBcTSai9EszuZMcEZ1lCFVrp9zGXhm69iLyY4oxFIa178lPe12I/P2DAYDAaDwWAwGAwGg8FgMBgMBoPBYDD2Cf8IMADDRGoQTe+E9AAAAABJRU5ErkJggg==' style='margin-top: -16px;' width='92'/> </a> <ul> <li> <a href='//www.google.com/'> Google </a> </li> <li> <a href='//www.google.com/policies/privacy/'> Privacy </a> </li> <li> <a href='//www.google.com/policies/terms/'> Terms </a> </li> </ul> </div> </div> <script type='text/javascript'> //<![CDATA[ // Social sharing popups. var postEl = document.getElementsByClassName('social-wrapper'); var postCount = postEl.length; for(i=0; i<postCount;i++){ postEl[i].addEventListener("click", function(event){ var postUrl = this.getAttribute("data-href"); window.open( postUrl,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes'); });} //]]> </script> <script type='text/javascript'> //<![CDATA[ var BreakpointHandler = function() { this.initted = false; this.isHomePage = false; this.isMobile = false; }; BreakpointHandler.prototype.finalizeSummary = function(summaryHtml, lastNode) { // Use $.trim for IE8 compatibility summaryHtml = $.trim(summaryHtml).replace(/(<br>|\s)+$/,''); if (lastNode.nodeType == 3) { var lastChar = summaryHtml.slice(-1); if (!lastChar.match(/[.”"?]/)) { if (!lastChar.match(/[A-Za-z]/)) { summaryHtml = summaryHtml.slice(0, -1); } summaryHtml += ' ...'; } } else if (lastNode.nodeType == 1 && (lastNode.nodeName == 'I' || lastNode.nodeName == 'A')) { summaryHtml += ' ...'; } return summaryHtml; }; BreakpointHandler.prototype.generateSummaryFromContent = function(content, numWords) { var seenWords = 0; var summaryHtml = ''; for (var i=0; i < content.childNodes.length; i++) { var node = content.childNodes[i]; var nodeText; if (node.nodeType == 1) { if (node.hasAttribute('data-about-pullquote')) { continue; } nodeText = node.textContent; if (nodeText === undefined) { // innerText for IE8 nodeText = node.innerText; } if (node.nodeName == 'DIV' || node.nodeName == 'B') { // Don't end early if we haven't seen enough words. if (seenWords < 10) { continue; } if (i > 0) { summaryHtml = this.finalizeSummary(summaryHtml, content.childNodes[i-1]); } break; } summaryHtml += node.outerHTML; } else if (node.nodeType == 3) { nodeText = node.nodeValue; summaryHtml += nodeText + ' '; } var words = nodeText.match(/\S+\s*/g); if (!words) { continue; } var remain = numWords - seenWords; if (words.length >= remain) { summaryHtml = this.finalizeSummary(summaryHtml, node); break; } seenWords += words.length; } return summaryHtml; }; BreakpointHandler.prototype.detect = function() { var match, pl = /\+/g, search = /([^&=]+)=?([^&]*)/g, decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, query = window.location.search.substring(1); var urlParams = {}; while (match = search.exec(query)) urlParams[decode(match[1])] = decode(match[2]); this.isListPage = $('html').hasClass('list-page'); this.isMobile = urlParams['m'] === '1'; this.isHomePage = window.location.pathname == '/'; }; BreakpointHandler.prototype.initContent = function() { var self = this; $('.post').each(function(index) { var body = $(this).children('.post-body')[0]; var content = $(body).children('.post-content')[0]; $(content).addClass('post-original'); var data = $(content).children('script').html(); data = self.rewriteForSSL(data); // If exists, extract specified editor's preview. var match = data.match(/([\s\S]+?)<div data-is-preview.+?>([\s\S]+)<\/div>/m); if (match) { data = match[1]; } // Prevent big images from loading when they aren't needed. // This must be done as a pre-injection step, since image loading can't be // canceled once embedded into the DOM. if (self.isListPage && self.isMobile) { data = data.replace(/<(img|iframe) .+?>/g, ''); } // Insert template to be rendered as nodes. content.innerHTML = data; if (self.isListPage) { var summary = document.createElement('div'); $(summary).addClass('post-content'); $(summary).addClass('post-summary'); body.insertBefore(summary, content); if (match) { // Use provided summary. summary.innerHTML = match[2]; } else { // Generate a summary. // Summary generation relies on DOM, so it must occur after content is // inserted into the page. summary.innerHTML = self.generateSummaryFromContent(content, 30); } // Add read more link to summary. var titleAnchor = $(this).find('.title a')[0]; var link = titleAnchor.cloneNode(true); link.innerHTML = 'Read More'; $(link).addClass('read-more'); summary.appendChild(link); } }); // Firefox does not allow for proper styling of BR. if (navigator.userAgent.indexOf('Firefox') > -1) { $('.post-content br').replaceWith('<span class="space"></span>'); } $('.loading').removeClass('loading'); }; BreakpointHandler.prototype.process = function() { if (!this.initted) { var makeInsecureImageRegex = function(hosts) { var whitelist = hosts.join('|').replace(/\./g,'\\.'); // Normal image tags, plus input images (yes, this is possible!) return new RegExp('(<(img|input)[^>]+?src=("|\'))http:\/\/(' + whitelist +')', 'g'); }; this.sslImageRegex = makeInsecureImageRegex(BreakpointHandler.KNOWN_HTTPS_HOSTS); this.sslImageCurrentDomainRegex = makeInsecureImageRegex([window.location.hostname]); this.detect(); this.initContent(); this.initted = true; } }; BreakpointHandler.KNOWN_HTTPS_HOSTS = [ "www.google.org", "www.google.com", "services.google.com", "blogger.com", "draft.blogger.com", "www.blogger.com", "photos1.blogger.com", "photos2.blogger.com", "photos3.blogger.com", "blogblog.com", "img1.blogblog.com", "img2.blogblog.com", "www.blogblog.com", "www1.blogblog.com", "www2.blogblog.com", "0.bp.blogspot.com", "1.bp.blogspot.com", "2.bp.blogspot.com", "3.bp.blogspot.com", "4.bp.blogspot.com", "lh3.googleusercontent.com", "lh4.googleusercontent.com", "lh5.googleusercontent.com", "lh6.googleusercontent.com", "themes.googleusercontent.com", ]; BreakpointHandler.prototype.rewriteForSSL = function(html) { // Handle HTTP -> HTTPS source replacement of images, movies, and other embedded content. return html.replace(this.sslImageRegex, '$1https://$4') .replace(this.sslImageCurrentDomainRegex, '$1//$4') .replace(/(<(embed|iframe)[^>]+?src=("|'))http:\/\/([^"']*?(youtube|picasaweb\.google)\.com)/g, '$1https://$4') // Slideshow SWF takes a image host, so we need to rewrite that parameter. .replace(/(<embed[^>]+?feed=http(?=[^s]))/g, '$1s'); }; $(document).ready(function() { var handler = new BreakpointHandler(); handler.process(); // Top-level navigation. $(".BlogArchive .tab").click(function(ev) { ev.preventDefault(); $(this).parent().toggleClass('active'); $(this).siblings().slideToggle(300); }); $(".Label .tab").click(function(ev) { ev.preventDefault(); $(this).parent().toggleClass('active'); $(this).siblings().slideToggle(300); }); // Blog archive year expansion. $('.BlogArchive .intervalToggle').click(function(ev) { ev.preventDefault(); if ($(this).parent().hasClass('collapsed')) { $(this).parent().removeClass('collapsed'); $(this).parent().addClass('expanded'); } else { $(this).parent().removeClass('expanded'); $(this).parent().addClass('collapsed'); } }); // Reverse order of months. $('.BlogArchive .intervalToggle + div').each(function(_, items) { var year = $(this); year.children().each(function(_, month) { year.prepend(month); }); }); // Set anchors to open in new tab. $('.post-content img').parent().each(function(_, node) { if (node.nodeName == 'A') { $(this).attr('target', '_blank'); } }); // Process search requests. $('.searchBox input').on("keypress", function(ev) { if (ev.which == 13) { window.location.href = 'https://www.google.com/search?q=site%3A' + window.location.hostname + '%20' + encodeURIComponent ($(this).val()); } }); }); //]]> </script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY79WxzAafGPzyAwV2VzqNDtXxvwyg:1732720458507';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2471378914199150966','//blog.chromium.org/search/label/capabilities','2471378914199150966'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2471378914199150966', 'title': 'Chromium Blog', 'url': 'https://blog.chromium.org/search/label/capabilities', 'canonicalUrl': 'https://blog.chromium.org/search/label/capabilities', 'homepageUrl': 'https://blog.chromium.org/', 'searchUrl': 'https://blog.chromium.org/search', 'canonicalHomepageUrl': 'https://blog.chromium.org/', 'blogspotFaviconUrl': 'https://blog.chromium.org/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-37592578-1', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Chromium Blog - Atom\x22 href\x3d\x22https://blog.chromium.org/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Chromium Blog - RSS\x22 href\x3d\x22https://blog.chromium.org/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Chromium Blog - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2471378914199150966/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/02de2df73990045b', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'index', 'searchLabel': 'capabilities', 'pageName': 'capabilities', 'pageTitle': 'Chromium Blog: capabilities'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Chromium Blog', 'description': 'News and developments from the open source browser project', 'url': 'https://blog.chromium.org/search/label/capabilities', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isSearch': true, 'isLabelSearch': true, 'search': {'label': 'capabilities', 'resultsMessage': 'Showing posts with the label capabilities', 'resultsMessageHtml': 'Showing posts with the label \x3cspan class\x3d\x27search-label\x27\x3ecapabilities\x3c/span\x3e'}}}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'navMessage': 'Showing posts with label \x3cb\x3ecapabilities\x3c/b\x3e. \x3ca href\x3d\x22https://blog.chromium.org/\x22\x3eShow all posts\x3c/a\x3e'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'sidebar-top', document.getElementById('HTML8'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar', document.getElementById('HTML6'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar-bottom', document.getElementById('HTML4'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-bottom', document.getElementById('HTML1'), {}, 'displayModeFull')); </script> </body> </html>