Web平台的新功能 | 主题演讲

[0:05] -I’m Ben. -And I’m Dion. We’re leaders on the Chrome team. [Dion] The two of us have been working together on the web platform for many years. It’s been fun to watch as websites have evolved from simple connected documents to today's rich interactive web apps. The web has become a high performance, general purpose computing platform used by billions of people all across the globe. [Dion] The web’s growth has accelerated in the last year as the pandemic has pushed more of our daily interactions online, triggering a rush to improve web experiences as usage spikes.

[0:40] And for us, this reinforces the importance of the web and the need for all of us to work together to make it better. Now we’ve seen many computing platforms rise and fall over the past decades. One thing is really clear: the old adage evolve or die plays a major role in the ongoing relevance of any platform. Now, the web has evolved a great deal over the years. And looking forward, I think the pace of evolution is accelerating. because it kind of has to to keep pace with tech and society generally. So at Google I/O this year, we have a number of sessions that will bring you up to speed on some of the latest developments in the web.

[1:19] In this session, we’ll give you a quick summary of what we think are the key themes that you should keep in mind this year. And we’ll point you to where you can learn more and go deeper. We're going to start with privacy, explaining how the web is evolving to enable a private browsing experience for all users by default. Next we’ll cover how the web is enabling a new generation of powerful, fast, and seamless web apps and a fantastic user experience. And finally, we’ll summarize the work we’re doing to help developers be productive and successful with the web.

[1:52] So let’s get started with privacy, and we'll do that by talking about sandboxes. Modern browsers are built around the metaphor of a sandbox. Each website you visit is isolated by default from the rest of your system, including from websites and other open tabs just as though we’re surrounded by virtual walls like those of a sandbox in a garden. Now Chrome’s innovated with the browser sandbox model from its earliest days, first by isolating each website into its own process.

[2:23] And more recently, expanding on that to isolate each cross-site iframe on a webpage into its own process. We’re taking this same approach with user data and tracking, building a sort of privacy sandbox that seeks to keep all of your information safe and secure within your browser, resulting in a web where your identity and activity are private by default. We announced the Privacy Sandbox effort two years ago, as an open initiative, a collaboration with the community to bring this vision to life while also being careful to help transition the web ecosystem to a new model in a thoughtful, deliberate way.

[3:07] We’d like to give an update on our progress. Our first step, announced at Google I/O two years ago, was changing the behavior of cookies in Chrome, moving them from being visible across websites by default to being visible only to the same website that set them. Before this change, it wasn’t really clear whether a cookie was intended for first-party or third-party use and browsers needed to observe how cookies were used in the wild to infer their purpose. This also created a security problem because this wide default visibility of cookies exposed users to cross-site request forgery attack based on third parties observing the information in these cookies.

[3:48] Now, developers are required to opt in to use cookies across sites as so-called third-party cookies. And in turn, browsers could then disable such cookies in a very straightforward manner. This privacy-preserving default behavior is now enforced in Chrome, Edge, and, very soon, Firefox. Next we’ve been collaborating with the ecosystem on a new family of APIs that provide privacy-preserving alternatives to use cases that today rely on third-party cookies, such as federated login, personalized ads, and conversion tracking.

[4:23] To clarify how these APIs are approaching this challenge, let’s take a closer look at one of them: the Attribution Reporting API. So a key aspect of any web business is how you grow your user audience, and that often involves advertising to increase traffic. On the other side of those ad dollars, content publishers on the web often rely on revenue from advertisements to make their business model work. Finding out how many users actually clicked on the ad and whether those users subsequently did something like sign up for a newsletter or complete a purchase, is an important part of this model.

[5:01] Traditionally, this measurement is performed by tracking the user from before and after the click across websites with a third-party cookie. So how can we do this in a way that doesn’t involve tracking that user? Well, enter Attribution Reporting. Using this proposed API, no user-identifying data is shared between the sites. Instead, it’s the browser that keeps track of the ad conversion. Later, the browser sends an encrypted report to the advertiser for each of these conversion events.

[5:34] But it adds time delays and noise to these reports to further stifle attempts to identify users. This technique is broadly known as differential privacy. This approach enables both parties to still be able to measure the effectiveness of their ad campaigns and to understand what behavior the ads are able to drive and to do so without tracking the user across sites. Now Attribution Reporting is one of many new API proposals in the Privacy Sandbox project.

