Web Share, een nieuwe manier van delen

Content op onze websites schrijven we niet voor onszelf, maar voor een groter publiek. Door onze content makkelijk deelbaar te maken, bestaat de kans dat onze gebruikers het verder verspreiden. Om te kunnen delen, kennen we sinds het begin van sociale media “like en deel knoppen” die massaal onder artikelen en blogs geplaatst worden. Intussen is een nieuwe oplossing om delen meer privacy vriendelijk, niet schadelijk voor performance én veiliger te maken, beschikbaar —de Web Share API.

Waarom de Web Share API?

Traditionele “like en deel knoppen” van bijvoorbeeld Facebook, Twitter en LinkedIn kennen verschillende problemen.

Privacy en GDPR

Deel knoppen die we insluiten van externe sociale media kanalen staan erom bekend dat ze de gebruiker tracken^1. Onder andere Facebook maakt gebruik van deze data om advertenties te kunnen targetten. Dit gebeurt zelfs wanneer je geen gebruik maakt van de knop.

Buiten het ethische aspect van privacy voor de gebruikers van je website is er ook nog een wettig aspect. Het Europese Hof heeft aangegeven dat website eigenaren strafbaar kunnen zijn als ze Facebook helpen met het verzamelen van data door het plaatsen van een deelknop^3.

Performance impact op je website

Alle third-party plugins die je inlaadt op je website hebben een impact op de snelheid van je website. Of je deze impact wil accepteren is afhankelijk van de doelen die ze vervullen.

De Facebook Like knop laadt de volledige Facebook SDK in, deze is 400 kb groot^4. Dit is niet alleen een probleem op apparaten met trager internet, maar op niet-high-end smartphones kost dit veel CPU kracht om uit te voeren.

Als het een doel bereikt kan je de afweging maken om Facebook's Like knop toch te gebruiken. Maar dit doel kan je ook op andere manieren vervullen die een veel kleinere impact hebben op snelheid.

Delen op veel verschillende manieren

Als we websites ontwikkelen kijken we naar wat er op dat moment ‘hip’ is en waar onze gebruikers actief op zijn. Vroeger zouden we gekozen hebben voor Hyves. Nu kiezen we voor Facebook, Twitter, LinkedIn en E-mail. Het gebruik van platformen verandert continu. Dat kan je zien aan bijvoorbeeld Google+, waarvan je op verschillende websites nog links ziet staan, terwijl het al een tijdje niet meer bestaat.

Kortom, we implementeren opties om te delen die over een paar jaar helemaal niet meer gebruikt worden. Of onze gebruiker wil je content delen op een platform waar je helemaal nog niet aan gedacht hebt.

Inconsistente interface

Elk platform heeft een eigen interface om het delen af te handelen en elke website implementeert delen op een andere manier. Dit resulteert in het feit dat gebruikers nooit precies weten wat er gebeurd wanneer ze op delen klikken.

Deel URL's

Voor onze opdrachtgevers maken we vrijwel nooit gebruik van de like of deel knoppen die platformen als Facebook, Twitter of LinkedIn aanbieden. Dit om de eerste twee problemen (privacy en performance) hierboven te tackelen. Om delen toch mogelijk te maken gebruiken we share URL's die voor alle sociale media platformen beschikbaar zijn.

Deze zien er als volgt uit:

# Facebook
https://www.facebook.com/sharer/sharer.php?u={URL}

# Twitter
https://twitter.com/intent/tweet?text={BERICHT}

# LinkedIn
https://www.linkedin.com/shareArticle?url={URL}&title={TITEL}&summary={OMSCHRIJVING}

# Mail
mailto:?subject={ONDERWERP}&body={TEKST}

Deze werken allemaal prima en zijn volledig ondersteund in alle browsers.

Web Share API

Met deel URL's hebben we nog niet al onze problemen opgelost—daar komt de Web Share API om de hoek. De Web Share API is een API in de browser die we kunnen aanroepen om een deel interface van je browser of besturingssysteem te openen. Deze interface zal voor de gebruiker bekend zijn, bevat alle opties die voor de gebruiker relevant zijn en ook gebruikt worden.

Meteen ook het nadeel van de Web Share API; browser support is vooral op desktop browser niet groot^5. Op het moment van schrijven is er één desktop browser met ondersteuning—Safari op macOS. Op mobiele apparaten is er ondersteuning in iOS Safari en Chrome voor Android.

Implementatie

De volgende stap is het toevoegen van de API aan jouw site. Dit kan je doen door het volgende stukje code uit te voeren na bijvoorbeeld het klikken op een knop:

navigator.share({
    title: 'Titel',
    text: 'Volledige tekst',
    url: 'https://www.orangetalent.nl/',
})
  .then(succeeded)
  .catch(error);

