Web on Mobile: Gap Analysis

July 2013

Status

This is a draft, work-in-progress analysis derived from the “Closing the Gap with Native” Headlight task force.

Introduction

A regular debate animates the community of mobile developers: which of native or Web apps are the best option to provide content and services on mobile devices (such as phones and tablets)?

Indeed, whereas Web applications have taken an increasing share of tasks that use to be accomplished via native software on traditional computers, a reverse trend seems to have emerged on mobile devices, where services and content traditionally provided via Web applications (e.g. news) are now provided either complementarily or exclusively via native applications (see Review of application development approaches per category in appendix).

If quantifying these trends remain difficult, there is undeniably a lot more and much broader efforts devoted to the development of native apps on mobile than there ever was on desktop. This new investment in native technologies can only reasonably be attributed to strong differences in what native and Web technologies enable service and content providers to offer to their mobile users.

Why are Web apps so much more challenged on mobile devices than they have been on traditional computers?

The first obvious consideration is that mobile devices come with severe hardware and networking constraints, that the latest generation of Web technologies had increasingly ignored due to the rapid evolution of the hardware and networking capabilities of computers. Since the ability to access that content is a critical component of the value of the Web, there can only be marginal improvements that can be made on technologies that have suffered from that approach.

Another consideration is that the popular native frameworks for mobile devices were developed once the Web had already shown a lot of its potential, and thus integrate natively the hooks needed to benefit from that potential: streamline installation, streamlined network (and in particular HTTP) operations, easy access to Web formats interpreters, inclusions of Web views as software components. As a result, re-using part of the Web platform without some of its other characteristics has become a lot easier in native apps, and has conversely reduced some of the appeal of Web apps. Among other things, while running executables obtained from the Web has long been taught as a bad practice to users of traditional computers, mobile apps come within a much stronger security framework (with a sandboxing model that browsers have long used), and can be obtained from a curated and easily-accessible entry point.

The popularity among service and content providers of so-called hybrid applications (where Web technologies are used in complement of native ones) is another illustration of how Web technologies have been embraced by native development framework on mobile devices.

If Web technologies remain a popular development component of native apps, why does it matter if “pure” Web apps are challenged by native apps?

Native apps reduce or remove some of the benefits the Web had brought to our digital ecosystem:

This document make uses of the terms “Web applications”, “browser-based applications”, “Web-OS application” as defined in the taxonomy of mobile application platforms.

This document analyses in detail how the development approaches differ in terms of the experience that can be offered to the user, and the associated costs/benefits for the service and content provider, highlighting possible actions that would reduce the gap from which Web technologies sometimes suffer in that comparison.

2. User experience

In a world of many competing applications, service and content providers need to offer a user experience that reduces as much as possible the friction of using their applications. User experience considerations are particularly important on mobile devices since their hardware and network characteristics often exacerbate the difficulties that users face.

The parameters that influence the quality of the user experience for mobile apps include:

Other possible orders / groupings:
Is customization a separate parameter to consider? How about sharing / social network interactions?
Illustrate with examples? Link back to existing illustrated terminology?
Ease of discovery and acquisition

Before a user can use any app, she needs to know the app exists, how to get it, and she needs to actually get it.

This encompasses the following operations:

  • Searching an app
  • Reaching an app from physical artifacts (ads, paper magazines, TV screen, product labels)
  • Reaching an app from on-line interactions (social networks, on-line reviews, etc.)
  • Paying for an app
  • Downloading an app
  • Authorizing an app for special privileges
Ease of finding on device and launching

Once acquired, the user should have easy access the application when she needs it; the shortest and simplest the task, the less time she will be ready to wait to start accomplishing it. For instance, looking up the weather or the time should be near instantaneous, while a slightly longer wait before starting to play a game might be acceptable.

This encompasses the following operations:

  • Locating the app launcher
  • Starting the app
  • Waiting for the app to be ready to use
Intuitiveness and ease of understanding

When using a new or rarely used application, the user needs to find her way easily to accomplish her task at hand; the more the app user interface resembles other apps she is used to and re-uses the same interaction patterns, the less effort she will need to feel at home.

This encompasses the following operations:

  • Adopting familiar user interfaces
  • Adopting familiar user interaction patterns
  • Guiding the user