[6:06] It’s available for use as a Chrome origin trial’s experiment today, along with several other APIs, And we’ll ship more throughout the course of the year. As we work with all of you across the ecosystem to bring these new APIs to the web platform, we’re also moving forward with preparations to phase out third-party cookies and implementing protection against other forms of covert tracking. And we’ve got more details on what to do with your own cookies today in the technical sessions.

[6:36] So the Privacy Sandbox project represents a substantial evolution of the web platform, enabling privacy by default while also preserving critical web use cases. A change this large and fundamental to the web will take time, but we’re committed to this work and the benefits it will bring to web users globally. The web has evolved into a powerful application platform, enabling anyone with a modern browser to get access to category-leading experiences that load fast and run seamlessly.

[7:11] And devices like Chromebooks show how access to the web could be made affordable, safe, and simple with no need to be an expert at maintaining the underlying operating system. For years, we’ve been on a mission to ensure the web has all of the capabilities needed to bring state-of-the-art computing experiences to the platform. And since we last spoke to you at I/O, the web’s gained a significant array of new capabilities. We'd like to highlight a few of these for you. One area we’ve been working on has been making it easy for users to seamlessly re-engage with web apps.

[7:47] It has been possible for a few years to easily add web apps as icons to native launchers across both mobile and desktop, and it’s one of my favorite platform features. We want to talk about how we’ve deepened this integration between web apps and the underlying OS. With the new app shortcuts feature, web apps can expose quick actions on operating systems that support this feature, such as Android, Chrome OS, Windows, and macOS. And with the Badging API, web apps can give the user a subtle prompt that there’s an opportunity to re-engage by decorating the app’s icon.

[8:24] Soon, we'll be shipping a Chrome origin trial experiment of another new API, Declarative Link Capturing, that enables installed web apps to launch automatically when the user clicks on an appropriate link. This can also prevent multiple instances of the same app from opening so you don’t have like 10 tabs with the same web app in it. We’ve also recently improved Chrome’s web app installation UI. On desktop, we now show an omnibox icon and provide in-product help to explain this feature to users.

[8:57] And on Android, we’ve made the dialogue look richer and more familiar to users, and we’ve made it easy for developers to populate the dialogue with custom images and texts that are specified in the web app’s manifest file. So those are ways that we’re improving the web’s integration with OS launches. We're also adding other OS integrations, such as the Multi-Screen Window Placement API, which allows web apps to discover all of the connected displays and control where the window is placed on those screens.

[9:29] This is actually a pretty handy feature these days for web-based presentation and video conferencing apps. Now web apps can finally read and write to the user's local file system using the File System Access API, enabling apps like Gravit Designer and PhotoBee to provide a much more seamless user experience, persisting state to disk and working with existing files. We’re also working on a new File Handling API that would allow web applications to be registered as file type handlers, enabling users to open files directly in a web app from OS file browsers.

[10:08] We hope to ship an experimental release of this API later this year. Now let’s talk about peripheral devices; things like special-purpose keyboards, game controllers, digital pianos, headsets, and more. Now, the web’s had the ability to communicate with Bluetooth on MIDI devices for a while. But several new APIs now enable support for a broader collection of these devices. Many of these, communicate using the HID protocol. The web now has an API for this in Web HID.

[10:40] Nintendo’s Joy-Con controller is an example of a device that supports this protocol. For gamepad style controllers, the industry standard Gamepad API is now supported by the web as well, and this enables uncompromising gameplay with apps like Stadia in the browser. And you can also use a gamepad to control the Chrome dino in style. The web also now supports serial ports with the Web Serial API. This actually unlocks one of my favorite new use cases: Piper Make.

[11:13] It’s a block-based editor that allows you to program a Raspberry Pi Pico. All you do is simply plug in the device to any computer, open a browser, and off you go. No need to install software or mess with drivers, all thanks to Web Serial. Now with these and other new web capabilities, you can bring deeply integrated, seamless experiences to users everywhere right through the browser. Google Maps holds a special place in our hearts as a singularly influential web app when it first launched over 15 years ago.

