Quantcast
Jump to content

Improve device integration for your Web App in just a few minutes


STF News
 Share

Recommended Posts

2020-08-25-01-banner-internet.jpg

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:

2020-08-25-01-01-webdev.png?width=300px 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.

View the full blog at its source

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...