Core Mobile Web Platform — 2012

1.1 Audience

The primary audience for this document is standardization groups within the W3C as well as equipment manufacturers and browser vendors. The CG also intends it to be of interest to others in its chartered constituency, especially developers, for feedback on the selection of use cases and the derivation of technology requirements from those use cases.

1.2 Goals

In respect of Coremob Charter item 1. above, developers should be able to rely upon a set of Web technologies being consistently present and interoperably implemented across a wide range of browsers.

Technology specifications do not advance at a similar rate and are not necessarily of equally widespread utility for particular application use cases. In addition, some depend on others. This document is a description of a subset of Web platform technologies, and provides for a limited, or base set of such use cases.

The CG may go on to produce a number of further descriptions of subsets of Web platform technology specifications which will provide for increasingly sophisticated application use cases.

1.3 Methodology

The use cases chosen reflect a selection of popular applications that have been created using "native" techniques. Although the chosen set of use cases is limited, and the functionality implied by them is (relatively speaking) simple, the set of functionalities is nonetheless described as being "aspirational" because it goes beyond the state of implementation by most current browsers, and indeed goes beyond the current state of specification of some of those features - see below Aspirational nature of the document for a discussion of the aspirational aspect, as construed in this revision.

Having identified features of the Web platform that are required to fulfill the use cases it is then possible to identify a set of technology specifications (or to note the absence of suitable specifications) that specify those features.

Further, having identified a set of specifications, it is then possible to identify a set of tests (or note the absence of such tests) that can be used to assess conformance with the identified specifications and also to propose a test environment in which those tests can be carried out.

1.4 Purpose of this Document

This document, as mentioned above, sets out the initial limited set of use cases; it derives Web platform technology requirements from them and it identifies technology specifications, at various states of maturity, that fulfill those requirements. It does not identify tests or test suites that match those technology specifications.

Since standardization work is required to complete the set of technologies required to fulfill the various use cases the document identifies, one of the purposes of the document is to point out that increased coordination between the groups that create standards would be beneficial in order to create a more coherent and pragmatically useful mobile Web application platform.

The intention of this document and subsequent editions, in regard of developers, is to solicit feedback on the use cases and on specific technology areas that are problematic when used in a mobile context. Developers are especially encouraged to contribute to the work of the CG, since it is hoped that such participation will reduce future maintenance and development costs for them and will also provide a means by which developers' voices may be heard by constituencies that need to hear them.

1.5 Aspirational nature of the document

To be clear, the CG is not expressing the judgment that it is not possible to use the Web platform to build a wide variety of applications that can be used in a mobile context. Indeed, there are applications that can be built on the Web platform that work well in a mobile delivery context. The group notes, though, that those applications are not usually specifically mobile in their use cases and tend to be similar in nature to applications that have desktop use cases as much as they have mobile use cases.

Further, the view that it is already practical to develop effective mobile Web applications is expressed with the caveat that there are many "quality of implementation" issues that developers may encounter. For example, the frame rate achievable when developing mobile games may not be sufficient, in some cases, and as another example the synchronization of playing sounds may not be adequate.

1.6 Mobile Focus

Mobile devices often have capabilities (such as a camera) or circumstances of use (such as periods off line, or frequent periods with low bandwidth for data transfer) that make mobile both a more rewarding environment for creation of applications and a more difficult environment for such implementations too.

With the rapid increase in uptake of use of mobile devices, both in developed markets and in less developed markets (perhaps as the only means of Web access in those markets), the CG believes that closing the gap between what can be achieved using Web technology on mobile and what can be achieved using "native application implementations" needs to narrow, urgently.

1.7 Other aspects of the CG's work

Other aspects of the CG's work, as mentioned in its charter, continue in parallel to the development of this document. Those activities include a "Gap analysis" of where there are existing test suites relevant to the technologies identified in this document, as well as discussion of a Test Framework within which to execute tests of the conformance of implementations of technologies identified here.

The CG's Web site and Wiki contain links to various aspects of the group's work.

1.8 Structure

The document has the following structure:

1. Introduction

   This section, containing information about the document, its history and its scope.

2. Use Cases

   Discusses the use cases that have been used to derive the requirements of Web technologies.

3. Required Technologies

   Discusses in abstract terms what technologies are needed to support the use cases.

4. Specifications Selected

   Discusses the specifications selected to implement "required technologies".

5. Missing Specifications

   Discusses technologies needed but not specified.

6. Quality of Implementation

   Discusses aspects of implementation of some of the selected technologies

2.1 Take pictures in a remote area without network coverage