Smoothness and responsiveness

Any glitch and slowness of the user interface creates a barrier to the accomplishment of the task the user started the app for.

This encompasses the following operations:

  • Navigating through views provided by the app (e.g. different sections of a news app)
  • Interacting within a given view of the app (e.g. content of a specific section of a news app)
  • Obtaining content from the network
  • Pushing content to the network
Adaptability to user access requirements

Depending on her physical conditions (temporary or permanent) and on her environment (e.g. luminosity), the user may want to adapt the user interface to her particular needs (e.g. changing contrast, zooming).

This encompasses the following operations:

  • Making the user interface flexible to different user requirements
  • Integrating with the accessibility services on the device
Sensitivity to context

The user installs some applications for their ability to help her in a given context: at a given location, a given time, or when a given event occurs.

This encompasses the following operations:

  • Determining the context in which the user is
  • Notifying the user of a context-relevant information
Personalization and privacy

Some applications benefit from gaining knowledge about the user (e.g. her contacts, her calendar) to adapt what they provide her.

The user on the other hand is often wary of sharing more of her private information than she is aware of.

This encompasses the following operations:

  • Gaining access to private data
  • Protecting user privacy
Immersivity and focus

On mobile device smaller screens, any part of the UI that distracts the user from her task is problematic. If the user needs focused attention on the app, interactions from or with other apps should be reduce-able to a minimum.

This encompasses the following operations:

  • Managing the whole screen space
  • Separating UI from other apps
Ease of returning to once launched

Some apps (e.g. social apps) attract the user’s attention frequently and the user expects to be able to re-access them easily.

This encompasses the following operations:

  • Finding quickly the list of already launched apps
  • Waiting for the app to be re-activated
  • Getting the app back in the state it was left
Ease of obtaining additional features

Once a user starts using an app, she may want to obtain additional features the app provides as add-ons.

This encompasses the following operations:

  • Paying for an add-on
  • Downloading the add-on
  • Authorizing the add-on for special privileges
Ease of maintaining

Once a user has acquired an app, she will want to keep it up to date. She may also want to retrieve some or all of the data that the app is creating and managing, either to share it, transfer it, or back it up. When she no longer needs the app or if she needs to recover space for others apps on the device, she will want to remove it. She may also want to reset whatever configuration or data a given app has stored on her device.

This encompasses the following operations:

  • Updating an app
  • Retrieving locally stored app data
  • Removing an app
  • Purging an app configuration and stored data
Ease of cross devices usage

Users have increasingly to manage multiple devices of various shapes, manufacturers and capabilities; a user is likely to want to find the apps she likes on as many of these devices as possible, and in some cases to have an app takes advantages of several devices at once (e.g. for second screen scenarios).

This encompasses the following operations:

  • Locating a compatible version of the app on the various devices
  • Acquiring (possibly with payment) the app on these devices
  • Getting the content / configuration of the app synchronized across devices
  • Making the app work on several devices at the same time

The critical factors that need to be optimized for a given app depend on the type of expected interactions. These factors are influenced by the service and content providers investment, but also (and sometimes primarily) by the chosen platform and its associated development approach.

Distinguish characteristics of browser-based apps from Web-OS apps in the table
Strength/Weakness for the user experience of Web apps on mobile
User experience parameterStrengthWeaknessPossible W3C actions
Discovery and acquisition
Searching an app
  • Long history of search on the Web
  • Benefits of links to rank / discover
  • No clear delineation (yet) of mobile-optimized content
  • difficulty of indexing non text-based app
  • Users don't necessarily associate Web search with apps discovery
Increase searchability of apps through better metadata
Reaching an app from physical artifacts (ads, paper magazines, TV screen, product labels)URLs make it easy (and can be turned into easier forms)No good way to discover "over the air"Enable over the air discovery for Just-in-time interactions
Reaching an app from on-line interactions (social networks, on-line reviews, etc.)Links and no-installation make it much easierPure client-side JavaScript don't necessarily deal well with URIsPromote best practices of URI management for client-side apps
Paying for an appUsers aren't constrained to a single payment processorNo easy way to integrate "one-click" paymentEnable simple payments on the Web
Downloading an appFor simple apps, accessing an app is equivalent to downloading it
  • For apps with larger needs, it is difficult to defer the download of larger assets to better network conditions
  • While offline is possible, it's mostly broken
  • Users don't necessarily expect or understand they can use a Web apps while disconnected
  • Enable large download optimizations
  • Fix offline
  • Integrate off-line Web apps in list of available OS apps
