{"id":56396,"date":"2022-07-14T03:01:56","date_gmt":"2022-07-13T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56396"},"modified":"2025-07-29T06:47:09","modified_gmt":"2025-07-28T20:47:09","slug":"web-share-api-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-primer-tutorial\/","title":{"rendered":"Web Share API Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.gif\" title=\"Web Share API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Share API Primer Tutorial<\/p><\/div>\n<p>The web is improved by operating system <a target=\"_blank\" title='Context menu information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Context_menu#:~:text=A%20context%20menu%20(also%20called,a%20right%2Dclick%20mouse%20operation.' rel=\"noopener\">Context Menus<\/a> via <i>right clicks or two finger gestures<\/i> over &#8230;<\/p>\n<ul>\n<li>links<\/li>\n<li>media<\/li>\n<li>document<\/li>\n<\/ul>\n<p> &#8230; webpage contents.  Today, we roadtest a web API called <a target=\"_blank\" title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share' rel=\"noopener\">&#8220;Web Share API&#8221;<\/a> that simulates <i>right clicks or two finger gestures<\/i> with your normal everyday button press on a webpage.<\/p>\n<p>Of most use, is the &#8220;Web Share API&#8221; which can take multiple selected files (via a &#8220;browse&#8221; type button) &#8230;<\/p>\n<p><code><br \/>\n\/\/ Thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share<br \/>\n<br \/>\ndocument.getElementById('share').addEventListener('click', async () =&gt; {<br \/>\n  const files = input.files<br \/>\n<br \/>\n  if (files.length === 0) {<br \/>\n    shareurl();<br \/>\n    output.textContent = 'No files selected.'<br \/>\n    return<br \/>\n  }<br \/>\n<br \/>\n  \/\/ feature detecting navigator.canShare() also implies<br \/>\n  \/\/ the same for the navigator.share()<br \/>\n  if (!navigator.canShare) {<br \/>\n    output.textContent = `Your browser doesn't support the Web Share API.`<br \/>\n    return<br \/>\n  }<br \/>\n<br \/>\n  if (navigator.canShare({ files })) {<br \/>\n    try {<br \/>\n      await navigator.share({<br \/>\n        files,<br \/>\n        title: 'Media or documents',<br \/>\n        text: 'Take a look at media or documents below' + String.fromCharCode(10) + String.fromCharCode(10)<br \/>\n      })<br \/>\n      output.textContent = 'Shared!'<br \/>\n    } catch (error) {<br \/>\n      output.textContent = `Error: ${error.message}`<br \/>\n    }<br \/>\n  } else {<br \/>\n    output.textContent = `Your system doesn't support sharing these files.`<br \/>\n  }<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; and attach them to an email or SMS or some other &#8220;Sharing Application&#8221; on that operating system &#8220;Context Menu&#8221; in readiness for the user to fill in other requirements and then send off to the recipient, as required.<\/p>\n<p>This API was a little strange to us in that on this macOS setup Safari web browser worked, rather than Google Chrome, which is a turn around from our usual expectations with these experimental Javascript APIs.  Feel free to try our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html-GETME\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share' rel=\"noopener\">&#8220;Web Share API&#8221;<\/a> based, thanks, HTML and Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\" rel=\"noopener\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:600px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56396' onclick='var dv=document.getElementById(\"d56396\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/api\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56396' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The web is improved by operating system Context Menus via right clicks or two finger gestures over &#8230; links media document &#8230; webpage contents. Today, we roadtest a web API called &#8220;Web Share API&#8221; that simulates right clicks or two &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[88,1993,174,2105,3865,349,418,419,428,652,1807,760,770,2092,997,1069,1133,1319,4031],"class_list":["post-56396","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-browse","tag-button","tag-context","tag-context-menu","tag-document","tag-file","tag-file-api","tag-files","tag-javascript","tag-link","tag-media","tag-menu","tag-multiple","tag-programming","tag-right-click","tag-share","tag-tutorial","tag-web-share-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56396"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56396"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56396\/revisions"}],"predecessor-version":[{"id":69230,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56396\/revisions\/69230"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}