Check out a free preview of the full A Tour of Web Capabilities course

The "Web Share" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:

Max looks at the Web Share API, which triggers the native sharing dialog in an operating system. An application can also be configured as a share target when a specific file format is shared. This adds the application to the operating systems share menu as a possible destination.

Preview
Close

Transcript from the "Web Share" Lesson

[00:00:00]
>> Web Share. The previous ones were more special, but WebShare I think is interesting for all of you. With Web Share, we can call navigator.share, pass a JSON, an object, with title, text, URL, and optional files. And it can trigger the native share dialog of the operating system.

[00:00:25]
So then you can share content from your website to other apps, social networks, mail applications, WhatsApp, message, PDF, reader, whatever. Makes sense? So then you can have in your own website, in cooking, masters, on every recipe we can have a share button that can share this recipe with your friend and you can open the native dialog.

[00:00:54]
So then you as web developer, you don't know where the user is going to share that. So you are sharing data and it's out of your scope now. So this is the web share API on Android. You click share, it appears the complete native dialog. So you can share it. That is iOS, not Android.

[00:01:16]
You can share that with all the possible apps. And then the app will receive that share operation, okay? Simple to understand, it's a simple API. Something that is even more powerful is Web Share Target. This one is light green, it's Chromium only. Web Share, it works also On iOS.

[00:01:41]
In this case, you don't wanna share to the rest. You wanna receive shares from other apps or websites. So you wanna be target of a share operation. So you wanna be on the list. You want your PWA to be on the list of possible apps that can receive data.

[00:01:59]
In this case, we add that intention in the web manifest. It's another entry in the web manifest, where you will express, okay, you want to share and when that happens. You want your PWA to execute that URL and receive using GET or POST these arguments. That then with JavaScript you can read and share that in your system in your app.

[00:02:25]
Yep.
>> Can you share a file?
>> You can share a file. So the Web Share API has an option of files array available. In fact that optional files array is the second version of the Web Share spec. That is currently available in every browser anyway. So you can share files.

[00:02:43]
Yeah, and also you can receive files if you're implementing WebShare target. So you can receive text only, or images, or PDF, or recipes, wherever you define.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now