Standards for Web Applications on Mobile: current state and roadmap

Status and changes

This document is the 16th edition of this overview of mobile Web applications technologies. The previous edition was released in October 2014. A live version of this document accepts contributions on the W3C Web and Mobile Interest Group Github repository.

This document is published by the Web and Mobile Interest Group; feedback on every aspect of this document should be sent to public-web-mobile@w3.org, the publicly archived mailing list of the interest group, or raised as issues on the Github repository, or alternatively to the author (dom@w3.org). It will serve as input for the next iteration of the document.

Since that previous edition, the document has been re-organized around the categories defined as Application Foundations, a set of high-level grouping of features that highlight the needs from users and developers for the next generation of Web technologies.

It also now includes a short summary of the changes in the Recommendation track brought by the 2014 update of the W3C Process.

The following changes in the Web platform since October 2014 are documented in this udpate:

Published as First Public Working Draft

• Packaging on the Web, a joint work by the Web Applications Working Group and the Technical Architecture Group describing a Web-compatible format for packaging resources together, was published as a First Public Working Draft;
• Frame Timing, an API developed by the Web Performance Working Group to provide detailed frame-per-second data on running Web applications, was published as a First Public Working Draft;

Returned to Working Draft

• the Resource Timing API which had reached Candidate Recommendation status, had its scope expanded with a few additional properties and has thus returned to Working Draft status;

Reached Candidate Recommendation

• the battery API was republished as a Candidate Recommendation after a short Last Call review;
• the Web Cryptography API reached Candidate Recommendation status;

Reached Proposed Recommendation

• the Server-Sent Events, Pointer Events and Vibration APIs reached Proposed Recommendation status;

Reached Recommendation

• the Indexed Database API was released as a W3C Recommendation;

Specification merged, split or abandoned

• the fullscreen API, previously co-developed in W3C by the Web Applications and CSS Working Groups, has been abandoned by these groups and has now fully moved to the WHATWG;

Newly tracked

• the document now tracks the Task Scheduler API from the System Applications Working Group as an additional tool in the application lifecycle category; it allows to schedule a given task at a given time.

Document structure

The features that these technologies add to the Web platform are organized around the application foundations for the Open Web Platform, a set of high-level components that application developers rely on to build their Web-based content and services.

The following application foundations are considered in this document: core web design and development, media and real-time communications, usability and accessibility, device interaction, application lifecycle, payment and services, performance & tuning, and security & privacy. In addition, it covers topics related to network integration.

The Web as an application development platform

In each category of features, a table summarizes for each feature:

• which W3C specification defines the feature,
• which W3C group is responsible of the said specification,
• the stage of the specification in the W3C Recommendation track (see below),
• the estimated stability of the feature, i.e. how little the author expects it to change, from an early draft that can still evolve a lot, to a finished document with only minor expected changes,
• a link to the latest editors draft of the document, and a representation of the recent editing activity;
• some qualitative indication on availability of implementations on mobile devices, based on data collected primarily from Can I Use… and mobile HTML5, completed with data from Mozilla developer network, QuirksMode, JWPalyer's state of HTML5 video, Chromium Dashboard, Internet Explorer Platform status, the Device APIs Working Group Implementation status as well as the author’s understanding of the mobile devices market (see also the code used to generate the support icons)
• When available, a link to a relevant tutorial on WebPlatform Docs, and to relevant on-line training courses on W3DevCampus
• a link to the test suite for the said feature, and when relevant, a github ribbon to access the underlying git repository.

W3C creates Web standards by progressing documents through its Recommendation track, with the following stages:

• “Editors drafts” represent the current view of the editors of the specification but have no standing in terms of standardization.
• “Working Drafts” (WD) are early milestones of the Working Group progress.
• “Last Call Working Drafts” signal that the Working Group has determined that the specification fulfills its requirements and all the known issues have been resolved, and thus requests feedback from the larger community.
• “Candidate Recommendations” (CR) trigger a call for implementations where implementors are invited to implement the specification and send feedback; Working Groups are expected to show the specification gets implemented by running test suites they have developed.
• “Proposed Recommendations” (PR) manifests that the group has gathered sufficient implementation experience, and triggers the final review by W3C Members
• “W3C Recommendations” (Rec) are stable and completed Web standards; these documents only get updated rarely, through the “Edited Recommendation” process, as a results from errata collected by Working Groups.

