Gedeelde gegevens ontvangen met de Web Share Target API

Delen op mobiel en desktop vereenvoudigd met de Web Share Target API

Pete LePage

Joe Medley

Op een mobiel of desktopapparaat moet delen net zo eenvoudig zijn als klikken op de knop Delen , een app kiezen en kiezen met wie u wilt delen. U wilt bijvoorbeeld een interessant artikel delen, door het naar vrienden te e-mailen of door het naar de wereld te tweeten.

In het verleden konden alleen platformspecifieke apps zich bij het besturingssysteem registreren om shares van andere geïnstalleerde apps te ontvangen. Maar met de Web Share Target API kunnen geïnstalleerde webapps zich bij het onderliggende besturingssysteem registreren als een deeldoel om gedeelde inhoud te ontvangen.

Opmerking: de Web Share Target API is slechts de helft van de magie. Webapps kunnen gegevens, bestanden, links of tekst delen met behulp van de Web Share API. Zie Web Share API voor details.

Deeldoelkiezer op systeemniveau met een geïnstalleerde PWA als optie.

Zie Web Share Target in actie

1. Gebruik Chrome 76 of hoger voor Android, of Chrome 89 of hoger op de desktop en open de Web Share Target-demo .
2. Klik desgevraagd op Installeren om de app aan uw startscherm toe te voegen, of gebruik het Chrome-menu om de app aan uw startscherm toe te voegen.
3. Open een app die delen ondersteunt, of gebruik de knop Delen in de demo-app.
4. Kies Web Share Test in de doelkiezer.

Na het delen zou u alle gedeelde informatie in de webshare-doelwebapp moeten zien.

Registreer uw app als deeldoel

Als u uw app als deeldoel wilt registreren, moet deze voldoen aan de installeerbaarheidscriteria van Chrome . Voordat een gebruiker uw app kan delen, moet hij deze bovendien aan zijn startscherm toevoegen. Dit voorkomt dat sites zichzelf willekeurig toevoegen aan de deelintentiekiezer van de gebruiker en zorgt ervoor dat delen iets is dat gebruikers met uw app willen doen.

Update uw web-app-manifest

Als u uw app als deeldoel wilt registreren, voegt u een share_target vermelding toe aan het webapp-manifest . Dit vertelt het besturingssysteem om uw app op te nemen als een optie in de intentiekiezer. Wat u aan het manifest toevoegt, bepaalt de gegevens die uw app accepteert. Er zijn drie algemene scenario's voor de vermelding share_target :

• Basisinformatie accepteren
• Applicatiewijzigingen accepteren
• Bestanden accepteren

Opmerking: u kunt slechts één share_target per manifest hebben. Als u wilt delen met verschillende plaatsen binnen uw app, geeft u dit als optie op op de landingspagina voor het delen van doelen (de pagina die wordt gespecificeerd door de url invoer).

Basisinformatie accepteren

Als uw doel-app alleen basisinformatie accepteert, zoals gegevens, links en tekst, voegt u het volgende toe aan het bestand manifest.json :

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Als uw toepassing al een share-URL-schema heeft, kunt u de params waarden vervangen door uw bestaande queryparameters. Als uw gedeelde URL-schema bijvoorbeeld body gebruikt in plaats van text , kunt u "text": "text" vervangen door "text": "body" .

De waarde van method is standaard "GET" als deze niet is opgegeven. Het veld enctype , dat in dit voorbeeld niet wordt weergegeven, geeft het type codering voor de gegevens aan. Voor de "GET" -methode is enctype standaard ingesteld op "application/x-www-form-urlencoded" en wordt genegeerd als het op iets anders is ingesteld.

Applicatiewijzigingen accepteren

Als de gedeelde gegevens de doelapp op de een of andere manier veranderen (bijvoorbeeld door een bladwijzer op te slaan in de doeltoepassing), stelt u de method in op "POST" en voegt u het enctype veld toe. In het onderstaande voorbeeld wordt een bladwijzer gemaakt in de doel-app, dus deze gebruikt "POST" voor de method en "multipart/form-data" voor het enctype :

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

Bestanden accepteren

