Chrome and the web in 2020

00:44 - - And I’m Ben. We work on the Chrome team and we’re your hosts for this year’s keynote.

00:50 - - It sure has been a memorable year. - And we’re as excited as we think you are that it’s nearly over.

00:57 - - [Dion] CDS has always been about bringing the Chrome team together with the community so we can learn from each other.

01:04 - - We’re really sad that we’re unable to gather in person, but we’re doing our best to replicate this experience online, both with streaming videos on YouTube, where our team will be monitoring and engaging with comments throughout the week.

01:16 - - But also with a new experiment we’re launching today called Chrome Dev Summit Adventure, a playful online world where you, the virtual attendees, can interact as we try to recapture some of the joy of face-to-face interactions.

01:32 - We’ll talk more about it later today and look forward to hearing what you think about it.

01:38 - - [Ben] The Chrome team at Google has a two-fold mission.

01:41 - First, strengthening the web and other open ecosystems by contributing to open source projects, such as the Blink web rendering engine, the V8 JavaScript runtime.

01:52 - - [Dion] The AV1 media codec, the Skia graphics library, and developer tools like Workbox, Lighthouse, and of course DevTools and more.

02:00 - - And these projects are used far beyond Chrome and even the web. They help power countless other products and platforms like the Node. JS ecosystem with V8, open video with AV1, and Skia, which plays a critical role in Android and Flutter.

02:17 - - [Dion] Now the second part of our mission is, of course, building the Chrome web browser, providing a top quality web experience across Windows, Mac OS, Linux, and Android.

02:27 - - And on iOS, we bring as much of that experience as we can to millions of users using Apple’s WebKit framework. Across all of these efforts, our focus is pretty simple.

02:37 - It boils down to three things. - [Dion] Ensuring the web delivers a safe and secure environment.

02:43 - - [Ben] Making the web browsing experience faster and more seamless.

02:47 - - [Dion] And adding more capabilities to the web, enabling richer and more diverse applications on the platform.

02:53 - - In this keynote, we’re going to give you an update on our progress and highlight the work that others in the community are doing as well.

03:00 - - First let’s transition over to our colleague Parisa Tabriz to give us an update on the Chrome browser.

03:07 - - Thanks, Dion. 2020 has been a year of challenges and new experiences for all of us.

03:15 - Back in March, we decided to skip a Chrome release for the first time in our history because we wanted to make sure that everyone had a stable-performing Chrome as our team transitioned to work from home.

03:27 - Now we’re proud and humbled that so many people around the world choose Chrome to help them stay connected and informed, especially in challenging times.

03:37 - Reflecting on the year, I want to share some of the ways that we’ve seen Chrome usage change, how our core principles have helped us be prepared for this shift, and how we continue to build improvements to help users.

03:50 - Now, people around the world relied on Chrome to virtually see and stay connected with their family, friends, classmates, and colleagues.

03:59 - Since January, time spent video conferencing in Chrome on desktop is up by 4X.

04:04 - And we know that performance is key, especially when using video on the web.

04:08 - So to keep Chrome fast and efficient, we introduced profile guided optimization, which results in up to 10% faster page loads.

04:18 - We also launched tab throttling, and that helped speed up just about everything, Chrome start-up, tab switching, tab restoring, and it does this by prioritizing your laptop’s resources to the tabs that you’re actually using.

04:32 - So this will also reduce power consumption and improve battery life.

04:36 - And finally, we’ve also made some progress on memory savings, which you’ll hear more about from Dion later.

04:43 - Now, when we look to Google search trends data, we see the queries related to health, news, science, government, and food all increase during lockdown.

04:52 - As people looked to stay safe, get updates on local restrictions and just learn how to cook at home.

04:59 - More generally having access to information on the open web is so critical, and we continue to focus on product inclusion and serving the diversity of our global user base.

05:09 - For those who are low vision or who rely on a screen reader, Chrome became the first browser to create accessible PDFs with auto-generated headers, links, and tables.

05:20 - All of that makes PDFs more legible for screen readers.