For groups that have adopted it, the 2014 update of the W3C Process simplifies a bit the progression by removing the Last Call stage &em; instead of a single global call for review addressed to the whole community, Working Groups are empowered with solicitting reviews from their various related communities as long as they can demonstrate sufficient wide review of the specification before requesting transition to Candidate Recommendation.

Prior to starting standardization, a Working Group needs to be chartered, based on input from W3C Members, often through the organization of a workshop, or after the reception of a W3C Member Submission.

W3C has set up Community Groups, a mechanism that allows anyone to do experimental work within the W3C infrastructure, under IPR rules that are compatible to transition the work to the W3C standardization process.

1. Core Web Design and Development

1.1 Graphics and Layout

SVG, Scalable Vector Graphics, provides an XML-based markup language to describe two-dimensions vector graphics. Since these graphics are described as a set of geometric shapes, they can be zoomed at the user request, which makes them well-suited to create graphics on mobile devices where screen space is limited. They can also be easily animated, enabling the creation of very advanced and slick user interfaces.

The integration of SVG in HTML5 opens up new possibilities, for instance applying advanced graphic filters (through SVG filters) to multimedia content, including videos. SVG 2.0 is set to facilitate that integration and complete the set of features in SVG.

In complement to the declarative approach provided by SVG, the <canvas> element added in HTML5 enables a 2D programmatic API that is well-suited for processing graphics in a less memory intensive way. That API not only allows rendering graphics, but can also be used to do image processing and analysis — HTML 5.1 adds the ability to do that processing in a separate Web Worker.

Both SVG and HTML can be styled using CSS (Cascading Style Sheets); in particular, CSS3 (the third level of the specification) is built as a collection of specifications set to offer a large number of new features that make it simple to create graphical effects, such as rounded corners, complex background images, shadow effects (CSS Backgrounds and Borders), rotated content (CSS Transforms, including with 3D effects).

Animations can be described declaratively via CSS Animations, and CSS Transitions.

Animations can also be managed via scripting through the API exposed in Web Animations; as they can be resource intensive, the possibility offered by the Timing control for script-based animations API to manage the rate of updates to animations can help keep them under control.

To ensure optimal performances when animating parts of an app, authors can make use of the CSS will-change property to let browsers compute the animation ahead of its occurrence.

CSS Flexbox allows to build complex layouts as required for interactive applications on small screens.

Fonts play also an important role in building appealing graphical interfaces, but mobile devices are in general distributed with only a limited set of fonts. WOFF 1.0 (Web Open Font Format) addresses that limitation by making it easy to use fonts that are automatically downloaded through style sheets, while keeping the size of the downloaded fonts limited to what is actually needed to render the interface. The upcoming WOFF 2.0 update to that format promises 25%-smaller download sizes; on mobile, a 35% reduction in the time needed to download and display these fonts has been measured.

Given the time required for downloading fonts over mobile networks, authors need to adapt their content to the progressive availability of fonts; CSS Font Loading gives the necessary events to developers to enable that adaptation.

Another important aspect in graphics-intensive applications (e.g. games) is the possibility to use the entire screen to display the said graphics; the work on a Fullscreen API to request and detect full screen display, previously co-developed by the Web Applications and CSS Working Groups, has now fully moved to the WHATWG.

Likewise, in these scenarios, it is often useful to be able to lock the orientation of the screen; the Screen Orientation API allows not only to detect orientation change, but also to lock the orientation in a specific state.

NB: a 3D graphic API for HTML5 canvas, called WebGL, has been developed outside of W3C, as part of the Khronos Group; this API has been built to be compatible with OpenGL ES, i.e. for embedded systems, and is intended to work on mobile devices.

Feature	Specification	Working Group	Maturity	Stability	Latest editors draft	Current implementations	Developers doc	Test suite
2D Vector Graphics	Scalable Vector Graphics (SVG) 1.1 Specification	SVG		Finished	New version of SVG (SVG 2.0) in preparation	Widely deployed		High coverage
	Scalable Vector Graphics (SVG) 2			Early draft	Last updated January 2015	N/A		N/A
2D Programmatic API	HTML Canvas 2D Context	HTML		Stable	Last updated December 2014	Widely deployed		Good coverage
	Canvas Proxy for Web Workers in HTML 5.1			Early draft	Last updated October 2014	None		None
