What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

Inter-App Sharing

There were several attempts to establish the universal, multi-platform, asynchronous way of data exchange from the Web applications to native apps or another Web apps. The implementation that is being introduced since 2017, available on Android and iOS, Web Share API, consists of a method to invoke the platform-specific share mechanism, passing named URL to it. Additionally, Google Chrome on Android supports sharing file objects.

There is a complementary Web Share Target API available in Android since Chrome 71 (late 2018) to allow registering installed Web Application to be available in the platform-specific share mechanism. It is based on the share_target definition in the app's Manifest file. This way the user is able to send data to the specified endpoint in the application from any other application (Web or native) installed in the system.

Historically, There were few basic workarounds used for sending data to another applications that might still be relevant. Native applications can register handlers to receive data from the Web apps using special URL prefixes (although differences exist between iOS and Android). There are also third-party non-standard services that coordinate sharing data between Web applications.

The first attempt to tackle data sharing from the web – the Web Intents experimental API – was implemented in Google Chrome 18 (in 2012). It was conceptually based on Android Intents system. The apps interested in receiving data were required to be registered in Chrome Web Store and declare the intent support in the manifest file. The apps sending the data were able to invoke the Intent of the particular type and let the system handle the selection of the target application and its proper invocation. The API was removed in Chrome 24 because of various interoperability and usability issues. No other vendor implemented Web Intents.

API glimpse

Web Share API

navigator.share({name, title, url, files})
Invokes the system-defined application selection and data share dialog to send the named URL and/or files to another application and returns a Promise resolved when the share was successful.
navigator.canShare({files})
Checks the ability of navigator.share to accept the particular data to be shared, returns true if so. Useful to determine whether file sharing is available.

Web Share Target API

Addition to Manifest file

{
  "share_target": {
  "action": "/share-target/",
  "method": "GET",
  "enctype": "application/x-www-form-urlencoded",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Web Intents API (obsolete)

intent = new Intent(action, type, href)
Creates an object representing the request for a particular action (command) to be sent to the registered handling applications.
navigator.startActivity(intent, onSuccess, onFailure)
Invokes the system-defined application selection and data share dialog to send the request to another application.
window.intent.postResult(result)
Sends the result from the requested (target) application back to the requesting (source) application.

Live Demo

  • function share() {
  if (!("share" in navigator)) {
    alert('Web Share API not supported.');
    return;
  }

  navigator.share({
      title: 'What Web Can Do Today',
      text: 'Can I rely on the Web Platform features to build my app? An overview of the device integration HTML5 APIs',
      url: 'https://whatwebcando.today/'
    })
    .then(() => console.log('Successful share'))
    .catch(error => console.log('Error sharing:', error));
}

function intent() {
  if (!("Intent" in window)) {
    alert('Web Intents API not supported.');
    return;
  }

  var intent = new Intent('http://webintents.org/share',
    'text/uri-list',
    'https://whatwebcando.today');
  navigator.startActivity(intent, function () {
    console.log('Successful share')
  }, function (error) {
    console.log('Error sharing:', error);
  });
}
  • <p>
  <button onclick="share()">Share whatwebcando.today<br>with <b>Web Share</b></button>
</p>

<p>
  <button onclick="intent()">Share whatwebcando.today<br>with <b>Web Intents</b></button>
</p>

Resources

Get in touch