The ‘Capable Web’: A 10 Year Retrospective

September 4th, 2018

When we introduced Chrome 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.

As the very first pages were served on the open web in 1990, 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 Common Gateway Interface 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.

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. “Ajax” 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.

2008 – 2014: Web applications, HTML5, and the start of the mobile era

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 video, audio, and canvas 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. Chrome experiments have captured great examples of rich experiences that are a direct result of the web’s improved performance.

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 Google Gears) to help make building web apps easier. We could now make responsive, offline-enabled applications with AppCache and WebSQL, request permission to access the user’s geolocation, and even understand the orientation of the user’s device.

WebSocket 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.

Plink is an interactive music experiment synchronising player state via websockets.

Four major APIs came to Chrome in 2011. WebGL, Web Audio, and the Fullscreen API let us build rich and immersive experiences that could take advantage of the entire screen. IndexedDB — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.

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.

A bumper year for game-changing experiences on the web arrived in 2012. On the back of WebGL and Fullscreen, the Pointer Lock and Gamepad APIs let us build games and other web experiences that felt really interactive. The game-changing collection of WebRTC 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.

One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)

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.

2015-2018: PWA, The Extensible Web, and deeper integration era

In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The Extensible Web manifesto 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. Service Worker 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.

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…

    • Fast—they load instantly
    • Reliable—they never show the “downasaur,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs
    • Engaging—they respond quickly to user interactions with silky-smooth animations and no janky scrolling
    • Capable—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

As PWAs became more established, so did the capabilities of the platform. The Background Sync API 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 Network Information API.

Pointer Events, 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.

In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived..

The Image Capture and Media Capture APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The Web Share API let sites share data directly with the operating system’s native sharing systems.

The Web Bluetooth API let a user securely select a Bluetooth LE device and have a webpage interact with the device. The Web USB API enabled the same level of connectivity, but to devices connected to the user’s machine.

WebAssembly (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.

Web VR 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.

Forward to the future

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 Feature Policy 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.

Layered APIs 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.

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 WICG and based on the principles in the Extensible Web Manifesto. 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.

Here’s to the future of an even-more-capable open web.

Posted by Paul Kinlan, the Wizzy Web Warrior.