The web is in rapid development, both on desktop and mobile. Everyone can easily build fast and immersive pages. At the same time, developer tools are becoming more powerful and diverse. At Google I/O 2018, chrome team leader Ben Galbraith and amp project leader Martha joined forces to paint a picture of the state of the web from Google's perspective.
Service Worker
At present, major browsers including safari and edge already support Service Worker.
A large number of PWAs have also begun to show their prominence in commercial activities. For example , the PWA of ofo (which needs to be over the wall) uses Geolocation for positioning and Camera API for QR code scanning, so that users can use the car without downloading and installing the app. 1800flowers.com increased transaction volume by 50% through PWA. After EDITORA GLOBA, the largest media company in Brazil, upgraded its website to a PWA, the time spent on users increased by 50%. Starbucks also benefited from PWAs, with both daily active users and monthly active users doubling. google ads customers saw an average 20% increase in sessions after upgrading their site to a PWA.
Many Google products also use Service Workers. Service Workers reduce external JavaScript downloads by 50% per load for Google Search and reduce interaction latency by 6%. Because Bulletin uses Service Worker, the loading speed of the first screen is greatly improved, and at the same time, a set of codes is implemented to run on multiple platforms such as Android, iOS, and desktop. Google Maps developed a PWA for India's weak network environment and low-performance devices, saving users the cost of data.
The desktop version of chrome will add the add to home screen function in June, so that PWAs can be opened directly by clicking on the icons on the desktop like ordinary applications.
web media
The data collected by chrome shows that 15% of the time on Android devices and more than 20% of the time on the desktop is playing video. More than 30,000 years of video are watched every day around the world. Therefore, a large number of media-related APIs have been proposed.
The Media Session API allows pages to provide custom behavior for standard media interactions. Vimeo implements this interface to pause the video playback when the screen is locked.
The Media Capabilities API enables browsers to automatically select the source of a video stream based on device conditions.
Picture-in-Picture Support enables video to be played anywhere on the display.
The Presentation API provides more precise control over what is displayed on the second display.
AV1 video encoding format will also be applied to chrome this year.
WebAssembly
Through WebAssembly, C/C++ applications can be directly ported to the Web, and Web applications with extremely high performance requirements can also be rewritten in languages such as C/C++, and web games will also enter a new stage.
Web page performance
The continuous optimization of JavaScript performance by the V8 engine has greatly improved the response speed of web applications.
Speedometer is a browser benchmark that measures web application performance. The Chrome team and the community collaborated on Speedometer 2.0. As you can see from the above figure, for the same hardware device, if your application is built based on React, the performance is improved by a full 112%.
In addition, Google has released a large number of Web-related tools, libraries, etc. in the past few months.
Such as lighthouse 3.0, Workbox
I will introduce each interesting new product in detail in the next article, combining the speech video of this conference and the existing materials.
The video address of this speech (need to overturn the wall).