{"id":56858,"date":"2022-09-18T03:01:06","date_gmt":"2022-09-17T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56858"},"modified":"2022-09-17T14:38:26","modified_gmt":"2022-09-17T04:38:26","slug":"web-share-api-download-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-download-tutorial\/","title":{"rendered":"Web Share API Download 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\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API Download Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test_download.jpg\" title=\"Web Share API Download Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Share API Download Tutorial<\/p><\/div>\n<p>When we first wrote about the <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> with the recent <a title='Web Share API Primer Tutorial' href='#wsapipt'>Web Share API Primer Tutorial<\/a> you may have been like me, pretty excited about the prospect?!  Well, it&#8217;s the lack of support, at least right now, that has let us down a little.  We thought it might help get around the bugbear of the use of PHP mail function and inline HTML emails, less a possibility these days with security concerns.<\/p>\n<p>And though the API is not well supported we thought we&#8217;d like to &#8220;tread water usefully&#8221; waiting for &#8220;those days of acceptance&#8221; and augment our interfacing web application to it, offering some new &#8230;<\/p>\n<ul>\n<li>download functionality &#8230; starting with &#8230;<\/li>\n<li>offer &#8220;a&#8221; <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_a_download.asp' title='a link download attribute information from W3schools'>&#8220;download attribute&#8221;<\/a> button looking elements off the URL <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> sharing functionality<\/li>\n<\/ul>\n<p>What got us interested?  Yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-and-text-pdf-large-animated-gif-text-nodes-tutorial\/' title='Image and Text PDF Large Animated GIF Text Nodes Tutorial'>Image and Text PDF Large Animated GIF Text Nodes Tutorial<\/a>&#8216;s web application&#8217;s interfacing to our &#8220;middle person&#8221; interfacing to <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> functionality could benefit greatly from this.<\/p>\n<p>And that is because &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Rip_Van_Winkle'>Rip<\/a>, glad you could go the distance with us on this one &#8230; <\/p>\n<blockquote><p>\n &#8230; any link on a shared email or SMS sent only lasts less than a day, but <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=d3KdY_rm1SE'>&#8220;<strike>diamonds<\/strike>downloads are forevvver&#8221;<\/a>\n<\/p><\/blockquote>\n<p>And don&#8217;t forget that, also &#8230;<\/p>\n<blockquote><p>\n &#8230; &#8220;a&#8221; &#8220;download attribute&#8221; links are pretty much <i>cross<\/i> platform and <i>cross<\/i> browser\n<\/p><\/blockquote>\n<p>So, yes, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Mac\/rolling.gif'>Luna<\/a>, &#8220;spaniel <i>cross<\/i>&#8221; <b>is<\/b> better than <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=spaniel+cranky&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=ALiCzsZEeqkZ6GN5hooH8L3k615kToYbFA%3A1663386850586&#038;ei=4kQlY6axI9vy4-EP-_qUiAU&#038;ved=0ahUKEwimquny9pr6AhVb-TgGHXs9BVEQ4dUDCA4&#038;uact=5&#038;oq=spaniel+cranky&#038;gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEKIEMgUIABCiBDIFCAAQogQyBQgAEKIEOgYIABAeEAc6CggAEB4QDxAHEAo6CAgAEB4QDxAHOggIABAeEAgQB0oECEEYAEoECEYYAFAAWOgMYN8PaABwAXgAgAGxAYgB6giSAQMwLjeYAQCgAQHAAQE&#038;sclient=gws-wiz'>&#8220;spaniel cranky&#8221;<\/a>!<\/p>\n<p>See for yourself, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html------GETME \">the changed HTML and Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html------GETME\">web_share_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">Web Share API supervisor<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-web-share-api-primer-tutorial\/'>New Web Share API Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsapipt'>Previous relevant <a target=_blank title='Web Share API Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-primer-tutorial\/'>Web Share API Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\"><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.'>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'>&#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\">&#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'>&#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\">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<hr>\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='#d56858' onclick='var dv=document.getElementById(\"d56858\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/download\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56858' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When we first wrote about the Web Share API with the recent Web Share API Primer Tutorial you may have been like me, pretty excited about the prospect?! Well, it&#8217;s the lack of support, at least right now, that has &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-download-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,174,275,278,360,380,418,576,652,1807,760,997,1133,1159,1319,4031],"class_list":["post-56858","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-button","tag-cross-browser","tag-cross-platform","tag-download","tag-email","tag-file","tag-html","tag-javascript","tag-link","tag-media","tag-programming","tag-share","tag-sms","tag-tutorial","tag-web-share-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56858"}],"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=56858"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56858\/revisions"}],"predecessor-version":[{"id":56866,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56858\/revisions\/56866"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}