05:25 - We’ve also made it easier to translate entire sites to your preferred language and added support for 28 additional languages.

05:33 - Lastly, we’ve begun testing a visual-based search, which we hope can help users that are new to the internet or who have low or no literacy.

05:42 - As many of us shifted to working from home and all that comes with that, smaller screens, juggling work and home commitments and so much multitasking, the Chrome team has continued to prioritize productivity features.

05:56 - Tab groups make it easier to organize your tabs by project, urgency or, well, any way you like.

06:03 - And you can even collapse tab groups to just get them out of the way.

06:07 - We’re also beginning experiments to add new modules to Chrome’s new tab page to help you quickly jump back into a previous task, whether it was researching a product, planning a meal, or catching up on your favorite shows.

06:20 - Now, we’re conscious of the increase in pandemic-related phishing attacks and other online security threats.

06:26 - And we’re proud of both how Chrome has protected users and some new features we launched this year to make it that much harder for online attackers.

06:34 - For example, we’ve launched an additional layer of security with enhanced, safe browsing, more secure and private DNS-over-HTTPS, and many password manager improvements.

06:46 - We’ve also delivered more accessible and intuitive privacy controls, starting with the redesign of Chrome settings.

06:53 - And for users that want an additional peace of mind, we introduced a new safety check within Chrome, and we’re now rolling out quick access to some of the most used privacy and security controls like deleting your browsing history or opening an incognito window directly into your address bar.

07:12 - Finally, we’ve continued to make progress on some ambitious ecosystem safety initiatives.

07:17 - You’ll hear later today about the progress we’ve made on the privacy sandbox, which is an open source initiative to develop a set of open standards to fundamentally improve privacy on the web.

07:27 - And Dion will announce a major update on our work with extensions.

07:31 - As we give users more control over the data shared with their favorite extensions, we want to give you the tools to get ready for this new reality.

07:38 - Now, before I hand it back over to Dion, I’d like to just conclude by acknowledging the Chrome team’s really hard work this year, all while being at home, to make our user’s experiences better, releasing eight stable Chrome builds, meeting default browser requirements for iOS 14 and improving performance, helpfulness and security in Chrome across all platforms it’s available.

08:00 - Thank you so much. And now back to Dion to tell you more about the latest and greatest in the world of Chrome extensions.

08:08 - - Thanks, Parisa. A lot of great improvements, and I’m really excited to see everything we’re doing to make the browser more efficient, secure, and more privacy preserving.

08:17 - Now, we think extensions are a superpower for the web, an aftermarket that allows first and third parties to add rich capabilities that can enhance a site or the entire experience of the web.

08:31 - We love the extensions you’ve built with over 200,000 active developers and over 250,000 extensions in the Chrome web store, and users love them too.

08:43 - Fun fact, we estimate that users have installed over 20,000 extensions just in the minutes since this keynote began.

08:51 - And users have an expectation now of strong privacy and security guarantees, and we really agree with that, so we’ve been working on updating our extensions platform to better align with our vision for a more private and secure browsing experience.

09:05 - We call this Manifest V3. And today, we’re announcing the official release.

09:12 - So for improved security, we’ll start with disallowing remotely-hosted code and provide developers with more tools to write secure extensions.

09:21 - To enhance user privacy, early this year, we made controllers more visible in the new extensions menu, with some sensitive permissions made optional.

09:30 - Users today can turn off those permissions after the extension is installed.

09:35 - In 2021, we’ll go a step further by withholding these permissions by default and giving users the option to ground them at extension install time.

09:44 - Manifest V3 is available to experiment within Chrome 88 Beta and updated extensions could be submitted to the Chrome web store starting January 19th when Chrome 88 hits stable.

09:57 - You can learn more on the link mentioned here.

10:01 - - As Dion explained, privacy is a major theme of Chrome’s new extensions model.

10:06 - We’ve also been collaborating with many others in the ecosystem to improve the privacy of the web platform itself.

10:13 - We’ve been working on a major initiative called the Privacy Sandbox.

