Improve Device Integration for Your Web App in Just a Few Minutes
Ada Rose Cannon
Web Developer Advocate
Make your app a Web Share Target to enable
This was a feature I had set aside an afternoon to implement but in the end it only needed a moment and made the experience significantly better.
Web Share Target allows your Web App to receive URLs from the operating systems just like native apps do.
In the video below I use the share button in Samsung Internet to share the website’s URL with my Web App, which then retrieves and displays the associated feed information from the website.
You add a Web Share target by adding the information into the Web App Manifest:
"share_target": {
"action": "/feed/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
},
When it’s shared, it will open your WebApp at the following URL /feed/?url=[share url]&text=[share text]&title=[share title]. Not all of these get filled out, depending on what is being shared and what is sharing it.
When sharing web pages to the app sometimes, the URL was in the text field rather than the URL field. So if you are expecting a URL you should probably check there as well.
const { search } = new URL(req.url, "http://example.com");
const params = new URLSearchParams(search);
const sharedURL =
params.get("url") ||
params.get("text");
There are more options you can add to the share_target, for advanced features like sharing files, you can find out more information in the great article on web.dev:
Receiving shared data with the Web Share Target API
Note: At this writing, the Web Share Target API is implemented in some browsers (notably Chromium-based browsers like Samsung Internet) but it is still considered experimental and in “incubation” within the W3C. Make sure you take this into account when incorporating Web Share Target into your development plans.
