Activer la cible de partage Web dans l'activité Web fiable

La cible de partage Web permet aux PWA de recevoir du contenu partagé provenant d'autres applications installées sur l'appareil. Par exemple, des applications telles que les éditeurs d'images peuvent utiliser cette fonctionnalité pour recevoir une image d'une application d'appareil photo ou d'un réseau social pour recevoir une image ou une vidéo à partager ;

À partir de Chrome 86, la cible de partage Web est aussi disponible pour les applications utilisant Activité Web fiable : Bien que la PWA fonctionne directement, quelques modifications sont nécessaires pour l'application Android.

Dans cet article, nous partons du principe que le développeur connaît bien les activités Web fiables. Lecteurs qui ne connaissent pas Pour commencer, consultez le guide d'intégration.

De même, une explication complète de l'implémentation de la cible de partage Web dans une PWA se trouve en dehors d'application. Les développeurs peuvent consulter cet article pour en savoir plus.

L'application de démonstration disponible à l'adresse https://scrapbook-pwa.web.app/ sera utilisée comme PWA pour cette et son code source sont disponibles sur GitHub. L'application Android est basée sur la démonstration de base de l'activité Web fiable.

Ajouter une cible de partage Web à l'application Android

Pour modifier une application basée sur une activité Web fiable afin de mettre en œuvre le partage Web Cible. Vous devez modifier trois fichiers différents:

build.gradle

La bibliothèque android-browser-helper a été mise à jour pour être compatible avec la cible de partage Web. En tant que première étape, mettez à jour l'application pour qu'elle utilise une version supérieure ou égale à 2.0.1.

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

res/strings.xml

L'application doit indiquer à l'activité Web fiable les détails du partage pris en charge la réception, telles que les URL à ouvrir, la méthode à utiliser et les types MIME pris en charge.

Pour ce faire, utilisez un fichier JSON mis à la disposition de l'activité Web de confiance avec une ressource de chaîne. La sont les mêmes que les champs share_target disponibles dans le fichier manifeste Web et peuvent être ajoutés à Une chaîne dans strings.xml, presque telle quelle, avec deux remarques importantes:

  1. La valeur de l'attribut action doit être l'URL complète, y compris l'origine.
  2. Les guillemets doubles doivent être échappés. Ainsi, chaque " devient \".

Voici à quoi ressemble la section share_target du fichier https://scrapbook-pwa.web.app/manifest.json par exemple:

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

Le nouvel élément de chaîne se présente comme suit:

<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

Quelques modifications sont nécessaires dans le fichier manifeste Android. Nous devons d'abord nous assurer que DelegationService est déclaré, exporté et activé.

Les développeurs qui ont créé leur application à partir de la démo de base disposent déjà du service et le balisage doit se trouver à l'intérieur de la balise d'application et se présenter comme suit:

<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>

Enfin, deux nouveaux éléments doivent être ajoutés à la balise d'activité "Launcher" : - Une balise meta-data qui référence le fichier JSON défini dans le fichier string.xml - Un élément intent-filter qui déclare les types MIME que l'application est capable de gérer applications sur l'appareil.

<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>

Comme le montre le balisage ci-dessus, un élément data doit être ajouté pour chaque mime-type déclaré. dans le fichier JSON share_target.

Conclusion

L'intégration de la cible de partage Web permet aux PWA au sein d'une activité Web fiable d'être plus précis est intégré à d'autres applications installées sur un appareil Android.

Comme décrit dans les étapes ci-dessus, le balisage supplémentaire nécessaire pour ajouter la prise en charge de l'API dans une l'application Android existante qui utilise l'option "Activité Web fiable" est simplifiée par android-browser-helper.

Consultez l'article sur la cible de partage Web pour en savoir plus sur l'utilisation de l'API sur une PWA et sur la API Web Share pour découvrir comment partager du contenu à partir de la progressive web app.

Dépannage

Mon application ne s'affiche pas en tant qu'option lorsque j'essaie de partager un fichier à partir d'une autre application.

Lorsque l'application ne s'affiche pas en tant qu'option, cela signifie que intent-filter est incorrecte. Vérifiez le balisage intent-filter et assurez-vous qu'il contient les actions appropriées. une catégorie et mime-types gérés par l'application.

Mon application s'affiche en option. La PWA démarre, mais les données ne sont pas partagées.

Plusieurs facteurs peuvent être à l'origine de ce problème. Voici une liste de points à vérifier:

  • Assurez-vous que la validation de Digital Asset Links a réussi.
  • Vérifiez l'exactitude du fichier JSON contenu dans le fichier string.xml.