10:18 - It’s organized into two tracks. First, reducing the cross-site tracking that happens on today’s web, and second, enhancing the web with new capabilities that form privacy-preserving alternatives that can power tomorrow’s experiences.

10:37 - Some websites use third-party cookies to track people across the web.

10:42 - While Chrome plans to phase out third-party cookies once these privacy preserving alternatives are in place, we’ve made cookies more secure for websites and users today.

10:52 - This year, Chrome finished rolling out a new policy known as SameSite, which limits cookies to first-party access by default, requiring developers to declare which cookies can be sent to third-party domains.

11:08 - Before this change, most cookies could be accessed by third parties, even when they were only intended for first-party use, needlessly exposing them to security threats, such as cross-site request forgery attacks.

11:22 - Now 99. 9% of those first-party cookies are automatically restricted to first-party use in Chrome, and all third-party cookies must be sent via HTTPS, encrypting them in transport.

11:38 - Microsoft Edge and Mozilla Firefox are also in the process of adopting this new same site policy.

11:47 - We’ve been working to address covert tracking, such as browser fingerprinting as well.

11:52 - Now, this occurs when developers attempt to create a unique profile of your browser, a so-called fingerprint that can be observed across websites.

12:01 - With a new project called Privacy Budget, we’re experimenting with a new way to enable rich web functionality while also severely constraining fingerprinting.

12:12 - We also launched the user agent-client hints API, which is an alternative to the user agent strings that we all know and love, going back to the beginning of the web.

12:23 - This enables developers to request only the data that they truly need about your browser.

12:30 - In the second privacy sandbox track, we’ve been working with the web ecosystem on a new family of web standards that provide privacy-preserving solutions to accomplish important web use cases, such as personalized content, single sign-on, and relevant ads without the need for third-party cookies or other cross-site tracking mechanisms.

12:54 - I’m happy to share that the first two solutions are available for early experimentation by developers.

13:00 - This includes the conversion measurement API, a new capability that measures when an ad click leads to a conversion without using cross-site identifiers, and trust tokens, a new API to help combat fraud and distinguish bots from humans by conveying trust from one context to another without passive tracking.

13:22 - Both of these are available for testing and feedback via Chrome’s Origin Trials mechanism in our current Chrome stable release.

13:31 - We’ll be going deeper into some of these changes later today, so don’t forget to catch these sessions.

13:38 - - Users are only a low-friction tap away from the next great experience, and they traverse the web link by link.

13:45 - To make that journey great, we all have to ensure that our web pages load fast, and once loaded, we want the UI to feel responsive and buttery smooth.

13:56 - Now, achieving fast loading and runtime performance requires that the browser and web developers work together to do the right things.

14:04 - Earlier, Parisa shared how Chrome is getting updates like profile-guided optimizations and tab throttling.

14:10 - In addition, we’ve also been optimizing memory utilization overall and have made some really substantial progress here that we want to share.

14:18 - For example, the prior stable release of Chrome, Chrome 85, introduced enhancements to how the browser reclaims memory that resulted in up to a gigabyte of reduced memory usage for power users on Mac OS.

14:33 - Our next release, Chrome 87, is showing savings of up to 80 megs for each top site.

14:40 - And we recently updated V8 with a memory compression technique that reduces the JavaScript memory footprint significantly.

14:47 - This can be seen here with Gmail, which benefited with a 45% memory reduction.

14:53 - Finally, V8 is now able to load a page’s JavaScript files in parallel so scripts can be passed and compiled and ready to execute as soon as they’re needed by the page, eliminating passing pauses entirely.

15:08 - Now, we’re also continuing our work to make it easier for web developers to do their part to create high-performance websites.

15:15 - Earlier this year, we launched Web Vitals, providing clear unified guidance of the attributes for web page that are essential to delivering a great user experience on the web.

15:26 - We focus the program on highlighting three aspects of performance, referred to as Core Web Vitals.

15:32 - The Chrome user experience report shows that the majority of sites have good interactivity and nearly half are fast loading and visually stable.

15:41 - Overall, about a quarter of all sites pass all three metric thresholds, so we still got a way to go, but we think it’s a great start.