Rounded Corners	CSS Backgrounds and Borders Module Level 3	CSS		Mostly finished	Last updated August 2014	Well deployed		Good coverage
Complex background images	CSS Backgrounds and Borders Module Level 3			Mostly finished	Last updated August 2014	Well deployed		Good coverage
Box shadow effects	CSS Backgrounds and Borders Module Level 3			Mostly finished	Last updated August 2014	Well deployed		Good coverage
2D Effects	CSS Transforms Module Level 1	SVG and CSS		Mostly stable	Last updated January 2015	Well deployed		Good coverage
3D Effects	CSS Transforms Module Level 1			Stabilizing	Last updated January 2015	Well deployed		Good coverage
Animations	CSS Animations	CSS		Early draft	Last updated January 2015	Well deployed		well started
	CSS Transitions			Early draft	Last updated January 2015	Well deployed		well started
	Web Animations 1.0	SVG and CSS		Early draft	Last updated January 2015	Limited		Well started
	Timing control for script-based animations	Web Performance		Stable	Last updated September 2014	Well deployed		Well started
	CSS Will Change Module Level 1	CSS		Early draft	Last updated November 2014	Limited		N/A
Complex layouts	CSS Flexible Box Layout Module Level 1			Mostly finished	Last updated January 2015	Well deployed		Good coverage
Downloadable fonts	WOFF File Format 1.0	WebFonts		Finished	Finished	Good deployment		Good coverage
	WOFF File Format 2.0			Early draft	Last updated October 2014	Very limited		N/A
	CSS Font Loading Module Level 3	CSS		Stabilizing	Last updated January 2015	Limited		N/A
Orientation Lock	The Screen Orientation API	Web Applications		Early draft	Last updated October 2014	Growing deployment		None

1.2. Device Adaptation

Mobile devices not only differ widely from traditional computers, but they also have a lot of variations among themselves, in term of screen size, resolution, type of keyboard, media recording capabilities, etc.

The Device Description Repository API is a unified server-side API that allows Web developers to retrieve data on the devices that are accessing their pages on a variety of device information database.

The Media Capture Streams API exposes some specific information on capabilities of camera and microphones to make it possible to take advantage of the large variety of media capturing devices provided on mobile phones.

CSS Media Queries offer a mechanism that allows adapting the layout and behavior of a Web page based on some of the characteristics of the device, including the screen resolution — to which Media Queries Level 4 proposes to add the availability and type of a pointing device, the ability to hover over elements, and the ambient luminosity. It also lets developers the ability to define media queries that react to script-defined variables, making it easier to integrate these adaptation rules in the overall logic of the app.

CSS Device Adaptation defines a set of CSS directives to define the size on which this layout should be based, relatively to the size of the underlying device — specifying what has been implemented using the <meta name="viewport"> element so far.

The viewport-relative CSS units vw and vh let design layouts that adapt to the dimensions of the viewport, while CSS Mobile Text Size Adjustment lets text adapt to zoomed parts of a page.

The Responsive Images Community Group (RICG) developed an extension to HTML, known as the picture element, that allows authors define what image to load depending on device capabilities and/or other media features.

As a complementary approach, the srcset attribute, specified by the WHATWG and also published as an extension to HTML, let Web developers define the various device pixel ratios of an image, letting the browser pick the best choice for the pixel density of the screen. As of January 2014, there is general agreement amongst browser vendors to implement both picture and srcset.

SVG, which lets define images that can be scaled up and down without any loss of quality, is another critical tool to the development of Web applications that adapt to the resolution of the underlying device.

Feature	Specification	Working Group	Maturity	Stability	Latest editors draft	Current implementations	Developers doc	Test suite
Device information	Device Description Repository Simple API	Device Description		finished	N/A	Limited		Good Coverage
Media Capture Capabilities	Source capabilities in Media Capture and Streams	Device APIs and Web Real-Time Communications		Stabilizing	Last updated December 2014	None		None
CSS-based adaptation	Media Queries	CSS		Finished	Finished	Widely deployed		Good coverage
	Media Queries Level 4			Early draft	Last updated January 2015	None		None
	CSS Device Adaptation			Early draft	Last updated October 2013	Limited		N/A
	viewport relative units in CSS Values and Units Module Level 3			Mostly finished	Last updated January 2015	Well deployed		Good coverage
	CSS Mobile Text Size Adjustment Module Level 1			Early draft	Last updated April 2013	Limited		N/A
Responsive images	picture element in HTML 5.1	HTML		stabilizing	Last updated October 2014	Limited		Started
	srcset attribute in HTML 5.1			Stabilizing	Last updated October 2014	Growing deployment		Well started
	Scalable Vector Graphics (SVG) 1.1 Specification	SVG		Finished	New version of SVG (SVG 2.0) in preparation	Widely deployed		High coverage

