Met Web Share Target kunnen PWA's gedeelde content ontvangen van andere applicaties die op het apparaat zijn geïnstalleerd. Deze functie kan bijvoorbeeld worden gebruikt door applicaties zoals beeldbewerkers om een afbeelding van een camera-app te ontvangen, of door een sociaal netwerk om een afbeelding of video te ontvangen om te delen.
Vanaf Chrome 86 is Web Share Target ook beschikbaar voor applicaties die Trusted Web Activity gebruiken. Hoewel de PWA direct zou moeten werken, zijn er enkele aanpassingen nodig aan de Android-applicatie.
In dit artikel wordt ervan uitgegaan dat de ontwikkelaar bekend is met Trusted Web Activities. Lezers die nog niet bekend zijn met de technologie, kunnen aan de slag met de Integratiehandleiding .
In dezelfde lijn ligt het ook buiten het bestek van een volledige uitleg van de Web Share Target-implementatie in een PWA. Ontwikkelaars kunnen hierover meer informatie vinden in dit artikel .
De demo-applicatie op https://scrapbook-pwa.web.app/ wordt gebruikt als PWA voor dit artikel en de broncode ervan is beschikbaar op GitHub . De Android-applicatie is gebaseerd op de basisdemo van Trusted Web Activity .
Web Share Target toevoegen aan de Android-app
Om een bestaande op Trusted Web Activity gebaseerde toepassing aan te passen om Web Share Target te implementeren, zijn wijzigingen in drie verschillende bestanden vereist:
build.gradle
De Android-browser-helperbibliotheek is bijgewerkt met ondersteuning voor Web Share Target. Werk de applicatie eerst bij naar een versie hoger dan of gelijk aan 2.0.1.
dependencies {
...
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
res/strings.xml
De toepassing moet de vertrouwde webactiviteit vertellen welke details het ondersteunt bij het delen, zoals welke URL's moeten worden geopend, welke methode moet worden gebruikt en welke MIME-typen worden ondersteund.
Dit gebeurt via een JSON, die beschikbaar wordt gesteld aan de Trusted Web Activity met een stringresource. De velden zijn hetzelfde als het veld share_target dat beschikbaar is in het webmanifest en kunnen vrijwel ongewijzigd aan een string in strings.xml worden toegevoegd, met twee belangrijke opmerkingen:
- De waarde van het actiekenmerk moet de volledige URL zijn, inclusief de oorsprong.
- Dubbele aanhalingstekens moeten worden geëscaped, zodat elke
"wordt\".
Dit is hoe de share_target sectie van https://scrapbook-pwa.web.app/manifest.json eruit ziet:
{
...
"share_target": {
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": [
"audio/*",
"image/*",
"video/*"
]
}]
}
},
...
}
Het nieuwe string-element ziet er als volgt uit:
<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
Er zijn een paar wijzigingen nodig in het Android-manifest. Eerst moeten we ervoor zorgen dat de DelegationService is gedeclareerd, geëxporteerd en ingeschakeld.
Ontwikkelaars die hun applicatie hebben gebouwd op basis van de basisdemo, hebben de service al inbegrepen. De markup moet zich in de applicatietag bevinden en er als volgt uitzien:
<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>
Tot slot moeten er twee nieuwe items worden toegevoegd aan de LauncherActivity-activiteitstag: - Een meta-data die verwijst naar de JSON die is gedefinieerd in strings.xml. - Een intent-filter dat aangeeft welke MIME-typen de applicatie kan verwerken voor andere apps op het apparaat.
<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>
Zoals u in de bovenstaande markup kunt zien, moet er voor elk mime-type dat is gedeclareerd in de share_target JSON een data element worden toegevoegd.
Conclusie
Dankzij de integratie van Web Share Target kunnen PWA's binnen een vertrouwde webactiviteit beter worden geïntegreerd met andere applicaties die op een Android-apparaat zijn geïnstalleerd.
Zoals hierboven beschreven, wordt de extra markering die nodig is om ondersteuning toe te voegen voor de API in een bestaande Android-app die Trusted Web Activity gebruikt, eenvoudiger gemaakt door android-browser-helper.
Bekijk het artikel Web Share Target voor meer informatie over het gebruik van de API op een PWA en de Web Share API om te leren hoe u content kunt delen vanuit de Progressive Web App.
Probleemoplossing
Mijn toepassing wordt niet als optie weergegeven wanneer ik een bestand probeer te delen vanuit een andere toepassing.
Als de applicatie niet als optie wordt weergegeven, geeft dit aan dat het intent-filter onjuist is. Controleer de markup van intent-filter nogmaals en zorg ervoor dat deze de juiste acties, categorie en mime-types bevat die door de applicatie worden verwerkt.
In mijn applicatie staat de optie vermeld. De PWA is gestart, maar de gegevens worden niet gedeeld.
Er zijn een paar dingen die dit kunnen veroorzaken. Hieronder een checklist met aandachtspunten:
- Zorg ervoor dat de validatie van de Digital Asset Links succesvol is.
- Controleer of de JSON in strings.xml correct is.