15:49 - Now we dive into this data much more in the Web Almanac, which is launching its new 2020 edition today, authored by experts from across the web.

15:59 - I actually always love findings of absurd stats in there.

16:03 - For example, the longest image or attribute that we found is over 15 million characters long, which is enough to write War and Peace five times.

16:14 - Let’s get back to vitals. Last month, the Google search team announced their plan, over the next six months, to incorporate core web vitals into their process for measuring webpage performance.

16:27 - So if you value discovery via Google search, this provides an extra incentive to optimize your vitals and reach the three thresholds.

16:37 - So get started now. We’ve got all of the tools to support you as you measure, track, and improve.

16:43 - And the RUM provider ecosystem has moved really quickly here too.

16:48 - Core web vitals is now available to you if you use CloudFlare, New Relic, mPulse by Akamai, SpeedCurve, Calibre, and many more.

16:57 - But we also know that many sites are currently using Google Analytics, and they want to be able to measure web vitals there.

17:05 - Last summer, we released the web vitals JavaScript library, along with instructions on how to collect web vitals data and send it to Google Analytics.

17:16 - Now we’re excited to launch the web vitals report, an open source website and tool to let you query and visualize your web vitals metric data right in Google Analytics.

17:28 - This report also allows you to compare data across segments so you can see how much performance affects your business results.

17:35 - Now we’re seeing the web vitals approach really resonate with developers, particularly in markets where network infrastructure conditions and device capabilities can be a little bit variable.

17:46 - So what does it take for you to do the work to improve your vitals? Well, to share an experience of taking a site and iterating on it to meet these thresholds, please welcome Sunit Jindal, principal engineer from Nykaa, India’s leading online marketplace for beauty and wellness products.

18:05 - Over to you, Sunit. - Thanks Dion. I am Sunit Jindal, principal engineer at Nykaa, India’s leading omni-channel beauty destination.

18:15 - At Nykaa, our belief is that a highly-performant application is a prerequisite for a great user experience, especially for mobile users.

18:25 - One of the things that we’ve found key for the performance success is to be fully aligned with our business focus teams.

18:33 - How soon the content is rendered to the users, possible benefit in SEO and conversion rates are some of the metrics on which we ensure alignment with our marketing and business counterparts.

18:46 - When web vitals were first announced, to be honest, it meant extra work for us, but we also knew that this was a positive change, although the new metrics meant that we again had to dig deeper to meet the threshold, but once we did it, it was worth the effort. We improved each of the three core web vitals by making optimizations within our code, adding the right CDN where needed, replacing bulky third-party scripts with lighter implementation, and much more.

19:18 - As a result, we managed to improve all our core web vitals within a few months of working on them.

19:25 - For our users, pages loaded even faster, and there were minimal or no content shifts on the page.

19:32 - We also saw a continuous uptick in our performance-related scores across devices and network bandwidth.

19:41 - Post migration our page views per visit increased by upwards of 23% as compared to our old mobile site.

19:50 - The traffic from tier two and tier three cities also increased by nearly 28%.

19:57 - And finally, we’ve seen an uptick in our other key metrics as well, like average order value and search traffic.

20:07 - Having led my team through this journey, I feel that core web vitals stand for a guideline that promotes us to provide a crisp and fast UX.

20:18 - We are happy with the outcome so far and look forward to what’s next in the web vitals program.

20:26 - Thank you, and back to you, Dion. - Thanks to feedback from partners like Sunit and the developer community at large, we found opportunities to refine the core web vitals 2020 metrics and how they’re measured.

20:38 - Watch Annie’s later today to learn about how we’re thinking about this and how you can share your feedback, as we iterate on the metric set for 2021.

20:48 - You want to be able to create fast, responsive, and beautiful UI as easily as possible.

20:55 - You gave us copious feedback on areas of CSS that you wanted to make simpler.

21:00 - Una is gonna share some of the recent changes that target this feedback, as well as giving you a peek at some new work that we’re particularly excited about.

21:09 - - Thanks, Dion. There are so many exciting things going on in the CSS world right now, and I have a lot to update you all on when it comes to making UIs easier to build and debug.