1.3. Forms

The ability to build rich forms with HTML is the basis for user input in most Web-based applications. Due to their limited keyboards, text input on mobile devices remains a difficult task for most users; HTML5 address parts of this problem by offering new type of form controls that optimize the way users will enter data:

• date and time entries can take advantage of a number of dedicated form controls (e.g. <input type="date">) where the user can use a native calendar control;
• the <input type="email">, <input type="tel"> and <input type="url"> can be used to optimize the ways user enter these often-difficult to type data, e.g. through dedicated virtual keyboards, or by accessing on-device records for these data (from the address book, bookmarks, etc.);
• the inputmode attribute (proposed in HTML 5.1) defines the type of textual input expected in a text entry;
• the pattern attribute allows both to guide user input as well as to avoid server-side validation (which requires a network round-trip) or JavaScript-based validation (which takes up more resources);
• the placeholder attribute allows to guide user input by inserting hints as to what type of content is expected in a text-entry control;
• the <datalist> element allows creating free-text input controls coming with pre-defined values the user can select from; HTML 5.1 defines a mechanism for the autocomplete attribute to automatically fill input fields based on well-known data for the user.

Feature	Specification	Working Group	Maturity	Stability	Latest editors draft	Current implementations	Developers doc	Test suite
Date and time entries	Data and Time input element in HTML5	HTML		Mostly stable	Last updated October 2014	Growing		Just started
Customized text entries (tel, email, url)	telephone, email and URL input element in HTML5			Stable	Last updated October 2014	Well deployed		Just started
Input modality	inputmode attribute in HTML 5.1			Early draft	Last updated October 2014	None		None
Input pattern	pattern attribute in HTML5			Stable	Last updated October 2014	Limited but growing		Just started
Input hint	placeholder attribute in HTML5			Stable	Last updated October 2014	Well deployed		Started
Autocomplete for text entries	datalist element in HTML5			Stable	Last updated October 2014	Growing		Started
	autocomplete attribute in HTML 5.1			Early draft	Last updated October 2014	Very limited		None

1.4 Data storage

A critical component of many applications is the ability to save state, export content, as well as integrate data from other files and services on the system.

For simple data storage, the Web Storage specification offers two basic mechanisms, localStorage and sessionStorage, that can preserve data respectively indefinitely, or on a browser-session basis.

For richer interactions, the Web platform provides the File Reader API makes it possible to load the content of a file.

Discussions have started on a new proposal for a sandboxed filesystem API.

Meanwhile, the HTML5 download attribute provides a simply mechanism to trigger a file download (rather than a page navigation), with the possibility of setting a user-friendly filename.

On top of this file-based access, the Indexed Database API (IndexedDB) defines a database of values and hierarchical objects that integrates naturally with JavaScript, and can be queried and updated very efficiently - a new version of the specification is under consideration. Note that the work around a client-side SQL-based database, which had been started in 2009, has been abandoned in favor of this new system.

As more and more data need to be stored by the browser (e.g. for offline usage), it becomes critical for developers to get reliable storage space, which the proposed Quota Management API will offer to Web applications.

Likewise, as some of this data need to be encrypted, the Web Cryptography API from the Web Cryptography Working Group exposes strong cryptography primitives to Web applications, and can be bound to pre-provisioned keys via the WebCrypto Key Discovery API.

Feature	Specification	Working Group	Maturity	Stability	Latest editors draft	Current implementations	Developers doc	Test suite
Simple data storage	Web Storage	Web Applications		Finished	Last updated May 2014	Well deployed		Complete
File operations	File API			Stabilizing	Last updated November 2014	Getting well deployed		Started
	FileSystem API		N/A	Early proposal	Last updated January 2015	N/A		None
	download attribute in HTML5	HTML		Stable	Last updated October 2014	Growing		None
Database query/update	Indexed Database API	Web Applications		Stable	Last updated January 2015	Well deployed		Good coverage
	Web SQL Database		Retired	Abandoned	N/A	Somewhat deployed, but won’t be further deployed		N/A
Quota for storage	Quota Management API			Early work	Last updated February 2014	Very limited		None
Encrypted storage	Web Cryptography API	Web Cryptography		Stable	Last updated November 2014	Well deployed		Early start
	WebCrypto Key Discovery			Early work	Last updated May 2014	None		None