[11:46] Maps continues to innovate on the web. Several years ago, they embraced WebGL, enabling hardware-accelerated graphics and delivered a much more powerful Maps UI in the process. Last year, the Maps team enabled those same WebGL-accelerated map capabilities to be used in your web app via the Maps JavaScript API. This year, the team has something new to share. Join me in welcoming Travis McPhail, the team’s engineering lead, who will tell us more about it.

[12:18] We’re constantly amazed by all the ways you’ve used your skill, your creativity, and Google’s knowledge of the real world to build an unbelievable variety of experiences that have truly re-imagined the map. And it's in that spirit today, during the developer keynote, we announced the beta release of two new features that give you unprecedented control of the base map: tilt and rotation, and WebGLOverlayView. With these features, you can manipulate the map in three dimensions for the first time while taking advantage of the power of the same WebGL context we use to render the base map.

[12:57] For the first time ever, you can build not just on top of the map, but you can build with it. Let's take a quick look at how it works. To make things easy, I’m using three.js, a popular web graphics library, to render a 3D object on the map. I've set up a basic web app that loads the map centered on a location in the Yucatán Peninsula of Mexico. And I'm using a map ID so that I can use the vector map and apply some custom styling.

[13:29] The first thing I need to do is implement WebGLOverlayView by extending google.maps.WebglOverlayView. The WebGL overlay exposes a set of hooks into the life cycle of the WebGL rendering context of the base map. For today, we'll keep things as simple as possible and focus on just three of them. The first, onAdd(), is called when the overlay instance is created. The second, onContextRestored(), is called once the rendering context is available.

[14:01] And the third, onDraw(), is what the map and anything else you specify is actually rendered. In onAdd(), I’m going to set up everything that the sscene needs that doesn’t require immediate access to the rendering context. I start by creating a new three.js scene. I also create a camera that represents the view port of the scene. In this case, a perspective camera. Next, the scene needs at least one light source so that any rendered objects are illuminated in the scene.

[14:35] For this example, ambient light is used to equally illuminate all objects in our scene. Now I’m ready to add my 3D object using the GLTFLoader. Once the object is loaded, I scale and rotate it. to have it rendered just right. Then I add it to the scene. In onContextRestored(), I configure the three.js WebGLRenderer, passing it the map’s rendering context and information about the viewport. Once the object renders, I also want to animate the camera to give my users a dynamic view of the object.

[15:13] I called moveCamera in the setAnimationLoop function of the renderer. I also increment tilt, heading, and zoom just a little bit in each frame to create a nice downward spiral motion. All right. Time to render. The three.js camera needs a projection matrix so that it knows how to render latitude and longitude coordinates in the 3D world of the map to the 2D coordinates of the screen. Now, I don’t know about you, but matrix transforms are not my idea of a good time.

[15:47] So, to save you a bunch of math, we hand you a transformer object that has the fromLatLngAltitude function which creates this matrix for you. I pass it the lat-long coordinates where I want the model to appear, and I set the return value as a camera.projectionMatrix. All that’s left is to clear the GL state, tell WebGLOverlayView I want to redraw by calling requestRedraw() on the WebGLOverlayView instance and render the scene.

[16:18] And finally, I create an instance of my class and set the map instance I want it applied to. And this is the result. Not too bad for a few minutes of coding, right? Tilt and rotation and WebGLOverlayView are just the latest way we're delivering on our commitment to you. We have a lot more planned, and we can’t wait to see all the ways you’ll come up with to reimagine the map all over again and show us what’s next. Back to you, Dion. Thanks, Travis.

[16:50] WebGL brought whole new level of graphics performance to the web when it became available several years ago. We are currently working closely with the graphics and web communities on WebGPU, the new next-generation graphics API, designed from the ground up to unlock a whole new level of graphics performance on the web. Taking inspiration from low-level APIs like Vulcan, Metal, and Direct 3D 12, WebGPU is still very experimental that holds exciting promise for the future.

[17:22] Another key performance technology is Web Assembly, which provides a standard for compiling code to a fast and efficient format that can be executed in the browser by modern JavaScript engines like V8. We recently gave Web Assembly a major performance boost by implementing support for SIMD processor instructions in V8, which enables certain classes of apps to run much faster. Google Meet provides a powerful example SIMD in action. Like any video conferencing app, Meet has to pay careful attention to their performance budget.

