This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>Many of you know that I am passionate about <a href="https://paul.kinlan.me/what-happened-to-web-intents/">inter-app communications</a>, specifically
the action of sharing. One of the things that I have encouraged anyone who wants to do the next version of Web Intents to do
is focus on a very small and specific use case.</p>
<p>Well Good News Everybody. Matt Giuca on the Chrome team has been working on a <a href="https://github.com/mgiuca/web-share/blob/master/docs/interface.md">simple API</a> (<a href="https://github.com/mgiuca/web-share/blob/master/docs/explainer.md">Web Share</a>) that has the potential to connect websites with native apps
and also and it is in Chrome Dev Channel on Android to test. The great thing is that Matt and team have also been working on making it
<a href="https://github.com/mgiuca/web-share-target">possible for your own web site or service to be registered as a native share receiver</a> thus
enabling web->app sharing, app->web sharing and web->web sharing.</p>
<p>It's all still early stages, but I think it is worth testing out and giving us as much feedback as possible whilst this is getting developed. You can get all the relevant information at <a href="https://www.chromestatus.com/features/5668769141620736">ChromeStatus</a>, but
to save you a click here are the important links:</p>
<ul>
<li><a href="https://crbug.com/620973">Launch Tracking bug</a></li>
<li><a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/1BOhy5av8MQ/8LqNvS5TAQAJ">Intent to implement</a></li>
<li><a href="https://github.com/mgiuca/web-share/blob/master/docs/explainer.md">Sample</a></li>
<li><a href="https://github.com/mgiuca/web-share/blob/master/docs/explainer.md">Share explainer</a></li>
<li><a href="https://github.com/mgiuca/web-share/blob/master/docs/interface.md">Share target explainer</a></li>
</ul>
<p>I am incredibly excited by this API. It opens an entirely new part of the ecosystem up to web developers and if
the Sharing API works well then the model can be extended to other app to app interactions.</p>
<h3 id="how-to-get-this-working">How to get this working.</h3>
<ol>
<li>Get <a href="https://play.google.com/store/apps/details?id=com.chrome.dev&hl=en">Chrome Dev Channel on Android</a>.</li>
<li>Toggle chrome://flags/#enable-experimental-web-platform-features</li>
<li>Go to any page on my blog and click the share button at the end of each article.</li>
<li>Share.</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"> <span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">share</span>({<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span> document.<span style="color:#a6e22e">title</span>, <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span>, <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span>})
.<span style="color:#a6e22e">then</span>(() => <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Successful share'</span>),
<span style="color:#a6e22e">error</span> => <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Error sharing:'</span>, <span style="color:#a6e22e">error</span>));
</code></pre></div><h3 id="here-is-how-i-have-integrated-it-into-my-blog">Here is how I have integrated it into my blog.</h3>
<ol>
<li>Check to see if the API is available, if not fallback to my <a href="https://paul.kinlan.me/sharing-natively-on-android-from-the-web/">existing solution</a></li>
<li>Wait for the content to be available and then find the sharing element</li>
<li>Intercept and consume the click</li>
<li>navigator.share()</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">share</span> <span style="color:#f92672">!==</span> <span style="color:#66d9ef">undefined</span>) {
document.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'DOMContentLoaded'</span>, <span style="color:#a6e22e">e</span> => {
<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">shareBtn</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">'div.share a'</span>);
<span style="color:#a6e22e">shareBtn</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'click'</span>, <span style="color:#a6e22e">clickEvent</span> => {
<span style="color:#a6e22e">clickEvent</span>.<span style="color:#a6e22e">preventDefault</span>();
<span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">share</span>({<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span> document.<span style="color:#a6e22e">title</span>, <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span>, <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span> window.<span style="color:#a6e22e">location</span>.<span style="color:#a6e22e">href</span>})
.<span style="color:#a6e22e">then</span>(() => <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Successful share'</span>),
<span style="color:#a6e22e">error</span> => <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Error sharing:'</span>, <span style="color:#a6e22e">error</span>));
});
});
}
</code></pre></div>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