Jenna is hiking in a remote area without network coverage. She takes high quality pictures using a Web application. The pictures are stored locally. She decides to post-process some of the pictures she took by applying ready made filters. She is able to continue taking pictures while the filters are applied. When she returns to an area with better network coverage, her pictures are updated to a remote server. While the upload is going on in the background she can continue taking pictures or can browse her previous shots to select the ones she wants to share with her friends.

Derived requirements: Req. 6, Req. 8, Req. 9, Req. 10, Req. 13, Req. 15, Req. 17, Req. 23.

2.2 Record voice memos

While on his morning commute, John records a short voice memo using a Web application. As he is offline, the audio file is stored locally. When he reaches the office, the audio file is asynchronously uploaded to the application's servers where it is transcribed.

Derived requirements: Req. 6, Req. 8, Req. 9, Req. 13, Req. 16, Req. 23.

2.3 Play a 2D Game

Fantastic Rafaela Sis' is a game the goal of which is to save an imprisoned prince. This is done by navigating a character, Rafaela, across various levels from left to right. Each level consist of a series of obstacles and enemies that the player has to avoid (by jumping over, shooting, etc). The character is controlled by tilting the device. Consequently, the game must be locked in landscape mode to avoid auto-rotation of the viewport interfering with the game play. It has a soundtrack per level and various sound effects.

Derived requirements: Req. 11, Req. 12, Req. 18, Req. 19, Req. 21.

2.4 Find the nearest subway station

Joe uses public transportation to visit his clients scattered around town. In order to find his way around he relies on a Web application that is able to locate him on a map, display the closest subway station and indicate in which direction he should walk to find it.

Derived requirements: Req. 21, Req. 22.

2.5 Read an online magazine

Jane likes to read the news on her commute to work. She uses a Web application on her tablet that she updates before leaving home. While on the subway, she is able to read the daily news, watch a video of the highlights of yesterday's football match and listen to the magazine's weekly political podcast. Jane is able to navigate through the application using the back and forward button of her browser. And when she finds an article she would like to share with her friend, Sam, she is able to copy and paste the URL into an email.

Derived requirements: Req. 4, Req. 6, Req. 7, Req. 13, Req. 14, Req. 19, Req. 20, Req. 24.

2.6 View a regular Web site

Annette is using her mobile device to access her bank's Web site. Although her bank has a dedicated native application and a mobile version of its site, the information she is looking for is only available on the main site. She is nonetheless able to consult it because her mobile browser supports the same set of Web standards as her desktop browser, and is capable of displaying that information despite the difference in screen size and pixel density.

Derived requirements: Req. 1, Req. 2.

2.7 Browse a responsive Web site

John is en route to his dental appointment. He is late, does not have a record of his dentist's phone number in his mobile device's address book, and has a very poor network connection. Fortunately, the dentist has a responsive Web site which displays with minimal use of resources on John's mobile device. He is able to find his dentist's phone number and call her.

Derived requirements: Req. 1, Req. 2, Req. 3, Req. 24.

2.8 Bookmarking a Web application

Paul uses the same Web mail application on various devices and browsers. He would like to bookmark it so that it is easily recognizable across his different devices yet blends in with how other applications are portrayed in the given environment.

Derived requirements: Req. 5.

3.1 General

Req. 1: A User Agent must support technology commonly available on desktop browsers, so that Web sites and applications designed for desktop are still usable on mobile.

Req. 2: The User Agent must be able to display content specifically targeted at mobile devices.

Req. 3: It must be possible for the User Agent to download and display different content depending on device or User Agent properties such as screen size, pixel density, etc.

Req. 4: The User Agent must support rich typography including using downloadable fonts.

3.2 App-specific

Req. 5: It must be possible to provide the User Agent with metadata a such as the application's name, icon, etc.

Req. 6: It must be possible to make an application available off-line.

Req. 7: The User Agent must allow the application developer to define URLs for chosen resources (for example for bookmarking or sharing) and to manipulate session history for single page applications.

Req. 8: It must be possible for Web application user interfaces to occupy all the screen space yet adapt to different screen sizes without leaving unused space or overflowing.

Req. 9: It must be possible for Web application user interfaces to transition smoothly from one state to another.

Req. 10: It must be possible to scroll smoothly through a large body of content.

Req. 11: A Web application might be designed to be used strictly in portrait or landscape mode. It must be possible to signal this preference to the User Agent.

Req. 12: It must be possible for an application to signal to the User Agent that it wants to operate full screen and not inside the User Agent's chrome.

3.3 Storage

Req. 13: It must be possible to store files locally and retrieve them without requiring further permission from the user.

Req. 14: It must be possible to asynchronously store and retrieve large, structured persistent data sets.

3.4 Multimedia

Req. 15: It must be possible to take pictures using the device's camera. This must be done in such a way that the user's security and privacy is respected.

Req. 16: It must be possible to record audio clips using the device's microphone. This must be done in such a way that the user's security and privacy is respected.

