Yesterday I looked at how to trigger a mobile share dialog from a webpage, so today we look at how to share content to a webpage.

To have a kind of real world example, I made a simple Web app, that displays a text word for word.

The Web Share Target API, I used here, only works with the newest Chrome Browser on an Android Phone!

The change you have to make to define your webpage as a share target is pretty small. We just need to have a PWA with a manifest.json already set up. (How to transform your website into an installable app)

Then we just need to add the “share_target” property to our web manifest:

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

Here we define the endpoint that should receive the content that we want to share with our webpage. We can also define the request method as well as map the query parameter to custom ones.

That’s it. If you have a new Android phone you can try the following demo:

https://fastread.timobechtel.com

Fastread is an app that lets you read text faster. Visit the webpage, in Android Chrome go to settings and tap on “Add to homescreen”. Now you can share text from anywhere on your phone with (Fastread)! And it even works without internet connection.

It is not beautiful, but it works pretty well. ✌