21:20 - We’ve been analyzing trends and conducting surveys and have found that styling has actually been a really big pain point for a lot of you building web interfaces.

21:28 - And we hear you as a web community. We want to fix the issues developers struggle with today.

21:33 - So what have we done recently? Well, first, we’ve been improving tooling, along with our friends at Microsoft, by introducing grid dev tools and working on Flexbox tooling to hopefully relieve some of those layout debugging woes.

21:45 - We’re also working on a lot of other small, incremental changes that will make it more clear what values are being calculated and why.

21:53 - This year, we also launched some pretty key updates for CSS.

21:56 - We’ve had some major strides in Flexbox cross-browser behavior and shift gap in Flexbox, meaning you can now have parent-driven control over the space between your children, just like you can with CSS grid.

22:08 - We’re shipping aspect ratio to ensure consistent ratio sizing of your responsive content without hacks.

22:14 - and we shipped content visibility, a CSS feature that can significantly improve rendering performance by skipping an element’s rendering work, including layout and painting, until it’s needed.

22:24 - This allows for faster interactions with on-screen content, with that content still being searchable and accessible.

22:30 - Along with external contributors and help from the Agalia team, we also shipped a few styling APIs, including list bullet styling with the marker pseudo elements, more refined text decoration styles, the focus within pseudo class, which enables the ability to style a parent based on if its children are being focused, path support within clip-path to support a wider variety of clipping effects, and soon we’re shipping hardware-accelerated SVG animations to ensure better performance across browsers.

22:58 - Another feature I’m excited about is @property, which shipped in Chromium 85.

23:03 - You can now register CSS custom properties with syntax and fallback values directly in your CSS files.

23:10 - This is a part of the CSS Houdini effort, specifically the properties and values API.

23:15 - If you’re interested in extending CSS with Houdini even further, look out for my talk all about using Houdini in today’s browsers, including a tool my team built to make it a little bit easier.

23:25 - And if you’re watching this talk later, the link will be below.

23:29 - The future is also looking extra bright for CSS lately.

23:32 - Moving into the coming year, the Chromium team is going to be focusing on some of these bigger picture frustrations for web styling.

23:40 - Along with the open UI community group, we’re committed to exploring form control styling and expanding the current set of possibilities for web form extensibility, which many struggle with today.

23:50 - We’re working on shipping animation timeline to enable scrolling to animations to be styled with CSS, an operation that’s currently a pretty heavy lift with JavaScript, and we’re looking into how we can make CSS architecture more clear for design systems and products, including cascade layers to enable a new injection point for style sheets between the user agent and author styles.

24:11 - We’re also looking into CSS nesting, a favorite from PM post processors, as well as scope styles natively in CSS.

24:18 - Soon we’ll be shipping is and wear mashes selectors for more clear CSS statements when targeting multiple or longer selectors.

24:26 - And finally, the Chromium team is currently exploring container queries, also known as element queries.

24:33 - We’re actively prototyping what may soon become a game changer for component-driven design, enabling elements themselves to respond to the size of their parent container wherever that is on the page and not just the document’s viewport size.

24:46 - This is a massive shift in styling capabilities and something I can see really changing the ecosystem to help usher in an era of more individually responsive design components and systems.

24:59 - All of these improvements coming to the web are exciting on their own, right? But together, they really tell the story of UI styling becoming a priority on the web platform.

25:08 - We hear you, and I can’t wait to see where CSS and the web evolve from here.

25:13 - - Thanks, Una. I can’t wait to see the rich fluid experiences that you’ll build with these improvements.

25:18 - Now, later at the event, we’ll be talking about how content can be taken to the next level by web stories and more because we’re seeing a real surge in creativity as we visualize stories in new ways, with creators using rich new tools.

25:33 - And there’s another critical aspect of seamless, reducing the friction that users encounter as they transact on the web.

25:41 - We continue to invest here in areas such as identity and payments. With one-time passcode support or web OTP, users no longer have to copy and paste from their SMS app when using two-step verification, and this works with Chrome and Safari.