Authorizing an app for special privileges
  • Privileges get granted when they're needed
  • Many privileges get granted implicitly through user interactions (e.g. selecting a file)
  • Apps that require many privileges create a storm of prompts
  • Impossible to know beforehand what an app will be asking
  • Hard to track what privileges an app has obtained
  • Allow Web apps to manage group of permissions?
  • Enforce consent-through-interaction pattern?
Finding on device and launching
Locating the app launcherBookmarks can serve as app launchers
  • Bookmarks are hard to manage
  • Users don't know how to save a bookmark on their home screen
  • Depending on the OS, the OS app list cannot include Web apps bookmarks
Get browsers/OS vendors to simplify integration of Web apps in OS apps list
Starting the app
  • As a Web app runs in the browser, if the browser isn't running, the actual app that gets started is confusingly the browser
  • If the Web app is already running in the browser, hitting the bookmark won't go back to the existing tab (no singleton enforcement)
  • Use manifest as a way to promote Singleton enforcement?
  • Saved Web apps should be started under their own branding (fullscreen, optional splash screen)
Waiting for the app to be ready to use
  • Starting the browser makes starting the app that much longer
  • Optimizing start time for Web apps remain difficult
  • Provide better hooks for optimizing start time (e.g. for scripts loading, assets loading)
  • Promote best practices
Intuitiveness and ease of understanding
Adopting familiar user interfaces
    If the user is familiar with a Web app on other devices, re-using the same look and feel on mobile is allowed and relatively easy
    Providing a UI that integrates well with the OS UI can be challenging, impossible in some cases
CSS should provide some level of system UI integration?
Adopting familiar user interaction patternsUsers are broadly familiar with Web interactions patterns (back button, reload, links, etc)
  • Integrating with the OS interaction patterns can be challenging, impossible in some cases
  • Browsers steals interactions that apps would want to use(zooming, swiping)
  • More DOM Events to match specific patterns
  • Indie UI should help
Guiding the user
Smoothness and responsiveness
Navigating through views provided by the app300ms for touch/click events make Web apps feel sluggish
Interacting within a given view of the app
  • Scrolling with heavy content is very hard to make smooth
  • JS Garbage Collection creates unpredictable spike of CPU
  • JavaScript slower than native code for CPU intensive operations
  • CPU intensive operations run in a separate thread (via Workers) don't have access to all content and APIs from main thread
  • Provide better hooks for managing scrolling (e.g. Scrolling events)
  • Promote best practices and libraries
  • Provide more control on memory management?
Obtaining content from the network
  • Impossible to defer large downloads to better network conditions
  • Impossible to group network requests to optimize latency/battery/network usage
  • Limitations to the type of protocols that can be used
  • Background network operations
  • Priority handling in network ops
Pushing content to the network
  • Impossible to defer large upload to better network conditions
  • Impossible to group network requests to optimize latency/battery/network usage
  • Limitations to the type of protocols that can be used
  • Background network operations
  • Priority handling in network ops
Adaptability to user access requirements
Making the user interface flexible to different user requirementsWeb browsers provide more flexibility by defaultUser interfaces are not often tested in a wide enough set of conditions to cater for that flexibilityAutomated or semi-automated testing tools?
Integrating with the accessibility services on the deviceWeb has a long history of accessibility integrationMapping with on-device accessibility features is likely to be lesser than what can be obtained from platform-specific code?[further analysis required]
Sensitivity to context
Determining the context in which the user isUsers are in control of what the app can determine Browsers don't have access to all sensors available on a given device, and requires specific permissions to get it in some cases Any critical sensor missing (indoor location via WiFi id? BT4?)? Can we build a more generic sensor API that doesn't work against the user privacy?
Notifying the user of a context-relevant information
  • No access to Push notifications
  • No way to wake up an app while off-line depending on some environment parameters (e.g. location)
  • Progress on Push API
  • Look into registering wake-up for Web apps (on top of notifications?)?
