{"id":288685,"date":"2019-06-06T07:21:09","date_gmt":"2019-06-06T14:21:09","guid":{"rendered":"http:\/\/css-tricks.com\/?p=288685"},"modified":"2019-06-06T07:21:09","modified_gmt":"2019-06-06T14:21:09","slug":"how-to-use-the-web-share-api","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-use-the-web-share-api\/","title":{"rendered":"How to Use the Web Share API"},"content":{"rendered":"<p>The <a href=\"https:\/\/wicg.github.io\/web-share\/\" rel=\"noopener\">Web Share API<\/a> is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to <strong>trigger the native share dialog<\/strong> of a device (or desktop, if using Safari) when sharing content \u2014 say a link or a contact card \u2014 directly from a website or web application.<\/p>\n<p>While it\u2019s already possible for a user to share content from a webpage via native means, they have to locate the option in the browser menu, and even then, there\u2019s no control over what gets shared. The introduction of this <abbr>API<\/abbr> allows developers to add sharing functionality into apps or websites by taking advantage of the native content sharing capabilities on a user\u2019s device.<\/p>\n<figure id=\"post-288688\" class=\"align-left media-288688\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/sharing-01.png?w=400&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>iOS offers a number of native sharing options.<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p>This approach provides a number of advantages over conventional methods:<\/p>\n<ul>\n<li>The user is presented with a wide range of options for sharing content compared to the limited number you might have in your <abbr title=\"Do It Yourself\">DIY<\/abbr> implementation.<\/li>\n<li>You can improve your page load times by doing away with third-party scripts from individual social platforms.<\/li>\n<li>You don\u2019t need to add a series of buttons for different social media sites and email. A single button is sufficient to trigger the device\u2019s native sharing options.<\/li>\n<li>Users can customize their preferred share targets on their own device instead of being limited to just the predefined options.<\/li>\n<\/ul>\n<h3>A note on browser support<\/h3>\n<p>Before we get into the details of how the <abbr>API<\/abbr> works, let\u2019s get the issue of browser support out of the way. To be honest, browser support isn\u2019t great at this time. It\u2019s only available for Chrome for Android, and Safari (desktop and iOS).<\/p>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=web-share\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"n nope\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">95<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">12.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"n nope\" title=\"Android - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">12.2-12.5<\/span><\/td><\/tr><\/table><\/div><\/div>\n<p>But don\u2019t let that discourage you from adopting this <abbr>API<\/abbr> on your website. It\u2019s pretty easy to implement a fallback for supporting browsers that don\u2019t offer support for it,  as you\u2019ll see.<\/p>\n<h3>A few requirements for using it<\/h3>\n<p>Before you can adopt this <abbr>API<\/abbr> on your own web project, there are two major things to note:<\/p>\n<ul>\n<li>Your website has to be <a href=\"https:\/\/css-tricks.com\/switching-site-https-shoestring-budget\/\">served over <abbr>HTTPS<\/abbr><\/a>. To facilitate local development, the API also works when your site is running over localhost.<\/li>\n<li>To prevent abuse, the <abbr>API<\/abbr> can only be triggered in response to some user action (such as a <code>click<\/code> event).<\/li>\n<\/ul>\n<h3>Here&#8217;s an example<\/h3>\n<p>To demonstrate how to use this <abbr>API<\/abbr>, I\u2019ve prepared a <a href=\"https:\/\/codepen.io\/ayoisaiah\/pen\/WBpzBo\" rel=\"noopener\">demo<\/a> that works essentially the same as it does on <a href=\"https:\/\/freshman.tech\" rel=\"noopener\">my site<\/a>. Here\u2019s how it looks like:<\/p>\n<p class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"ayoisaiah\" data-slug-hash=\"WBpzBo\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"WebShare API Demo - Start\">\n<span>See the Pen <a href=\"https:\/\/codepen.io\/ayoisaiah\/pen\/WBpzBo\/\" rel=\"noopener\"><br \/>\nWebShare API Demo &#8211; Start<\/a> by Ayooluwa (<a href=\"https:\/\/codepen.io\/ayoisaiah\" rel=\"noopener\">@ayoisaiah<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>At this moment, once you click the share button, a dialog pops out and shows a few options for sharing the content. Here\u2019s the part of the code that helps us achieve that:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">shareButton.addEventListener('click', event =&gt; {\r\n  shareDialog.classList.add('is-open');\r\n});<\/code><\/pre>\n<p>Let\u2019s go ahead and convert this example to use the Web Share API instead. The first thing to do is check if the API is indeed supported on the user\u2019s browser as shown below:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">if (navigator.share) {\r\n  \/\/ Web Share API is supported\r\n} else {\r\n  \/\/ Fallback\r\n}<\/code><\/pre>\n<p>Using the Web Share API is as simple as calling the <code>navigator.share()<\/code> method and passing an object that contains at least one of the following fields:<\/p>\n<ul>\n<li><code>url<\/code>: A string representing the URL to be shared. This will usually be the document <abbr>URL<\/abbr>, but it doesn\u2019t have to be. You share any <abbr>URL<\/abbr> via the Web Share API.<\/li>\n<li><code>title<\/code>: A string representing the title to be shared, usually <code>document.title<\/code>.<\/li>\n<li><code>text<\/code>: Any text you want to include.<\/li>\n<\/ul>\n<p>Here\u2019s how that looks in practice:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">shareButton.addEventListener('click', event =&gt; {\r\n  if (navigator.share) {\r\n    navigator.share({\r\n      title: 'WebShare API Demo',\r\n      url: 'https:\/\/codepen.io\/ayoisaiah\/pen\/YbNazJ'\r\n    }).then(() =&gt; {\r\n      console.log('Thanks for sharing!');\r\n    })\r\n    .catch(console.error);\r\n  } else {\r\n    \/\/ fallback\r\n  }\r\n});<\/code><\/pre>\n<p>At this point, once the share button is clicked in a supported browser, the native picker will pop out with all the possible targets that the user can share the data with. Targets can be social media apps, email, instant messaging, <abbr title=\"Short Message Service\">SMS<\/abbr> or other registered share targets.<\/p>\n<p>The <abbr>API<\/abbr> is promised-based, so you can attach a <code>.then()<\/code> method to perhaps display a success message if the share was successful, and handle errors with <code>.catch()<\/code>. In a real-world scenario, you might want to grab the page\u2019s title and <abbr>URL<\/abbr> using this snippet:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">const title = document.title;\r\nconst url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;<\/code><\/pre>\n<p>For the <abbr>URL<\/abbr>, we first check if the page has a canonical <abbr>URL<\/abbr> and, if so, use that. Otherwise, we grab the <code>href<\/code> off <code>document.location<\/code>.<\/p>\n<h3>Providing a fallback is a good idea<\/h3>\n<p>In browsers where the Web Share API isn\u2019t supported, we need to provide a fallback mechanism so that users on those browsers still get some sharing options.<\/p>\n<p>In our case, we have a dialog that pops out with a few options for sharing the content and the buttons in our demo do not actually link to anywhere since, well, it\u2019s a demo. But if you want to learn about how you can create your own links to share web pages without third-party scripts, <a href=\"https:\/\/css-tricks.com\/simple-social-sharing-links\/\">Adam Coti&#8217;s article<\/a> is a good place to start.<\/p>\n<p>What we want to do is display the fallback dialog for users on browsers without support for the Web Share API. This is as simple as moving the code that opens the share dialog into the <code>else<\/code> block:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">shareButton.addEventListener('click', event =&gt; {\r\n  if (navigator.share) {\r\n    navigator.share({\r\n      title: 'WebShare API Demo',\r\n      url: 'https:\/\/codepen.io\/ayoisaiah\/pen\/YbNazJ'\r\n    }).then(() =&gt; {\r\n      console.log('Thanks for sharing!');\r\n    })\r\n    .catch(console.error);\r\n  } else {\r\n    shareDialog.classList.add('is-open');\r\n  }\r\n});<\/code><\/pre>\n<p>Now, all users are covered regardless of what browser they\u2019re on. Here&#8217;s a comparison of how the share button behaves on two mobile browsers, one with Web Share API support, and the other without:<\/p>\n<figure id=\"post-288689\" class=\"align-left media-288689\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/s_9EEA66732A856E0B33C38AAD37C602A0053ED283BF0708D815D21130E199F5F6_1557987564297_ezgif-2-6c79ec7a0ece.gif?w=400&#038;ssl=1\" alt=\"Testing the share button on an Android device that supports the functionality. Android's native sharing options are triggered when the share button is pressed. The second test shows the hare button being clicked on an Android device that does not support the functionality. That produces the fallback sharing options that have been added manually.\" data-recalc-dims=\"1\" \/><\/figure>\n<p><a href=\"https:\/\/codepen.io\/ayoisaiah\/pen\/YbNazJ\" rel=\"noopener\">Try it out!<\/a> Use a browser that supports Web Share, and one that doesn&#8217;t. It should work similarly to the above demonstration.<\/p>\n<p class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"ayoisaiah\" data-slug-hash=\"YbNazJ\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"WebShare API Demo - End\">\n<span>See the Pen <a href=\"https:\/\/codepen.io\/ayoisaiah\/pen\/YbNazJ\/\" rel=\"noopener\"><br \/>\nWebShare API Demo &#8211; End<\/a> by Ayooluwa (<a href=\"https:\/\/codepen.io\/ayoisaiah\" rel=\"noopener\">@ayoisaiah<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h3>Wrapping up<\/h3>\n<p>This covers pretty much the baseline for what you need to know about the Web Share API. By implementing it on your website, visitors can share your content more easily across a wider variety of social networks, with contacts and other native apps.<\/p>\n<p>It\u2019s also worth noting that you\u2019re able to add your web application as a share target if it meets the <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/app-install-banners\/#criteria\" rel=\"noopener\">Progressive Web App installation criteria<\/a> and is added to a user\u2019s home screen. This a feature of the Web Share Target API which you can <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/12\/web-share-target\" rel=\"noopener\">read about at Google Developers<\/a>.<\/p>\n<p>Although browser support is spotty, a fallback is easily implemented, so I see no reason why more websites shouldn\u2019t adopt this. If you want to learn more about this <abbr>API<\/abbr>, you can read the <a href=\"https:\/\/wicg.github.io\/web-share\/\" rel=\"noopener\">specification here<\/a>.<\/p>\n<p>Have you used the Web Share API? Please <em>share<\/em> it in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content \u2014 say a link or a contact card \u2014 [&hellip;]<\/p>\n","protected":false},"author":261291,"featured_media":288980,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[921,1660],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-share-api.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":295666,"url":"https:\/\/css-tricks.com\/ux-considerations-for-web-sharing\/","url_meta":{"origin":288685,"position":0},"title":"UX Considerations for Web Sharing","date":"September 20, 2019","format":false,"excerpt":"From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these buttons aren\u2019t needed. All mobile browsers \u2014 Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet \u2014 make it easy to share content\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/sharing-icons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322507,"url":"https:\/\/css-tricks.com\/on-the-web-share-api\/","url_meta":{"origin":288685,"position":1},"title":"On the Web Share API","date":"October 5, 2020","format":false,"excerpt":"I think the Web Share API is very cool (here's our coverage). In a nutshell, it taps into the native sharing features on whatever platform you're on, if that platform supports it. I like this: Web Share API activated on iOS A heck of a lot more than these things:\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/ios-shar-sheet.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356088,"url":"https:\/\/css-tricks.com\/why-would-a-business-push-a-native-app-over-a-website\/","url_meta":{"origin":288685,"position":2},"title":"Why would a business push a native app over a website?","date":"December 10, 2021","format":false,"excerpt":"I wanted to write down what I think the reasons are here in December of 2021 so that we might revisit it from time to time in the future and see if these reasons are still relevant. I'm a web guy myself, so I'm interested in seeing how the web\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/phone-to-web.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317835,"url":"https:\/\/css-tricks.com\/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns\/","url_meta":{"origin":288685,"position":3},"title":"Apple declined to implement 16 Web APIs in Safari due to privacy concerns","date":"July 24, 2020","format":false,"excerpt":"Why? Fingerprinting. Rather than these APIs being used for what they are meant for, they end up being used for gross ad tech. As in, \"hey, we don't know exactly who you are, but wait, through a script we can tell your phone stopped being idle from 8:00 am to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/safari-technology-preview.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336902,"url":"https:\/\/css-tricks.com\/imagining-native-skip-links\/","url_meta":{"origin":288685,"position":4},"title":"Imagining native skip links","date":"March 23, 2021","format":false,"excerpt":"I love it when standards evolve from something that a bunch of developers are already doing, and making it easier and foolproof. Kitty Giraudel is onto that here with skip links, something that every website should probably have, and that has a whole checklist of things that we can and\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267969,"url":"https:\/\/css-tricks.com\/a-browser-based-open-source-tool-for-alternative-communication\/","url_meta":{"origin":288685,"position":5},"title":"A Browser-Based, Open Source Tool for Alternative Communication","date":"March 14, 2018","format":false,"excerpt":"Have you ever lost your voice? How did you handle that? Perhaps you carried a notebook and pen to scribble notes. Or jotted quick texts on your phone. Have you ever traveled somewhere that you didn't speak or understand the language everyone around you was speaking? How did you order\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/cboard.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-share-api.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288685"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/261291"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=288685"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288685\/revisions"}],"predecessor-version":[{"id":288696,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288685\/revisions\/288696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/288980"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=288685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=288685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=288685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}