25:57 - Now, WebAuthn brought biometric sensors to the web, and with Safari recently adding support, touch ID and face ID are accessible to the web.

26:09 - We want to bring this level of simplicity to payments, and we’re experimenting with secure payment confirmation, which brings WebAuthn to payment flows.

26:19 - And we’re experimenting right but have started to really explore here.

26:23 - We can’t wait to see the result of these enhanced payment experiences.

26:27 - So check out the sessions and the codelabs that walk you through using some of these APIs.

26:32 - We built these UI features and their capabilities for identity and payments to enable you to build more powerful and rich web applications.

26:41 - We’ve seen what happens when we lack certain capabilities that you need.

26:46 - You may have to resort to using systems that let you use your HTML, CSS, and JavaScript skills, but now you’ve had to give up the core benefit of web deployment.

26:57 - Being able to reach users on any platform on any screen and without the overhead of forcing a large app download that a user might actually seldom use are all things that make the web such a successful platform.

27:10 - Growing the success of the web means pushing the envelope, unlocking new use cases that are not even possible today while maintaining the traits that make the web great.

27:21 - Developers like Henrik, who I’ve actually known in the web community for many years now, are doing just that.

27:26 - So I asked him to join us to share some of his recent work that has a real human impact.

27:31 - Henrik, thanks for joining us. - Hey, Dion. Thanks so much for having me.

27:35 - Sure wish we could be doing this in person, though.

27:38 - - I know, me too. So can you share what you’ve been building with us? - Sure. So any time you put somebody to sleep in a medical setting, it’s considered best practice to keep them alive.

27:52 - - I would hope so. So I guess you’d have to monitor the patient’s real vital signs, and here we mean human vitals, not web vitals for once.

28:00 - - Yeah, exactly. So you have to produce something called an anesthesia record.

28:04 - And part of that record is a chart that shows what the patient’s vitals are every five minutes throughout the case.

28:10 - and sometimes the case goes really long, so you might do that 50 times during a given case.

28:14 - And a lot of people are still doing this on paper and producing these little charts like this.

28:19 - And so naturally, we built a progressive web app at anesthesiacharting. com that actually does all this for you.

28:26 - - Got it. So I’m actually trying to, looking at that paper, trying to visualize how that PWA would work.

28:31 - - Yeah, it’s probably easier if I just show you.

28:34 - - You can show us? Okay, please. - As you can see, I’m all hooked up to a patient vitals monitor over here.

28:40 - And not only are we able to read the data directly off of that and put it in the chart, we’re actually able to issue commands as well.

28:46 - And we had some fun with the speech recognition API.

28:49 - So if I say something like take a blood pressure now, (machine whirs) you notice it actually starts the blood perfect cuff here on the monitor.

28:58 - And instead of just having a little vitals monitor off in the corner, we can actually put all this data, including my ECG wave forms and everything, up on a big screen.

29:06 - And that way, the provider can see everything they need to.

29:08 - - That’s great. There’s a lot going on here.

29:11 - Can you chat about how you get all of these integrations working? - Yeah, so we’re talking a custom binary protocol that the vitals monitor expects over a web serial.

29:20 - We’re, of course, using the presentation API to be able to display all this content up on a separate screen that’s different from what I’m looking at here, and then we’re also using the wake lock API to make sure that this computer doesn’t fall asleep on us right in the middle of the case.

29:35 - - Absolutely. So why did you build this with web tech? - So distributing software on the web is just so much easier.

29:41 - We actually do have an electron app that we’re using to do some of this. Some of the monitors actually require TCP connections locally, and it’s great that that exists, but it also means that a lot of actually our support headaches come from that because people don’t understand. They need to go download something, and they’re not sure whether they’re running it in Chrome or running it separately.

30:01 - And so it’d just be really nice to be able to do it all with web.

30:04 - - That makes total sense. Well, it’s great to see how this is used in a real-world environment.

30:10 - What’s next here? Are there any other APIs you’d love to see from the web? - Yes. As I mentioned, I’m really looking forward to that native sockets API because that would let us talk to some of these other monitors over TCP.

