Registering as a Share Target with the Web Share Target API

What is the Web Share Target API?

On your mobile device, sharing something is usually as simple as clicking the Share button, choosing which app you want to send it to, and then who you to share it with. For example, after reading an interesting article, I may want to share it via email with a few friends, or Tweet about it.

Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button.

Users can easily share content to your web app because it appears in the system-level share target picker.

Current status

Web Share Target is currently supported on Android in Chrome 71 or later. Both Mozilla and Microsoft have indicated their support but have not implemented it yet.

We’ve started working on Web Share Target - Level 2, adding support for sharing file objects. Look for a post about that coming soon.

See it in action

1. Using Chrome 71 or later, open the Web Share Target demo.
2. When prompted, click Install to add the app to your home screen, or use the Chrome menu to add it to your home screen.
3. Open any app that includes a native share intent, or use the Share button in the demo app.
4. Choose Web Share Test

After sharing to the demo app, you should see all of the information sent via the web share target web app.

Register your app as a share target

Note: To register a web app as a share target, it must be meet Chrome’s installability criteria, and have been installed by the user.

To register your app as a share target, the web app needs to meet Chrome’s installability criteria. In addition, before a user can share to your app, they must add it to their home screen. This prevents sites from randomly adding themselves to the users share intent chooser, and ensures that it’s something that they want to use.

Update your web app manifest

To register your app as a share target, add a share_target entry to the web app manifest.

In the manifest.json file, add the following:

"share_target": {
  "action": "/share-target/",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

If your application already has a share URL scheme, you can replace the param values with your existing query parameters. For example, if your share URL scheme uses body instead of text, you could replace the above with "text": "body",.

When another application tries to share, your application will be listed as an option in the share intent chooser.

Note: You can only have one share_target per manifest, if you want to share to different places within your app, provide that as an option within the share target landing page.

Handle the incoming content

If the user selects your application, the browser opens a new window at the action URL. It will then generate a query string using the values supplied in the manifest. For example if the other app provides title and text, the query string would be ?title=hello&text=world.

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

How you deal with the incoming shared data is up to you, and dependent on your app.

• An email client could draft a new email, using title as the subject of an email, with text and url concatenated together as the body.
• A social networking app could draft a new post, ignoring title, using text as the body of the message and adding url as a link. If text is missing, it might use url in the body as well. If url is missing, it might scan text looking for a URL and add that as a link.
• A text messaging app could draft a new message, using text and url concatenated together and dropping title.

What gets shared?

Be sure to check the incoming data, unfortunately, there is no guarantee that other apps will share the appropriate content in the right parameter.

On Android, the url field will be empty because it’s not supported in Android’s share system. Instead URLs will often appear in the text field, or occasionally in the title field.

Helpful Links

• Public explainer
• Tracking bug
• Web Share Target Demo | Web Share Target Demo source
• ChromeStatus.com entry
• Blink Component: Blink>WebShare