Share data natively from mobile to PWA app

Hello There,

Alright, let's get straight to the point without too much theory, because there are tons of articles out there that I don't even understand well about how the data sharing mechanism works and what I should code in the frontend. Phew! 🫤

If you're facing the same issue, cheers!

So, let's say you've mostly tackled the PWA part. Now, at some point, you realize you need to add a feature where users can share a YouTube video directly to your PWA app from the YouTube app. What do you do now?

Chill out, here are some simple points to follow:

Note: I did this in the latest Angular project (version 17), but these steps are valid for every framework or library. Believe me, man!

Let go,

Step 1

Basically in every PWA app there is manifest.webmanifest file or have something similar where we declare app's name, theme_color, short_name etc... so go to this file and add a new section share_target like this way,

{
  "name":"YOUR_APP_NAME",
   ...
   ...
  "share_target": {
    "action": "/any-route-you-want",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text"
    }
  }
}

Some FAQ About share-target:

• Why share-target section ?

Because it will make your PWA app available to the mobile's native share list.

• Why method GET?

Because your PWA app need a route or any route available, once user share some data to PWA app forward those data to that route.

• Whay params and even if you specified title, url ?

So, once PWA forward user's shared data to route it will decode it on the fly and if the shared data I mean here as object's property get matched to your declared params then it will automatically bind those value to your params.

I hope now you clear about the Step-1.

Cool ! Move on.

Step 2

So, the hard part complete. From now changes are framework or library agnostic. Once the Step-1 hapeends successfully then you will get a url with some query-params like this,

http://jingalalapwaapp.com/any-route-you-want?title="You are great"&text="somefunckyurl.com/asdfgh"

Some FAQ About this route:

• WTF is going now?

Alright, so imagine you're building a website or app using React, Angular, Vue, or just plain JavaScript (Vanilla JS). Let's say you've set up a route in your project, maybe you named it any-route-you-want.

Now, if someone shares a YouTube video link to your Progressive Web App (PWA), the system automatically decodes the shared data and sends it to that route you declared. When this happens, you can extract useful information from the shared data, like the video ID or other details, from the URL's query parameters.

So, in simpler terms, you're basically setting up a spot in your project where shared YouTube video links can land, and you're ready to catch when they arrive.

• Then ?

Now user's shared data on your hand I mean in your code 😂 do whatever you wanna do.

Keep Coding, Peace ✌️

If anything goes wrong please let me know your valueable feedback.

Comments

[tq-bit]

The share target seems really interesting. How would you know what link to send these query params to if you have a native application is installed? Is there a dedicated protocol for that? Or some common method all native apps share?

[Sefat Anam]

Good question! I'm also trying to figure out a generic way, but for now, I do it manually to determine which app is sending which kinds of query parameters. However, if you need something specific, you can declare it in the manifest and rely on that alone. Let me know if you have any better ideas 💡. Thanks!