30:23 - And in addition, I think the only thing that doesn’t work offline right now in our app is the, at the very end, when we generate a PDF for you.

30:30 - So we actually run a puppeteer service that will take that HTML and give you a PDF back.

30:35 - It’d be really awesome if we could just generate that PDF in a consistent way just using a JavaScript API locally.

30:44 - - Sounds great. Yeah. Feedback noted.

30:47 - So I really do hope that we can actually chat in person at the next CDS, although it was pretty special to be able to visit you at a dentist office, and this is coming from a Brit.

30:58 - - Yeah, no, it was really great. Thank you so much for having me, and just everyone knows, we took all the necessary COVID precautions here as well.

31:04 - I even took a COVID test yesterday just to make sure we’re safe.

31:08 - - Safety first. Listening to stories like Henrik’s makes us proud of the work we’ve all done to bring new web capabilities through initiatives like Project Fugu.

31:19 - While Henrik’s use case may be a little specialized, there are so many other use cases that you’ve told us are important.

31:26 - For example, Gravit Designer made it easy for their users to read and write files using the file system access APIs, simplifying the open and save experience.

31:37 - And they’ve already started working on the new local font access API, which enables their users to use specialized fonts that are installed on their own computer.

31:47 - We want to hear about the capabilities that you need to boost your web experience, so please keep them coming.

31:54 - When you bring this all together, you can create something special.

31:59 - We’re super excited to share that Adobe Spark recently launched an impressive new PWA.

32:06 - It’s performant, capable, and allows next-generation creatives to collaborate and co-create seamlessly.

32:14 - It’s a pleasure to use. Hear from Spark as they share their journey directly in our partner spotlight talk, which is right after this.

32:24 - - When you put in the work to build great web experiences, you want to reach as many users as possible.

32:30 - Services like Google search are a fantastic platform for discovery and a powerful differentiator for the web.

32:37 - However, today, many users are habituated to discovering things through app stores like Google Play.

32:44 - Developers who build a progressive web app that meets the recommended quality bar can incorporate it into an Android app using a trusted web activity.

32:54 - And in Chrome 85, released earlier this year, we extended the support for trusted web activities to Chrome OS, and developers can now also publish their apps to the Chrome OS play store.

33:06 - Chrome OS and Chromebooks are a great platform to showcase the power of the modern web and its expanding capabilities via Project Fugu and other efforts.

33:18 - Web apps there get seamless discovery and installation via the Play Store, and they’re also able to deeply integrate into the Chrome OS launcher and the overall system experience.

33:27 - Over the past year, Chromo OS has welcomed many powerful new desktop PWAs into its ecosystem, from advanced graphics products like Adobe Spark to engaging media apps, like YouTube TV and Hulu.

33:40 - Framer, a cross-device design and prototyping tool that was initially a single platform app on Mac OS, was able to increase their user base by four times after releasing their collaborative web version.

33:54 - Today, we’re announcing that Google Play is adding play billing support for PWAs published in the Play Store that use trusted web activity.

34:05 - This integration will be live in Chrome 88, available now in the developer channel and going stable in mid-January 2021.

34:14 - It will be supported on both Chrome OS and Android and enables both purchasing digital goods and subscriptions, including the new standardized digital goods API.

34:24 - You can learn more in these sessions on Next Level Web Apps for Desktop, and What’s New for Web Apps in Play.

34:34 - - Now we’ve shared the platform updates, let’s discuss what’s new with our developer tools and how they can help you build these great web apps.

34:41 - Over to you, Jecelyn. - Thanks, Dion.

34:44 - There’s a lot happening in the world of developer tools, so let me dive right in.

34:50 - To start with, we have got some great new features in Chrome DevTools.

34:55 - First off, Grid Toolings. As you heard from Una earlier, you can now debug CSS grid much more easily with the new CSS grid debugging tools. Yay.

35:06 - I’m particularly excited about this one. Secondly, we have added new emulations to the rendering and sensors tab, including missing local fonts, inactive users, and much more.