Personalization and privacy
Gaining access to private data
  • For local data, only possible on an ad-hoc basis
  • Require prompting the user one way or another
Web Intents-like solution?
Protecting user privacyUsers are always in control before data is first shared
  • Hard to track with whom what data has been shared
  • Third party inclusion muddies this further
  • Common strategy toward iframe handling?
  • DNT
Immersivity and focus
Managing the whole screen space Browser chrome by default prevents fullscreenFullscreen API to the rescue?
Separating UI from other apps
  • Browser chrome can interfere
  • Other tabs can interfere
  • “External” links either remove the current app, and move it to a hard-to-access background tab
Make it possible run Web app fullscreen, in separate browser instance?
Ease of returning to once launched
Finding quickly the list of already launched apps
  • Web app not in the list of running Apps
  • Hitting a bookmark starts a new "instance" instead of returning to existing one
  • Finding existing running instance among other tabs is difficult
  • Allow singleton-enforcement for Web apps
  • Include Web apps in tasks list
Waiting for the app to be re-activatedif the browser is not running, overhead of browser start up (without app branding)
Getting the app back in the state it was left Restoring the state of the app (e.g. scrolling location) not always trivial? [Investigate further which states are hard to restore]
Ease of obtaining additional features
Paying for an add-onUsers aren't constrained to a single payment processorNo easy way to integrate "one-click" paymentEnable simple payments on the Web
Downloading the add-onIf needs little additional content, this is more streamlined than having to go through an app storefor add-ons with larger needs, it is difficult to defer the download of larger assets to better network conditionsEnable large download optimizations
Authorizing the add-on for special privilegesSince privileges are granted on usage (rather than up front), this is more streamlined in Web appsRisks of storm of prompts
Ease of maintaining
Updating an appApp automatically up-to-date when on-line
Retrieving locally stored app dataWeb app data is not easily retrieved outside of the browser (is it worse for encrypted storage?)Filesystem API?
Removing an appFor apps without offline components, no action neededCurrent UIs to manage offline Web apps are hard to get at, hard to use, and not integrated in OS apps management
Purging an app configuration and stored dataBrowsers make it possible (not clear this is so for native apps)Browsers make it hard
Ease of cross devices usage
Locating a compatible version of the app on the various devices
  • availability of a compatible version much likelier due to cross-device nature of the Web
  • URLs make locating it trivial
Interop issues across devices might make experience of a given Web app very poor on some devicesReduce incompatibilities across devices
Acquiring (possibly with payment) the app on these devices
  • Apps don't have to be paid multiple times (depending on provider's policy)
  • No need to configure / maintain the app on the various devices
Getting the content / configuration of the app synchronized across devices
  • Federated identity is built for Web browsers
Limited access to discovery-by-proximity systems
  • Standardized identity management
  • Easy synchronization for Web dbs?
  • Discovery of other nearby devices
Making the app work on several devices at the same time
  • One URL, one app
  • WebRTC
  • UX guidance on cross-device apps
What's missing from Scott's analysis?
Where does security fit in this model? In general, how to make Enterprise stuff in this view?
How about identity management? Native apps are also growing in this space
Any lessons from Why mobile web apps are slow?

3. Provider perspective

To make it sustainable to provide a given application, content and service providers need an environment that reduces as much as possible the costs of developing, deploying and maintaining a given application, and maximizes the expected outcome, which can be, but is not necessarily, of monetary nature.

The following parameters are taken into account to assess the costs:

Development cost
  • Hiring / training developers
  • Writing code
  • Finding documentation and guidance
  • Finding libraries
  • Reporting platform bugs
  • Debugging and diagnostics
  • Testing
Deployment cost
  • Getting authorization to deploy
  • Uploading the app
  • Advertising the app
  • Protecting the app code
Maintenance cost
  • Getting user input and feedback
  • Keeping up to date with changes (in particular incompatible ones) in the platform
  • Getting visibility into future evolutions of the platform
Expected outcomes
  • Reaching out to as many users as possible
  • Getting paid
  • Getting recognition
  • Enabling social change
