Met Web Share Target kunnen PWA's gedeelde inhoud ontvangen van andere applicaties die op het apparaat zijn geïnstalleerd. Deze functie kan bijvoorbeeld worden gebruikt door toepassingen zoals afbeeldingseditors om een afbeelding van een camera-app te ontvangen, of een sociaal netwerk om een afbeelding of video te ontvangen om te delen.
Vanaf Chrome 86 is Web Share Target nu ook beschikbaar voor applicaties die Trusted Web Activity gebruiken. Hoewel de PWA standaard zou moeten werken, zijn er een paar wijzigingen nodig aan de Android-applicatie.
In dit artikel wordt ervan uitgegaan dat de ontwikkelaar bekend is met vertrouwde webactiviteiten. Lezers die nieuw zijn met de technologie kunnen aan de slag gaan met de Integratiegids .
In dezelfde zin valt een volledige uitleg van de Web Share Target-implementatie in een PWA buiten het bereik en kunnen ontwikkelaars meer informatie vinden in dit artikel .
De demo-applicatie op https://scrapbook-pwa.web.app/ zal worden gebruikt als de PWA voor dit artikel, en de broncode is beschikbaar op GitHub , en de Android-applicatie is gebaseerd op de basisdemo van Trusted Web Activity .
Voeg Web Share Target toe aan de Android-app
Om een bestaande, op Trusted Web Activity gebaseerde applicatie te wijzigen om Web Share Target te implementeren, zijn aanpassingen aan drie verschillende bestanden vereist:
bouw.gradle
De Android-browser-helperbibliotheek is bijgewerkt met ondersteuning voor Web Share Target. Update als eerste stap de applicatie om een versie te gebruiken die hoger is dan of gelijk is aan 2.0.1.
dependencies {
...
implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}
res/strings.xml
De toepassing moet de vertrouwde webactiviteit de details doorgeven van het delen dat zij ondersteunt, zoals welke URL's moeten worden geopend, de te gebruiken methode en de ondersteunde mime-typen.
Dit gebeurt via een JSON, die met een stringbron beschikbaar wordt gesteld aan de Trusted Web Activity. De velden zijn hetzelfde als het veld share_target dat beschikbaar is in het webmanifest en kunnen vrijwel ongewijzigd worden toegevoegd aan een string binnen strings.xml , met twee belangrijke opmerkingen:
- De waarde van het action-attribuut moet de volledige URL zijn, inclusief de oorsprong.
- Dubbele aanhalingstekens moeten worden geëscaped, zodat elke
"\"wordt.
Zo ziet de share_target sectie van https://scrapbook-pwa.web.app/manifest.json eruit:
{
...
"share_target": {
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": [
"audio/*",
"image/*",
"video/*"
]
}]
}
},
...
}
En het nieuwe stringelement 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 aantal wijzigingen vereist in het Android-manifest. Eerst moeten we ervoor zorgen dat de DelegationService wordt gedeclareerd, geëxporteerd en ingeschakeld.
Ontwikkelaars die hun applicatie hebben gebouwd op basis van de basisdemo, hebben de service al inbegrepen en de opmaak moet in de applicatietag staan 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>
Ten slotte 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-types 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 te zien is in de bovenstaande opmaak, moet een data element worden toegevoegd voor elk mime-type dat is gedeclareerd in de share_target JSON.
Conclusie
Dankzij de Web Share Target-integratie kunnen PWA's binnen een vertrouwde webactiviteit dieper worden geïntegreerd met andere applicaties die op een Android-apparaat zijn geïnstalleerd.
Zoals beschreven in de bovenstaande stappen, wordt de extra opmaak die nodig is om ondersteuning voor de API toe te voegen in een bestaande Android-app die gebruikmaakt van Trusted Web Activity eenvoudiger gemaakt door de Android-browser-helper.
Bekijk het Web Share Target-artikel voor meer informatie over het gebruik van de API op een PWA en de Web Share API om te leren hoe u inhoud deelt via de Progressive Web App.
Problemen oplossen
Mijn applicatie wordt niet als optie weergegeven wanneer ik een bestand vanuit een andere applicatie probeer te delen.
Wanneer de applicatie niet als optie wordt weergegeven, geeft dit aan dat het intent-filter onjuist is. Controleer nogmaals de opmaak van het intent-filter en zorg ervoor dat deze de juiste acties, categorie en mime-types bevat die door de toepassing worden verwerkt.
Mijn applicatie laat als optie zien dat de PWA is gestart, maar de gegevens worden niet gedeeld.
Er zijn een paar dingen die dit kunnen veroorzaken. Dit is een checklist met zaken waar u op moet letten:
- Zorg ervoor dat de validatie van Digital Asset Links succesvol is.
- Controleer de JSON in strings.xml op juistheid.