Req. 17: It must be possible to programmatically manipulate a picture so as to crop it, apply filters to it, etc. and save the result of these manipulations. This must not interrupt the ability of the user to interact with the application.

Req. 18: It must be possible to smoothly draw multiple animated sprites in full screen mode (e.g. at 30fps).

Req. 19: It must be possible to play Multiple sound files simultaneously with minimal latency.

Req. 20: It must be possible to play video content.

3.5 Sensors

Req. 21: It must be possible for the application to register to receive updates when the position of the device changes.

Req. 22: It must be possible to obtain the device's current geographic coordinates provided the user consents to sharing those.

3.6 Networking

Req. 23: It must be possible to upload files to remote server on different origins asynchronously. Uploads should continue even if the user navigates to a different page.

Req. 24: mailto:, tel:, sms: and mmsto: URL schemes should allow the user to send an email, make a phone call, send an SMS or send an MMS using the appropriate application to do so.

4.1 Markup

4.2 Style

1. Most of the common content of CSS Values is already included in CSS 2.1. There are some features that would be welcomed additions, notably calc(), rem unit, but also some that don't seem to have a lot of traction (e.g. toggle()). ↩

2. The requirements are only for a small subset of CSS Text, mainly text-shadow. Like CSS Values, a lot what is of interest is already covered by CSS 2.1. ↩

4.3 Scripting

4.4 Network

5.1 Pointer events

While Req. 1 and Req. 2 are generally addressed by a number of existing specifications, there is one area which is still problematic - user input. Touch-enabled devices delay click inputs (presumably to handle long and double taps). While there are some different solutions that remove the delay, developers tend to rely instead on touch events [TOUCH-EVENTS]. In turn, this creates content which doesn't work properly when used with a different kind of input mechanism. In order to address this situation, the Pointer Event WG was formed and has published a first Working Draft [POINTER-EVENTS].

5.2 Responsive Images

While a lot has been done to address Req. 3, notably through media queries, there is no set solution for responsive images to date. The Responsive Images CG has made a proposal (The picture element), and so has the HTML WG (The srcset attribute). The HTML WG is set to determine the merit of both solutions and examine whether they should be combined.

5.3 Application meta-data

The multitude of existing formats to describe application meta-data (Req. 5) have been listed elsewhere already. The WebApps WG is chartered to work on this and has two related specs: Widget Packaging and Configuration [WIDGETS] (which has had little traction among the main vendors), and Web Application Manifest Format and Management APIs [WEBAPPS-MANIFEST-API] (which is still an early Editor's draft). Additionally, the combination of a number of [HTML5] features, such as the title element, meta application-name element and link icons element provides similar capabilities, yet this solution lacks sufficient comprehensiveness and cohesiveness to meet the requirements.

5.4 Offline

Currently, Application Cache is the only Web technology designed to address Req. 6. Its issues have already been exhaustively documented elsewhere. This technology is very complex, poorly understood, and hard to use. It is also marked at risk in the HTML5 specification.

Recently, the WebApps WG has decided to take over this work with the blessing of the HTML WG. In parallel, the Fixing Application Cache CG is collecting case studies, use cases and requirements.

5.5 Screen Orientation

A specification to fulfill Req. 11 is a deliverable of the WebApps WG. A first public Working Draft [SCREEN-ORIENTATION] was recently published by the WG. The CG applauds this effort and encourages the WG to explore other solutions such as a JavaScript API for [CSS-ADAPTATION] which already has an orientation property.

6.1 Momentum and infinite scrolling

Smooth and stutter-free scrolling is first and foremost a QoI issue. However, the requirements (maintaining 60fps while possibly altering the DOM) are sufficiently taxing that they are difficult to meet on mobile devices, even on high-end ones. Some very recent work attempts to cater to this issue.

6.2 Chromeless Mode

While within the scope of the WebApps WG's charter, no work that would address Req. 12 is currently ongoing.

7.1 QoI of the audio element

Implementors should pay particular attention to the quality of implementation of the audio element. audio elements are commonly used in games to play background music and sound effects. It is recommended that implementations support playing 8 audio files in parallel without audible artifacts and provide sub 10ms latency.

7.2 Performance of the canvas element

Implementors should pay attention to the performance characteristics of the canvas element which is particularly well suited for the development of 2D and isometric games. In order to meet the expectations of users, implementations should be capable of running such games at 30fps in full-screen mode.

7.3 Performance of scrolling, transitions, and animations

Smooth scrolling, transitions, and animations are key to delivering great user experiences. Implementations should aim to render these at 60fps.

7.4 Dedicated form controls

On mobile devices content input is often tedious. Implementors should therefore implement dedicated form controls where appropriate (for example, displaying a numerical keypad for inputs of type tel).