Expected outcomes is a bit hand-wavy: is there another better way to phrase this? Are there other high level outcomes we should include?
Strength/Weakness for the provider experience for Web apps on mobile
Provider experience parameterStrengthWeaknessPossible W3C actions
Development cost
Hiring / training developersA lot of Web developersNot many Web developers now how to develop good Web apps for mobileTraining? Best Practices?
Writing codePlenty of IDEs for the WebSupport for responsive approaches?
Finding documentation and guidanceLots of Web-related sites and forumsLack of authoritative content?WebPlatform.org?
Finding librariesLots of themHard to find the right one, esp. with mobile constraints
Reporting platform bugsTechnologies are developed in public
  • Hard to find the right forum to target
  • Hard to distinguish between browser bug and platform bug
  • Provide a one-stop bug reporting system for the Web (managed by a W3C bug squad?)
  • Provide integrated views of various open bugs systems among browsers (à la Chrome dashboard)?
Debugging and diagnostics Same Web platform on desktop and mobile makes it somewhat easier to debug
  • Growing but still very limited toolset
  • Toolset almost always browser-specific, thus hard to apply interoperably
  • Memory management particularly poor
  • Browser/device-specific bugs particularly hard to pinpoint
Testing Lots of automated testing tools, incl. on mobile Hard to test chrome-based user interactions (e.g. consent dialog)Improve Web Driver API to include more chrome-based interactions
Deployment cost
Getting authorization to deployNone required
Uploading the appMostly seamless
Advertising the appAs open as anything else on the Web
  • No well-known central location with high visibility for users
  • No well-known ways for users to describe well-rated apps
Promote searchability of apps and associated reviews?
Protecting the app code and operationsServer-side component out of reach to client-side attackersHard to get as thorough protection of client-side as available to native appsRelationship between Browsers and Trusted Environments?
Maintenance cost
Getting user input and feedbackUse the WebNo one-click infrastructure to share comments associated to a given identity (assuming reputation is an incentive)Better identity management
Keeping up with incompatible changes in the platformPlatform evolutions are decided in the openHard to keep track of these evolutions
Getting visibility into future new features of the platformPlatform evolutions are decided in the openHard to keep track of these evolutions
Expected outcomes
Reaching out to as many users as possible
  • Web works everywhere
  • URLs make it easy for users to spread the word
Hard to design apps that work well across many devices, browsers, culture, etc.
Getting paidEach provider can pick its most appropriate payment systemNo general one-click solution to paymentStandardize a payment API
Getting recognitionNeutral?
Enabling social change
  • No commercial entity in a position to censor
  • Availability to many more devices to lower cost

Appendix: Review of application development approaches per category

One way to assess the particular challenges that mobile represent for browser-based apps is to look at which kind of applications have been traditionally browser-based on the desktop and are now primarily used via OS applications on mobile.

The only limit a priori to what browser-based applications can be used for is set by security considerations: access to features that would be hard or impossible for the browser to give without compromising the user’s security.

In practice, there are areas where the benefits of browser-based apps are more directly relevant than others, and where it would be more logical to close the gap in priority.

Categories loosely inspired from Android category types; is there a better model (shorter, more neutral)?
Where to find data references to back the estimation of what approach is popular on desktop/mobile?
Distinguish between user / provider perspective in gap analysis? Or is that already the distinction between UX / feature?
Application categoryDominant approach on desktopDominant approach on mobileGaps for browser-based on mobileExample of browser-based appExample of hybrid app
Feature gapUX gap
GamesOS app, but rising trend of browser-based appOS appaudio support, 3D supportPerformance, payment, large upload/download
NewsBrowser-basedBothOffline supportPaymentFinancial Times
SocialBrowser-basedOS appPushLarge upload/download
CommunicationOS appOS appPush, network capability
Education and referencesBrowser-basedBoth?OfflineOS search integration, large downloadWikipedia
Multimedia consumptionBothBoth?Offline, codecs, local media access, DRMLarge downloadYouTube
Multimedia productionOS appOS appAccess to cameraperformance for media processing, large upload
Day-to-day helpers (weather, calculator, timer, etc)BothOS appOfflineEase of accessforecast.ioMany?
ProductivityBothOS appOffline, network capabilityEase of accessGMail
EnterpriseBrowser-basedBrowser-based?Security, control
ShoppingBrowser-basedBrowser-based??Ease of access
Travel and localBrowser-basedBothOfflinepaymentGoogle Maps