Using the Web Share API? Describe your use case.

[adactio]

I'd like to find out how people are currently using the Web Share API. Are you using it? If so, are you using it to share the current page? Or are you using it to allow users to share a URL other than the page they're currently on? (e.g. on the Twitter home page, you can share a link to a specific tweet).

If you've got a public facing URL you can share, please include that. Otherwise please describe the scenario where you're using the Web Share API.

Thanks!

[cato]

Hi Jeremy,

We build an application that keeps users informed during a visit to the Emergency Room. It lets them know: the steps they'll need to go through, the wait times for each of those steps, who their care team is, what labs and imaging they'll need to do etc...

We use the Web Share API to let a Patient share details of their ER Visit with others. The "Sharee" view of the ER Visit is a subset of the "Patient" view. So, from the /visit/1234/ page, we share the visit/1234/sharee url.

Hope that all makes sense and is helpful.
👍

[philnash]

I use the Web Share API at the bottom of blog posts on my blog, for example here: https://philna.sh/blog/2018/04/25/web-share-api-with-web-components/. It is used to share the current page.

DEV were using the Web Share API to share the URL of articles (though it's not currently on the live site as it's been commented out for a bit due to an apparent issue with imports).

You may also find some other usages of the Web Share API in the dependent projects of my <web-share-wrapper> web component, though I haven't sorted through them myself.

[trys]

We used the Web Share API to link to a user-created custom set of images on NHM WPY (the current URL). Black & White photos taken in Asia. The fallback copies the current URL to the clipboard, with an accompanying 'toast' telling you thus.

On a virtual board game side-project, I've used it for sharing "Play Ticket to Ride with [Players].join(', ') [URL]", again falling back to a copy to clipboard of the URL. This takes them to the 'waiting room' for the game, rather than into it directly. Live Example.

[jkphl]

We're using it on our blog to share the current post URL, e.g. https://tollwerk.de/blog/asciidoc-barrierefreies-pdf-universal-accessibility. There should be a share icon (button) below the post title in case your device / browser supports the API (it's not displayed otherwise).

[schneyra]

I‘m using the API on my blog and documented the implementation here: https://martinschneider.me/articles/creating-a-sharing-button-with-the-web-share-api/

[cdevroe]

I use it in Unmark to allow users to share a URL to the Unmark web site (commonly called by some a PWA). This way, they can be in an app like Twitter and click Share and Unmark becomes a target. I wrote about it a little on my blog.

[faraixyz]

I made a web page which extracts RSS feeds from YouTube and I used it as a way to open the resulting feed URL in an app. I'll link to it once I get it up and running again.

[adactio]

Here’s a (React?) component that uses the Web Share API to share the current page:

https://github.com/lowerbarriers/finished-starter/blob/gh-pages/assets/js/partials/js--share-to-native.js

[cdevroe]

Sorry, I believe I've conflated the Web Share API and the Web Share Target API. My apologies!

I use it in Unmark to allow users to share a URL to the Unmark web site (commonly called by some a PWA). This way, they can be in an app like Twitter and click Share and Unmark becomes a target. I wrote about it a little on my blog.

[dezinezync]

I’m using it in Elytra’s Web app to share the title and URL of the article the user is reading.

[adactio]

Google are using the Web Share API on feature pages for Chrome Platform Status (if the browser supports the Web Share API). It shares the current URL. Here's an example:

https://chromestatus.com/feature/5445716612743168

[joostvanderborg]

It's used on https://gpgame.nl/ranking for sharing the current URL + default text. Currently implemented as a mailto:-link that gets enhanced to a button in supported browsers.

[adactio]

On web.dev, there's a handy collection of advanced app patterns by @tomayac that includes:

How to let the user share the website they are on

This demonstrates the Web Share API by showing how a site can allow users to share the URL they're currently on.

This is only the example of the Web Share API in this collection.

[tomayac]

(Deep link for said pattern: https://web.dev/patterns/advanced-apps/share/.)

[edent]

We use it on OpenBenches to share the current page. But, because desktop browsers generally don't support sharing, I use something like this to display sharing buttons to Twitter, Facebook, Email, etc.

	document.getElementById("shareButton").addEventListener('click', event => {
		if (navigator.share) {
			navigator.share({
				url: ''
			}).then(() => {
				console.log('Thanks for sharing!');
			})
			.catch(console.error);
		} else {
			console.log('No native sharing!');
			document.getElementById("shareButton").style.display="none";
			document.getElementById("sharing").style.display="block";
		}
	});

[stuartlangridge]

Farmbound lets you share your score for the day with others, a la Wordle and other daily games. It includes some text (a little emoji-based picture of the gameboard at the end and your score) and a link to the page. If web share isn't supported (desktop, etc) then it copies that text to the clipboard.

[iamschulz]

I'm using it to share the current page on my blog (e.g. https://iamschulz.com/view-transition-api/, below content).
Here's a little app that assists with writing therapy for mourning people: https://snippets-of-grief.netlify.app/ it uses the share api to share a generated image of the writing and it's inspirational snippet.

[adactio]

Here's a site using the Web Share API to share the current page:

https://irish.session.nz/tunes-archive/banshee/

It falls back to two links in non-supporting browsers: copy to clipboard and share by email.

[asjl]

I chose to add these sharing buttons as the page is often accessed as a PWA and the sharing options aren't as visible as they would be on a regular web page.

[adactio]

Aaron Gustafson has written a tutorial on creating social sharing links, including using the Web Share API if it is available. It shares the current page:

Sharing in the Age of 3p Cookie-mageddon

[Neustradamus]

Interesting ticket