35:19 - Next up, the most used panel in DevTools, the elements panel, will now support many more features, including style editing for CSS in JS frameworks.

35:30 - In accessibility, we have added a few new features, including accessible color suggestions and emulate vision deficiencies, among others.

35:39 - And finally, we have added a bunch of new tabs and panels, such as the new media panel, to help you debug your site with a lot more ease.

35:49 - And there’s much more, so don’t forget to catch my What’s New in DevTools sessions tomorrow.

35:55 - Moving on, with the increased focus on web vitals, we have seen as much as a 70% increase in growth across all our insights to over the summer.

36:06 - So we are making sure that we continue to make further enhancements to all of them, including Lighthouse, our tool that lets you audit your site in the lab and one-on-one and provide actionable guidance on how to improve.

36:21 - First off, we have added three new audits to help you identify specific ways to keep your cumulative layout shift in check.

36:29 - Additionally, we know that third-party libraries have a huge impact on your core web vitals.

36:35 - So, as a first step, we have added additional audits for third-party embeds to help you clearly understand your impact on your site’s metrics.

36:45 - We hope these changes will enable developers to debug and optimize their core web vitals with much more ease.

36:53 - Watch Elizabeth’s session later today on the State of Speed Tooling to learn more.

36:58 - Finally, I wanted to give a quick shout out to the Workbox team who launched more flexible integrations with create-react-app, giving you full control over your service worker logic.

37:09 - And more recently, the team announced Workbox V6, which is packed with some awesome updates, including new extensibility hooks for building custom caching strategies and plug-ins.

37:22 - It also has support for Webpack V5 and a more flexible integration in create-react-app V4.

37:29 - Finally, we have migrated even more of the code base to TypeScript, making it easier to use from within your TypeScript projects.

37:37 - Don’t forget to watch Jeffrey’s session tomorrow for the rest.

37:40 - And with that, back to you, Dion and Ben. - So we’ve talked about how to build fast, powerful, and safe web experiences and shown you some examples, but we’re always looking to walk the walk ourselves.

37:54 - We ask ourselves, can we create a rich web application that’s fast to load and smooth to run? And given who we are, we often end up trying to pull this off with a developer tool.

38:05 - We announced Squoosh two years ago at Chrome Dev Summit 2018, and with the web about to get three awesome new image formats, we knew it was time to build version two.

38:16 - So we added JPEG-XL, WebP2, AVIF, so you can start seeing how far image codex have evolved in the last two decades.

38:26 - At the same time we’re making use of the latest and greatest web assembly features, a more mature web assembly tool chains, making image compression go much faster in your browser.

38:36 - We’ve also asked our users what they need, resulting in a new and improved UI, and we wrote a Squoosh CLI, allowing you to compress many images all at once with all the codex and settings that are available in the PWA.

38:49 - It was so productive to share the same web assembly binaries in the browser and node for the command line version.

38:56 - So check out Squoosh V2, and you can read about how the team built it and how you can use it to squoosh down your images at the link here.

39:04 - Now, as we mentioned at the beginning, the Chrome team is focused on working with the community, which includes all of you virtually here at CDS, to make the web more powerful, faster, and more seamless and above all, safe.

39:19 - - It can be dizzying just how fast the web continues to evolve over 30 years into the platform.

39:26 - - I think that’s older than most of our team.

39:28 - - (chuckles) Are we even allowed to say that? And we’ve continued to improve web. dev as your one-stop for understanding our perspectives on how to get the best results out of the modern web.

39:40 - - [Dion] With tools like Lighthouse and the web vitals program explained fully on the site.

39:45 - - And of course, during CDS Online this week, we’ll be doing our best to explain all of the latest and greatest developments, and we’re available to answer your questions and hear your thoughts and feedback.

39:56 - - We have so much great content to share and bonus deep dive material that’ll be available on our YouTube channel.

40:03 - - So next up, stay tuned to hear directly from the Adobe Spark team on how they built that lovely new PWA we got a glimpse of earlier.

40:12 - - Now we’re off to watch, too, and join you over in the Chrome Dev Summit Adventure.

40:17 - (playful music).