[17:55] And there’s a constant tension between processing the video in order to enhance it and maintaining a smooth, low-latency stream. Using V8′s experimental origin trial of SIMD, the Meet team achieved a 200% performance gain on their in-browser media processing pipeline. And this in turn, gave them the budget to enable a background blur feature for most of their users that was powered by TensorFlow in the browser. We’re planning to ship SIMD to all Chrome users in the coming months.

[18:26] Now, Web Assembly is also frequently used to bring non-JavaScript codebases to the web, unlocking them for new use cases. For example, the developers behind the offline-first sync engine, Replicache, were able to compile their Rust code to Web Assembly, enabling web developers to seamlessly incorporate it into their web app. To ease with code porting, V8 added threading support to Web Assembly back in 2019. But it was only enabled for desktop operating systems.

[18:57] We’re pleased to share today that Chrome for Android gained Web Assembly threads as of Chrome 88 in January of this year. We’ve also enhanced V8′s Web Assembly debugging experience with support for breakpoints and variable inspection right there in Chrome DevTools. We’re so excited to see what you deliver with a universal runtime that works on client or server is san bugs, and wicked fast. That's Web Assembly. The V8 team has also been hard at work at squeezing even more JavaScript performance out of its engine.

[19:31] So in addition to interpreting JavaScript, V8 also compiles code on the fly for more efficient execution. And the team has implemented a whole new compiler called Sparkplug. Of course, sometimes the best way to improve code execution performance is to not execute any code at all. In this spirit, earlier this year, we shipped a new Chrome feature to some users called intensive timer throttling that detects when a browser tab has been in the background for more than five minutes and as long as the tab isn’t playing any audio or video, Chrome slows down how frequently it executes timer-based JavaScript code on that tab.

[20:10] We've also applied this concept with CSS by shipping support for a new CSS property called content-visibility. When you set this property to auto on an element, you’re giving the browser permission to skip rendering the contents of that element tree if it isn’t currently visible on the user’s display, and this can lead to a dramatic speed boost for content-heavy sites. Now, there’s a ton of innovation happening on the web platform to enable significantly faster runtime performance of your web apps.

[20:40] In addition to the work happening to expand the power and performance of the web, the platform’s also evolving to deliver an instant and seamless experience for users. In Chrome 87, released in November last year, we added a so-called back/forward cache to Chrome on Android, or BFCache for short. BFCache keeps some web pages loaded in memory after you’ve navigated away from them. So if a user clicks back or forward, the page is displayed instantly. And it turns out, one in five navigations on mobile are doing exactly that, moving backwards or forward through the history stack.

[21:18] So this feature drives a really big impact. While today, Chrome’s BFCache implementation is available on Android, it does have some limitations. We are planning to expand it to the Chrome desktop platform soon. Another way we’re expanding instant experiences is by revisiting the notion of pre-rendering pages. Pre-rendering is the technique of loading all of a webpage’s resources and even rendering the DOM before the user clicks on a link So it can be displayed truly instantly.

[21:48] Now this is hard to get right because pre-loading these pages can also cause side effects, if the page does something like sign out or if the page plays audio, then it can also start playing in a mysterious way. Also, it can leak some user information if it's done across sites. But when pre-rendering is done right, it provides this powerful, instant click-through experience for the user. So, we’re working on new approaches to pre-rendering that are private and safe. One of these involves a new pre-rendering API that would enable developers to experiment with this on same site pre-loading later this year.

[22:26] And transitions are another important aspect of the user experience, ensuring that users are able to shift their context as they navigate the web and get right to where they want to go. One fun, simple feature with a big impact is scroll to text, added to Chrome 80 in February of last year. By adding a new type of expression to the end of your URL, browsers can position the viewport to a specific text element and highlight it in some way. Soon we’ll be shipping a version of this API that scrolls to images, and we're exploring other element types too.

[22:59] With the new document transition APIs that are coming to Chrome soon as experiments, we’re also building in support for a number of graphical transitions between elements, enabling the user to perceive a seamless experience as they move between states of your web app. We're also working to make security more seamless on the web. One feature I’m particularly excited about is cross-device one-time passwords for the web. One-time passwords are these numeric codes that some sites can send you to log in.

