Wednesday, 9 May, 2018 UTC
Summary
The web is a global treasure, and has many strengths we all enjoy. It is a distribution platform like no other, providing people around the world access to a diverse range of content and enabling businesses to reach customers wherever they are. Underpinning the web’s success is its community and a set of fundamentally open standards, which ensures it remains dynamic and available to all.
From PageRank to Chromium, Google has been deeply invested in the web’s continued success. This week at Google I/O, our annual developer conference, we gave a State of the Union presentation to catalog some of our recent efforts to help the web continue to thrive and work well for everyone. We recap the key themes below, but encourage you to check out all the talks on YouTube.
Service Worker
The introduction of the Service Worker API is one of the most significant improvements to the web in recent history. It frees developers from the limited lifecycle of pages, working in the background to intercept network requests and handle incoming events to enable web apps to work offline. With service workers your site can receive push notifications, synchronize data in the background, and more. Apple rolled out support for service workers in Safari 11.1 on iOS and MacOS this March and Microsoft Edge shipped service workers just last week — meaning that every major modern browser now supports the standard. Using service workers can be a big change to your architecture, so to make it simpler we created Workbox, which wraps up many common, powerful service worker patterns into an easy-to-use API. We've just released version 3 of this library, built around modules allowing you to use only the features that you need.
Progressive Web Apps (PWAs)
Service workers provide the backbone for many of the capabilities of a PWA. Companies around the world, in many different industries, have been seeing incredible success building PWAs. Starbucks, who launched their PWA site last year, saw a 2X increase in their daily active users. In fact, across advertising sites that we measured, when a site switches to a PWA they see on average a mobile conversion rate boost of 20%.
Many early PWAs were focused on mobile, and the benefits now also extend to desktop. Chrome will soon provide support for users to “install” PWAs to their desktop. The site will get its own icon and launch in a standalone window, while retaining powerful features that one expects in a browser like find in page, shareable URLs, Google Cast support, and more. At I/O we demonstrated how Spotify is deploying their rich media experience as a desktop PWA. “Install” support for desktop PWA’s will be coming to ChromeOS in Chrome 67 in early June, and on Windows and macOS later this year.
WebAssembly
WebAssembly enables websites to run high-performance, low-level code written in languages like C or C++, and opens up entirely new classes of content on the web platform. In March, AutoCAD from Autodesk took a 35-year-old-codebase — older than the web itself — and compiled it to run directly inside a browser using WebAssembly. AutoCAD is now just a link away, meaning you can make edits to your CAD drawing directly in a browser, regardless of device or operating system. AutoCAD’s engineering team has a single shared C++ codebase, and when their desktop team makes changes, they are easily integrated into the AutoCAD web app.
If you’re interested in learning how to port code or write your own, check out the WebAssembly codelab, demonstrating the interplay between C libraries and the DOM. Whether you’re using a complex library written in C, want to bring a new codec into the web platform, or using an engine such as Unity or Unreal Engine, WebAssembly is here to help.
Lighthouse
Lighthouse is a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and guidance for improving your users’ experience. It can be accessed directly from inside Chrome’s DevTools, run from the command-line, or integrated with other development products. In 2018 alone, half a million developers are running Lighthouse against their sites on a regular basis. We know that the web changes fast — Lighthouse can help you stay up-to-date with the latest performance best-practices. Lighthouse 3.0, announced at I/O, will be available to everyone later this week.
Lighthouse gives you clarity into your site’s load performance in a controlled environment. However, if you want to see how your site performs for real users in the real world, then check out the Chrome User Experience Report. The report now provides origin-level performance metrics for the four million most visited websites. To learn more about how these and other tools can help you get a complete view of your site’s performance, check out our speed tools infographic.
AMP
AMP is a web component library and ecosystem for building reliably fast websites with great user experience at scale. There are now over six billion AMP pages from 46 million domains, with a median load time of less than one second from Google Search. Businesses are seeing success with AMP: AliExpress, the global online retail marketplace, recently launched a new mobile site as an AMP-driven Progressive Web App. The new site increased their conversion rate for non-search traffic by an incredible 31%.
Content consumption on mobile is changing, with bite-sized, fullscreen storytelling formats becoming increasingly popular. To help meet the needs of web publishers, the AMP project recently announced the development of AMP stories, a rich set of web components built for mobile-first storytelling. The format is under continued development, and we encourage you to experiment with building your own stories and give the AMP team your feedback.
Web Packaging
Web Packaging is a set of emerging technologies that we believe will redefine how web content is distributed on the web and shared between users. It allows publishers to bundle their content for distribution by other parties, while keeping the integrity guarantees of HTTPS. As part of exploring the novel use cases enabled by Web Packaging, we realized that there was an interesting opportunity for AMP. Through collaboration with the AMP team and the web community, we were able to design a solution that allows AMP documents to retain the publisher's original URL when served from the AMP cache.
As a showcase of our efforts, AMP project collaborators Food Network and Pinterest have built demos of Web Packaging, such as the one below. If you are curious to learn more, the AMP team wrote an article that goes into more detail about how Web Packaging benefits users and publishers. Beyond the AMP application, we are excited about what Web Packaging technologies will enable and are looking forward to refine our thinking with your help.
Polymer
Polymer is a JavaScript library that helps you create custom reusable web components to share with other developers or combine to build performant, maintainable apps. At I/O we launched version 3.0 of the library, which makes some significant upgrades to the Polymer ecosystem. We’ve completed support for using npm as the package management system and ES6 modules as the unit of composition, making it easy to use Polymer-based web components alongside your other favorite web development tools and frameworks.
We’ve also introduced LitElement, a new web component base-class that combines the expressive power of Lit-HTML with web components to make it even easier to create lightweight, reactive components using a modern and expressive templating syntax.
We’re also releasing the PWA Starter Kit, a comprehensive starting point for building web component-driven PWAs that are fast, reliable, responsive, themable, and score top marks in our Lighthouse PWA and performance criteria.
Angular
At I/O this year the Angular team gave an overview of the growth of the community, and touched on some of the exciting new capabilities that have landed across the core framework, CLI, and Angular Material library in version 6. Angular is used by millions of developers and has built up a huge amount of momentum and a fantastic ecosystem. New commands released in version 6 like `ng update` and `ng add` will keep your application up to date and help developers move faster as the Angular team continues to balance stability and innovation.
The Angular team also gave a sneak peek at some of the improvements they are making under the hood of Angular with Project Ivy. This will make Angular simpler to debug and faster to compile and run, in a way that works with existing applications. The team showed demonstrated the utility of these improvements in the form of a small Hello World application where the Angular features that weren't used were automatically removed from the application's JavaScript bundle.
Our mission at Google and in Chrome is to work with the community to create experiences that are fast, integrated, reliable, and engaging. We’re excited by the powerful new capabilities that have come to the open web platform, and the comprehensive set of tools that enable you to rapidly build high quality sites for your users. To stay up to date on the latest advancements in the web, visit our developer portal or check out the talks from this year’s I/O on the Google Developers YouTube channel. And we’d love to see you at the upcoming Chrome Dev Summit later this year.
Posted by Malte Ubl and Ben Galbraith
From PageRank to Chromium, Google has been deeply invested in the web’s continued success. This week at Google I/O, our annual developer conference, we gave a State of the Union presentation to catalog some of our recent efforts to help the web continue to thrive and work well for everyone. We recap the key themes below, but encourage you to check out all the talks on YouTube.
Service Worker
The introduction of the Service Worker API is one of the most significant improvements to the web in recent history. It frees developers from the limited lifecycle of pages, working in the background to intercept network requests and handle incoming events to enable web apps to work offline. With service workers your site can receive push notifications, synchronize data in the background, and more. Apple rolled out support for service workers in Safari 11.1 on iOS and MacOS this March and Microsoft Edge shipped service workers just last week — meaning that every major modern browser now supports the standard. Using service workers can be a big change to your architecture, so to make it simpler we created Workbox, which wraps up many common, powerful service worker patterns into an easy-to-use API. We've just released version 3 of this library, built around modules allowing you to use only the features that you need.
Progressive Web Apps (PWAs)
Service workers provide the backbone for many of the capabilities of a PWA. Companies around the world, in many different industries, have been seeing incredible success building PWAs. Starbucks, who launched their PWA site last year, saw a 2X increase in their daily active users. In fact, across advertising sites that we measured, when a site switches to a PWA they see on average a mobile conversion rate boost of 20%.
Many early PWAs were focused on mobile, and the benefits now also extend to desktop. Chrome will soon provide support for users to “install” PWAs to their desktop. The site will get its own icon and launch in a standalone window, while retaining powerful features that one expects in a browser like find in page, shareable URLs, Google Cast support, and more. At I/O we demonstrated how Spotify is deploying their rich media experience as a desktop PWA. “Install” support for desktop PWA’s will be coming to ChromeOS in Chrome 67 in early June, and on Windows and macOS later this year.
WebAssembly
WebAssembly enables websites to run high-performance, low-level code written in languages like C or C++, and opens up entirely new classes of content on the web platform. In March, AutoCAD from Autodesk took a 35-year-old-codebase — older than the web itself — and compiled it to run directly inside a browser using WebAssembly. AutoCAD is now just a link away, meaning you can make edits to your CAD drawing directly in a browser, regardless of device or operating system. AutoCAD’s engineering team has a single shared C++ codebase, and when their desktop team makes changes, they are easily integrated into the AutoCAD web app.
If you’re interested in learning how to port code or write your own, check out the WebAssembly codelab, demonstrating the interplay between C libraries and the DOM. Whether you’re using a complex library written in C, want to bring a new codec into the web platform, or using an engine such as Unity or Unreal Engine, WebAssembly is here to help.
Lighthouse
Lighthouse is a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and guidance for improving your users’ experience. It can be accessed directly from inside Chrome’s DevTools, run from the command-line, or integrated with other development products. In 2018 alone, half a million developers are running Lighthouse against their sites on a regular basis. We know that the web changes fast — Lighthouse can help you stay up-to-date with the latest performance best-practices. Lighthouse 3.0, announced at I/O, will be available to everyone later this week.
Lighthouse gives you clarity into your site’s load performance in a controlled environment. However, if you want to see how your site performs for real users in the real world, then check out the Chrome User Experience Report. The report now provides origin-level performance metrics for the four million most visited websites. To learn more about how these and other tools can help you get a complete view of your site’s performance, check out our speed tools infographic.
AMP
AMP is a web component library and ecosystem for building reliably fast websites with great user experience at scale. There are now over six billion AMP pages from 46 million domains, with a median load time of less than one second from Google Search. Businesses are seeing success with AMP: AliExpress, the global online retail marketplace, recently launched a new mobile site as an AMP-driven Progressive Web App. The new site increased their conversion rate for non-search traffic by an incredible 31%.
Content consumption on mobile is changing, with bite-sized, fullscreen storytelling formats becoming increasingly popular. To help meet the needs of web publishers, the AMP project recently announced the development of AMP stories, a rich set of web components built for mobile-first storytelling. The format is under continued development, and we encourage you to experiment with building your own stories and give the AMP team your feedback.
Web Packaging
Web Packaging is a set of emerging technologies that we believe will redefine how web content is distributed on the web and shared between users. It allows publishers to bundle their content for distribution by other parties, while keeping the integrity guarantees of HTTPS. As part of exploring the novel use cases enabled by Web Packaging, we realized that there was an interesting opportunity for AMP. Through collaboration with the AMP team and the web community, we were able to design a solution that allows AMP documents to retain the publisher's original URL when served from the AMP cache.
As a showcase of our efforts, AMP project collaborators Food Network and Pinterest have built demos of Web Packaging, such as the one below. If you are curious to learn more, the AMP team wrote an article that goes into more detail about how Web Packaging benefits users and publishers. Beyond the AMP application, we are excited about what Web Packaging technologies will enable and are looking forward to refine our thinking with your help.
A demo using Web Packaging with an AMP page from Google Search
Polymer
Polymer is a JavaScript library that helps you create custom reusable web components to share with other developers or combine to build performant, maintainable apps. At I/O we launched version 3.0 of the library, which makes some significant upgrades to the Polymer ecosystem. We’ve completed support for using npm as the package management system and ES6 modules as the unit of composition, making it easy to use Polymer-based web components alongside your other favorite web development tools and frameworks.
We’ve also introduced LitElement, a new web component base-class that combines the expressive power of Lit-HTML with web components to make it even easier to create lightweight, reactive components using a modern and expressive templating syntax.
We’re also releasing the PWA Starter Kit, a comprehensive starting point for building web component-driven PWAs that are fast, reliable, responsive, themable, and score top marks in our Lighthouse PWA and performance criteria.
Angular
At I/O this year the Angular team gave an overview of the growth of the community, and touched on some of the exciting new capabilities that have landed across the core framework, CLI, and Angular Material library in version 6. Angular is used by millions of developers and has built up a huge amount of momentum and a fantastic ecosystem. New commands released in version 6 like `ng update` and `ng add` will keep your application up to date and help developers move faster as the Angular team continues to balance stability and innovation.
The Angular team also gave a sneak peek at some of the improvements they are making under the hood of Angular with Project Ivy. This will make Angular simpler to debug and faster to compile and run, in a way that works with existing applications. The team showed demonstrated the utility of these improvements in the form of a small Hello World application where the Angular features that weren't used were automatically removed from the application's JavaScript bundle.
Our mission at Google and in Chrome is to work with the community to create experiences that are fast, integrated, reliable, and engaging. We’re excited by the powerful new capabilities that have come to the open web platform, and the comprehensive set of tools that enable you to rapidly build high quality sites for your users. To stay up to date on the latest advancements in the web, visit our developer portal or check out the talks from this year’s I/O on the Google Developers YouTube channel. And we’d love to see you at the upcoming Chrome Dev Summit later this year.
Posted by Malte Ubl and Ben Galbraith