mobile/network.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Network and Communications</title>
  </head>
  <body>
    <header>
      <h1>Network and Communications</h1>
      <p>Network connectivity represents a major asset for mobile devices: the Web is an immense store of content, as well as an almost endless source of processing power, overcoming two of the limitations of mobile devices. The Web platform is growing a number of APIs that facilitate establishing network connectivity in different contexts.</p>
      <p>Likewise, the opportunity offered to deploy real-time communication services on the Web is another step towards the unification of the telecommunication and Web ecosystems.</p>
    </header>
    <main>
      <section class="featureset well-deployed">
        <h2>Well-deployed technologies</h2>
            
        <div data-feature="HTTP Network API">
          <p><a data-featureid="xhr">XMLHttpRequest</a> (the basis for Ajax development) is a widely deployed API to load content from Web servers using the HTTP and HTTPs protocol: the W3C specification (formerly known as XMLHttpRequest Level 2) was meant to document the existing deployed API (with the ability to make requests on servers in a different domain, programmatic feedback on the progress of the network operations, and more efficient handling of binary content). That work is now done in the <a href="https://whatwg.org/">WHATWG</a>. The WHATWG <a data-featureid="fetch">Fetch API</a> also provides a more powerful Promise-based alternative.</p>
        </div>
            
        <div data-feature="Cross-domain Requests">
          <p>By default, browsers do not allow to make request across different domains (or more specifically, across different origins, a combination of the protocol, domain and port) from a single Web page; this rule protects the user from having a Web site abusing their credentials and stealing their data on another Web site. Sites can opt-out of that rule by making use of the <a data-featureid="fetch/cors">Cross-Origin Resource Sharing</a> (CORS) mechanism, opening up much wider cooperation across Web applications and services.</p>
        </div>
            
        <div data-feature="Server-pushed Requests">
          <p>XMLHttpRequest is useful for client-initiated network requests, but mobile devices with their limited network capabilities and the cost that network requests induce on their battery (and sometimes on their users bill) can often make better use of server-initiated requests. The <a data-featureid="eventsource">Server-Sent Events API</a> allows triggering DOM events based on push notifications (via HTTP and other protocols).</p>
        </div>
            
        <div data-feature="Bidirectional Connections">
          <p>The <a data-featureid="websockets">WebSocket API</a>, built on top of the <a href="https://tools.ietf.org/html/rfc6455">IETF WebSocket protocol</a> (RFC6455), offers a bidirectional, more flexible, and less resource intensive network connectivity than XMLHttpRequest.</p>
        </div>

        <div data-feature="On-line State">
          <p>Of course, an important part of using network connectivity relies on being able to determine if such connectivity exists, and the type of network available. The <a data-featureid="online">HTML5 <code>onLine</code> DOM flag</a>, and its associated change event, <code>online</code>, signals when network connectivity is <i>not</i> available to the Web environment (the flag is unreliable to assert that the Web environment is online).</p>
        </div>

        <div data-feature="Network Characteristics">
          <p>The <a data-featureid="resource-timing">Resource Timing API</a> offers to measure precisely the impact of the network on the time needed to load various resources, offering another approach to adapt a Web app to its network environment.</p>
        </div>
      </section>

      <section class="featureset in-progress">
        <h2>Technologies in progress</h2>
        <div data-feature="Low-level I/O">
          <p>The <a data-featureid="streams">Streams</a> specification provides APIs for creating, composing, and consuming streams of data efficiently. Network conditions may fluctuate in mobile networks and bandwidth may be restricted; access to low-level I/O primitives enable flow control within Web applications to adjust the network delivery to some reader's speed (e.g. a media player), and perceived rendering performance improvements, e.g. when a Service Worker assembles a stream from content previously cached and content fetched online to speed up the first set of render operations of a page. The ability to cancel a stream to stop download at any time also helps reclaim network bandwidth for other tasks as soon as needed.</p>
        </div>

        <p data-feature="HTTP Network API">The <a data-featureid="beacon">Beacon API</a> aims at letting developers queue unsupervised HTTP requests, leaving it to the browser to execute them when appropriate, opening the door for better network optimizations.</p>

        <div data-feature="Server-pushed Requests">
          <p>The <a data-featureid="push">Push API</a> allows Web applications to receive server-sent messages whether or not the said Web app is active in a browser window. The <a href="https://datatracker.ietf.org/wg/webpush/documents/">IETF Web-Based Push Notifications Working Group</a> developed a companion protocol suitable to request the delivery of a push message to a user agent, create new push message delivery subscriptions, and monitor for new push messages (<a href="https://tools.ietf.org/html/rfc8030">RFC 8030</a>).</p>
        </div>

        <div data-feature="P2P Data Connections">
          <p>The work on <a data-featureid="p2p">Web Real-Time Communications</a> also provides direct <strong>peer-to-peer data connections</strong> between browsers with real-time characteristics, opening the way to collaborative multi-devices Web applications.</p>
        </div>

        <div data-feature="Bidirectional Connections">
          <p>The <a data-featureid="webtransport">WebTransport</a> proposal would allow data to be sent and received between a browser and server, implementing pluggable protocols underneath with common APIs on top, notably based on QUIC. The API is similar to WebSocket in that it exposes bidirectional connections between a client and a server, but allows to further reduce the latency of network communications between a client and a server, and also supports multiple streams, unidirectional streams, out-of-order delivery, and unreliable transport. Usage scenarios include sending the state of a game with minimal latency to a server repeatedly using unreliable and out-of-order messages, low-latency streaming of media chunks from a server to a client, and cloud based scenarios where most of the application logic runs on the server.</p>
        </div>
      </section>

      <section class="featureset exploratory-work">
        <h2>Exploratory work</h2>

        <div data-feature="Background execution">
          <p>The <a data-featureid="background-sync">Web Background Synchronization</a> specification builds on top of Service Workers to enable Web applications to keep their user data up to date seamlessly, by running network operations in the background, adjusting to possibly unreliable connections that users often experience on mobile devices.</p>

          <p><a data-featureid="background-fetch">Background Fetch</a> defines a similar service worker based download and upload mechanism in the background, but allows the background operation to continue, with user visibility, even if the user closes all windows and workers. The specification is specifically tailored to enable downloads/uploads of large assets (podcasts, movies, textures).</p>
        </div>

        <div data-feature="Network Characteristics">
          <p>Discontinued work on the <a data-featureid="netinfo">Network Information API</a> to address discovery of the network characteristics has now been resumed in the Web Platform Incubator Community Group.</p>
        </div>
      </section>   
    </main>
    <script src="../js/generate.js"></script>
  </body>
</html>