[23:31] This feature enables you to receive one of these one-time passwords on your Android phone, and then have that automatically transferred to your Chrome browser running on some other device like a laptop. All of these new web capabilities are exciting. But as the pace of web evolution accelerates, so too does the complexity we face as web developers in keeping track of everything. We’re working to make the web easier for developers and partnering with the broader ecosystem to understand and address the platform's top pain points.

[24:03] To understand our latest recommendations for web development, visit web.dev. The site includes detailed tutorials on key topics, the latest news, and it also provides access to our Lighthouse website auditing tool. Now, with Lighthouse, you get a comprehensive report on how to improve your website, across a variety of categories such as performance, accessibility, and SEO. We continually update Lighthouse guidance to give you the very best insights we can.

[24:35] We found that three of Lighthouse’s performance metrics are particularly impactful on the user experience. We call these Core Web Vitals. And collectively, they measure how fast a site displays key content, how responsive the site is for the first interaction, and how much the site’s layout shifts around. Sites across the web were using Core Web Vitals as a North Star for performance and are reporting encouraging results. For example, the Italian publisher GEDI saw an 8% improvement in the bounce rate on their mobile article pages.

[25:13] They did this by implementing a branded placeholder in order to reserve space for ads in their ad slots on the page, which improved their layout stability, and then by deferring loading of some their JavaScript code until after the page was visible, they improved the perceived page loading speed. Web content and commerce platforms. are also investing in Core Web Vitals to improve the performance of all of their hosted sites. For example, Shopify and Wix implemented dashboards in their admin console that puts performance front and center for site owners.

[25:49] The WordPress community has also shipped performance-oriented additions, such as lazy loading for images and iframes. We’ve also updated Site Kit, Google’s official plugin for WordPress, with support for measuring Core Web Vitals, and it also makes specific improvement recommendations to developers. Google Search has also announced that Core Web Vitals will soon be a part of how pages are ranked in search results. We think this is particularly exciting, as it magnifies the benefit of Core Web Vitals to you, the developer.

[26:21] The investment will not only give your users a better experience, but it will help them find your site through such. We spent a good amount of time listening to developers, both in small gatherings and through scaled developer surveys. One of the common themes we consistently hear is the importance to developers of cross-browser compatibility. So this year, we recently announced our participation in a cross-industry effort called Compat2021, which aims to fix the top five browser compatibility pain points as voted on by web developers, which, shockingly, all happen to be CSS related.

[27:00] And speaking of CSS, we’re seeing an exciting renaissance in this area. We even have our own modern-day zen garden. CSS Flexbox and Grid have been embraced by developers as major improvements for creating page layouts, and learnings from years of CSS frameworks like Sass are being baked into the platform, such as nesting. And along with container queries, which is your most requested feature, I think, for CSS, you will be able to create style sheets that are more modular and reusable by enabling rules that are scoped naturally to their local context versus acting so globally.

[27:37] Now, one of Chrome’s most popular features is its suite of built-in developer tools, which give you an incredibly powerful toolkit that can function as your web development copilot. Over the past year, we’ve enhanced DevTools with a bevy of new improvements ranging from a new color picker, improved warnings and linting of PWAs, a Core Web Vitals overlay, dedicated CSS Flexbox debugging, dropped frame visualization, support for CSS and JavaScript, and much more.

[28:09] And DevTools is also a platform because it supports extensions. And one example of a new extension is the Angular DevTools Chrome extension, which provides debugging and performance profiling support that’s specific to Angular apps. So check out our Chrome DevTools session to deep dive into all of this and learn more about our new DevTools features. The web is evolving in fundamental ways so it doesn’t become extinct. It’s becoming private by default with new APIs that protect user privacy, and it also continues to gain powerful new capabilities that broaden what’s possible on the platform, providing for better user experiences.

[28:51] Lastly, we’re committed to partnering with you in the ecosystem as the web evolves to make sure that you’ve got all of the tools and guidance for success. You can dive deeper into many of these improvements across the web platform by checking out a number of other sessions, many of which we’ve highlighted today, at this year’s I/O. Thanks for your time, and we look forward to seeing what you build with the evolved capabilities of the modern web. And if you’re watching this during I/O Week, come find us in Adventure. Thanks.