Net als bij applicatiewijzigingen vereist het accepteren van bestanden dat de method "POST" is en dat het enctype aanwezig is. Bovendien moet enctype "multipart/form-data" zijn en moet er een files worden toegevoegd.

U moet ook een files toevoegen waarin de typen bestanden worden gedefinieerd die uw app accepteert. De array-elementen zijn vermeldingen met twee leden: een name en een accept . Het accept heeft een MIME-type, een bestandsextensie of een array die beide bevat. Het is het beste om een ​​array aan te bieden die zowel een MIME-type als een bestandsextensie bevat, omdat besturingssystemen verschillen in wat zij prefereren.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

Behandel de binnenkomende inhoud

Hoe u omgaat met de binnenkomende gedeelde gegevens is aan u en afhankelijk van uw app. Bijvoorbeeld:

• Een e-mailclient kan een nieuwe e-mail opstellen met title als onderwerp van een e-mail, waarbij text en url aan elkaar worden gekoppeld als hoofdtekst.
• Een app voor sociaal netwerken zou een nieuw bericht kunnen opstellen, waarbij title wordt genegeerd, text als hoofdtekst van het bericht wordt gebruikt en url als link wordt toegevoegd. Als er text ontbreekt, kan de app ook url in de hoofdtekst gebruiken. Als url ontbreekt, kan de app text scannen op zoek naar een URL en die als link toevoegen.
• Een app voor het delen van foto's kan een nieuwe diavoorstelling maken met title als titel van de diavoorstelling, text als beschrijving en files als afbeeldingen van de diavoorstelling.
• Een sms-app kan een nieuw bericht opstellen door text en url aan elkaar te koppelen en title te laten vallen.

GET-aandelen verwerken

Als de gebruiker uw applicatie selecteert en uw method "GET" is (de standaard), opent de browser een nieuw venster op de action URL. De browser genereert vervolgens een queryreeks met behulp van de URL-gecodeerde waarden die in het manifest zijn opgegeven. Als de deel-app bijvoorbeeld title en text biedt, is de queryreeks ?title=hello&text=world . Om dit te verwerken, gebruikt u een DOMContentLoaded gebeurtenislistener op uw voorgrondpagina en parseert u de queryreeks:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

Zorg ervoor dat u een servicemedewerker inschakelt om de action vooraf in de cache op te slaan , zodat deze snel wordt geladen en betrouwbaar werkt, zelfs als de gebruiker offline is. Workbox is een tool waarmee u precaching kunt implementeren in uw servicemedewerker.

POST-shares verwerken

Als uw method "POST" is, zoals het geval zou zijn als uw doel-app een opgeslagen bladwijzer of gedeelde bestanden accepteert, bevat de hoofdtekst van het binnenkomende POST verzoek de gegevens die zijn doorgegeven door de deeltoepassing, gecodeerd met de enctype waarde uit het manifest .

De voorgrondpagina kan deze gegevens niet rechtstreeks verwerken. Omdat de pagina de gegevens als een verzoek ziet, geeft de pagina deze door aan de servicemedewerker, waar u deze kunt onderscheppen met een fetch -gebeurtenislistener. Vanaf hier kunt u de gegevens terugsturen naar de voorgrondpagina met postMessage() of doorgeven aan de server:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

Gedeelde inhoud verifiëren

De voorbeelddoel-app voor delen.

Zorg ervoor dat u de binnenkomende gegevens verifieert. Helaas is er geen garantie dat andere apps de juiste inhoud in de juiste parameter zullen delen.

Op Android is het url veld bijvoorbeeld leeg omdat dit niet wordt ondersteund in het deelsysteem van Android. In plaats daarvan verschijnen URL's vaak in het text , of soms in het title .

Browser-ondersteuning

De Web Share Target API wordt ondersteund zoals hieronder beschreven:

Op alle platforms moet uw webapp worden geïnstalleerd voordat deze verschijnt als een potentieel doelwit voor het ontvangen van gedeelde gegevens.

Voorbeeldtoepassingen

• Knijp
• Plakboek PWA

Toon ondersteuning voor de API

Bent u van plan de Web Share Target API te gebruiken? Jouw publieke steun helpt het Chromium-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev met de hashtag #WebShareTarget en laat ons weten waar en hoe u deze gebruikt.