navigator.share

using share api and fallbacks

by Plippie Plop

HTML

<button type="button" id="share-url-btn" data-share-url="https://www.archifact.nl" data-share-message="Spread and share!">
Share link
</button>

CSS

body{
  font-family:'Roboto';
  }
.result{
  border:1px solid grey;
  padding:0.5em;
}

.hidden{
  display:none;
  visibility:none;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {

  shareStuff.init();

});


var shareStuff = {
  debug: true,
  result: null,
  share: {
    title: null,
    text: null,
    url: null,
    file: null
  }
};



shareStuff.init = function() {

  //debug
  if (shareStuff.debug) {
    console.log('[ShareStuff] init');
  }


  // click event:
  let urlBtn = document.getElementById('share-url-btn');

  if (urlBtn) {

    if (!navigator['canShare']) {
      urlBtn.textContent = 'Copy Link';
    }

    urlBtn.addEventListener("click", async () => {

      shareStuff.share.text = urlBtn.dataset.shareMessage;
      shareStuff.share.url = urlBtn.dataset.shareUrl;

      //we asume alsways an url
      if (!shareStuff.share.url) {
        console.warn('No url data');
        return;
      }
      if (!shareStuff.share.text) {
        shareStuff.share.text = "Sharing Link";
      }


      if (navigator['share']) {


        try {
          await navigator.share({
            url: shareStuff.share.url,
            text: shareStuff.share.text
          });


        } catch (err) {
          // this will catch the second share attempt on ios14
          window.location.reload(true); // now share works again
          console.warn(err.message);
        }

      } else {
        // go to fallback
        shareStuff.shareFallback();
      }

    });

  }

};



//share fallback
shareStuff.shareFallback = function() {


  if (navigator['clipboard']) {


    navigator.clipboard.writeText(shareStuff.share.url)
      .then(() => {
        console.log('Copied data...');
      })
      .catch((err) => {
        console.warn('Cannot copy...' + err);
      });


  } else {

    //fallback of fallback   

    const textArea = document.createElement('textarea');
    textArea.value = shareStuff.share.url;

    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px'; // to make it invisible and out of the reach
    textArea.setAttribute('readonly', ''); //...