Web Share Target in Trusted Web Activity aktivieren

Mit Web Share Target können PWAs freigegebene Inhalte von anderen Anwendungen, die auf dem Gerät installiert sind, empfangen. Diese Funktion kann beispielsweise von Apps wie Bildeditoren verwendet werden, um ein Bild von einer Kamera-App oder einem sozialen Netzwerk zu empfangen, um ein Bild oder Video für die Freigabe zu empfangen.

Ab Chrome 86 ist das Web Share-Ziel jetzt auch für Anwendungen verfügbar, die Trusted Web Activity verwenden. Die PWA sollte sofort einsatzbereit sein, aber es sind einige Änderungen an der Android-App erforderlich.

In diesem Artikel wird davon ausgegangen, dass der Entwickler mit vertrauenswürdigen Webaktivitäten vertraut ist. Leser, die mit der Technologie noch nicht vertraut sind, können mit dem Integrationsleitfaden beginnen.

Analog dazu ist eine vollständige Erläuterung der Implementierung von Web Share Target in einer PWA nicht im Projektumfang enthalten. Weitere Informationen für Entwickler finden Sie in diesem Artikel.

Die Demoanwendung unter https://scrapbook-pwa.web.app/ wird als PWA für diesen Artikel verwendet. Der Quellcode ist auf GitHub verfügbar. Die Android-Anwendung basiert auf der einfachen Demo für vertrauenswürdige Web-Aktivitäten.

Android-App ein Ziel für die Webfreigabe hinzufügen

Wenn Sie eine vorhandene Anwendung auf Grundlage vertrauenswürdiger Webaktivitäten ändern möchten, um das Web Share-Ziel zu implementieren, müssen Sie drei verschiedene Dateien ändern:

build.gradle

Die Bibliothek android-browser-helper wurde um die Unterstützung für das Web Share-Ziel aktualisiert. Aktualisieren Sie zuerst die Anwendung auf Version 2.0.1 oder höher.

dependencies {
    ...
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

res/strings.xml

Die Anwendung muss Trusted Web Activity die Details der Freigabe mitteilen, die sie unterstützt, z. B. welche URLs geöffnet werden sollen, welche Methode verwendet werden soll und welche MIME-Typen unterstützt werden.

Dies geschieht über eine JSON-Datei, die der vertrauenswürdigen Webaktivität mit einer Stringressource zur Verfügung gestellt wird. Die Felder stimmen mit dem Feld share_target im Web-Manifest überein und können einem String in strings.xml fast unverändert hinzugefügt werden. Es gibt jedoch zwei wichtige Hinweise:

  1. Der Wert des Attributs „action“ muss die vollständige URL sein, einschließlich des Ursprungs.
  2. Doppelte Anführungszeichen müssen maskiert werden, damit jedes " zu \" wird.

So sieht der Bereich share_target von https://scrapbook-pwa.web.app/manifest.json aus:

{
  ...
  "share_target": {
    "action": "/_share-target",
    "enctype": "multipart/form-data",
    "method": "POST",
    "params": {
      "files": [{
        "name": "media",
        "accept": [
          "audio/*",
          "image/*",
          "video/*"
        ]
      }]
    }
  },
  ...
}

Das neue String-Element sieht dann so aus:

<string name="share_target">
{
    \"action\": \"https://twa-web-scrapbook.web.app/_share-target\",
    \"method\": \"POST\",
    \"enctype\": \"multipart/form-data\",
    \"params\": {
      \"files\": [{
          \"name\": \"media\",
          \"accept\": [\"image/*\", \"audio/*\", \"video/*\"]
      }]
    }
}
</string>

AndroidManifest.xml

Am Android-Manifest sind einige Änderungen erforderlich. Zuerst müssen wir dafür sorgen, dass DelegationService deklariert, exportiert und aktiviert ist.

Entwickler, die ihre Anwendung anhand der einfachen Demo erstellt haben, haben den Dienst bereits eingebunden. Das Markup sollte sich im Anwendungs-Tag befinden und so aussehen:

<service
    android:name="com.google.androidbrowserhelper.trusted.DelegationService"
    android:enabled="true"
    android:exported="true">

    <intent-filter>
        <action android:name="android.support.customtabs.trusted.TRUSTED_WEB_ACTIVITY_SERVICE"/>
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>
</service>

Schließlich müssen dem Aktivitäts-Tag „LauncherActivity“ zwei neue Elemente hinzugefügt werden: – Ein meta-data-Tag, das auf die in strings.xml definierte JSON verweist. – Eine intent-filter, die anderen Apps auf dem Gerät angibt, welche MIME-Typen die Anwendung verarbeiten kann.

<meta-data
    android:name="android.support.customtabs.trusted.METADATA_SHARE_TARGET"
    android:resource="@string/share_target"/>

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="audio/*" />
    <data android:mimeType="image/*" />
    <data android:mimeType="video/*" />
</intent-filter>

Wie im obigen Markup zu sehen, sollte für jedes in der share_target-JSON-Datei deklarierte mime-type ein data-Element hinzugefügt werden.

Fazit

Durch die Integration des Web Share-Ziels können PWAs in einer vertrauenswürdigen Webaktivität stärker in andere Apps integriert werden, die auf einem Android-Gerät installiert sind.

Wie in den Schritten oben beschrieben, wird das zusätzliche Markup, das zum Hinzufügen der Unterstützung für die API in einer vorhandenen Android-App mit vertrauenswürdigen Web-Aktivitäten erforderlich ist, durch „android-browser-helper“ vereinfacht.

Im Artikel Web Share Target erfahren Sie mehr über die Verwendung der API in einer PWA. In der Web Share API erfahren Sie, wie Sie Inhalte aus der Progressiven Webanwendung teilen.

Fehlerbehebung

Meine App wird nicht als Option angezeigt, wenn ich versuche, eine Datei aus einer anderen App freizugeben.

Wenn die Anwendung nicht als Option angezeigt wird, ist der intent-filter falsch. Prüfen Sie das intent-filter-Markup noch einmal. Es muss die richtigen Aktionen, die richtige Kategorie und das richtige mime-types enthalten, das von der Anwendung verarbeitet wird.

Meine Anwendung wird als Option angezeigt, die PWA wird gestartet, aber die Daten werden nicht freigegeben.

Das kann mehrere Gründe haben. Hier ist eine Checkliste mit Dingen, die Sie beachten sollten:

  • Prüfen Sie, ob die Überprüfung der Digital Asset Links erfolgreich war.
  • Prüfen Sie die Richtigkeit des JSON-Codes in strings.xml.