Niks meer dan dat. We roepen navigator.share aan met onze opties en krijgen een Promise terug waarin we kunnen reageren op fouten en/of succesvol delen. We hebben alleen één probleem: browser support. Veel van onze gebruikers zullen met bovenstaande code een error krijgen. Wat wij meestal toepassen voor opdrachtgevers is een progressive enhancement oplossing. We bieden een basis-ervaring met deel URL's (zie uitleg hierboven) en voegen daarbij een Web Share optie toe als de browser het ondersteund. Laten we kijken naar een voorbeeld:

HTML:

<!-- We maken een div met onze deel URL's -->
<div class="js-share-urls">
    <a href="https://www.facebook.com/sharer/sharer.php?u={URL}" target="_blank" rel="nofollow noopener">
        Delen op Facebook
    </a>

    <a href="https://twitter.com/intent/tweet?text={BERICHT}" target="_blank" rel="nofollow noopener">
        Delen op Twitter
    </a>
</div>

<!-- En een knop om de Web Share API aan te roepen, deze wordt in eerste instantie verborgen -->
<button type="button" class="js-web-share" hidden>
    Delen
</button>

JavaScript

const shareButton = document.querySelector('.js-web-share');
const shareUrls = document.querySelector('.js-share-urls');

// Als de Web Share API wordt ondersteund tonen we de knop en verbergen
// we de standaard deel URL's.
if (navigator.share) {
  shareButton.removeAttribute('hidden');
  shareUrls.setAttribute('hidden', 'hidden');

  // We luisteren naar clicks op de Web Share knop
  shareButton.addEventListener('click', () => {
    navigator.share({
      title: 'Titel',
      text: 'Volledige tekst',
      url: 'https://www.orangetalent.nl/',
    })
      .then(succeeded)
      .catch(error);
  });
}

Dit is een versimpeld voorbeeld. In de praktijk wordt het verbonden in je applicatie en mogelijk zelfs gekoppeld aan je JavaScript framework. Als we het bijvoorbeeld in Vue zouden toepassen dan kan het er als volgt uitzien:

<template>
  <div>
    <div v-if="!webShareSupport">
      <a href="https://www.facebook.com/sharer/sharer.php?u={URL}" target="_blank" rel="nofollow noopener">
        Delen op Facebook
      </a>

      <a href="https://twitter.com/intent/tweet?text={BERICHT}" target="_blank" rel="nofollow noopener">
        Delen op Twitter
      </a>
    </div>

    <button type="button" v-if="webShareSupport" @click="onWebShareClick">
      Delen met Web Share
    </button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        webShareSupport: !!navigator.share,
      };
    },

    methods: {
      onWebShareClick() {
        navigator.share({
          title: 'Titel',
          text: 'Volledige tekst',
          url: 'https://www.orangetalent.nl/',
        })
          .then(succeeded)
          .catch(error);
      },
    },
  };
</script>

De toekomst van de Web Share API

De specificatie van Web Share stamt uit 2016. Sind die tijd is browser support vooral weggelegd voor mobiele browsers. Er lijkt tot op heden geen aanstalten te worden gemaakt door meer desktop browsers om de API te ondersteunen. Daarom zullen we nog afhankelijk blijven van de progressive enhancement methode zoals hierboven is beschreven.

Web Share API Level 2

Voor mobiele browsers is er wel ontwikkeling gaande in de Web Share API specificatie. Zo is de Web Share API level 2^6 in ontwikkeling, welke al wordt ondersteund in Chrome 75 voor Android^7. Web Share API level 2 voegt ondersteuning toe aan het delen van bestanden.

const file = new File(['foo'], 'foo.txt', {
  type: 'text/plain',
});

const shareData = {
  title: 'Titel',
  text: 'Volledige tekst',
  url: 'https://www.orangetalent.nl/',

  // Er kan een array met bestanden (uit de File API)
  // worden meegestuurd
  files: [file],
};

// Met canShare kunnen we testen of de data die we willen
// delen ondersteund wordt in de Web Share API
if (navigator.canShare(shareData)) {
  navigator.share(shareData);
}

Web Share Target API

Een andere ontwikkeling, die een directe correlatie heeft met de Web Share API, is de Web Share Target API^8. Met de Web Share Target API kunnen we onze website registreren als doel waarmee gedeeld kan worden. Sinds Chrome 71 voor Android, wordt deze API ondersteund. Je kan je website registeren als Share Target door een paar onderdelen toe te voegen aan je manifest.json^9:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "enctype": "application/x-www-form-urlencoded",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Voor meer informatie over het manifest.json bestand verwijs ik je door naar de documentatie van MDN.

Voor meer informatie over het registreren van je applicatie en hoe je Web Share data kan afhandelen verwijs ik je door naar de Chrome developers blog.