Het instellen van Trusted Web Activities kan een uitdaging zijn, vooral als u alleen uw website wilt weergeven. Deze handleiding leert u hoe u een klein project kunt maken dat gebruikmaakt van Trusted Web Activities.
Aan het einde van deze handleiding zul je:
- Ik heb Bubblewrap gebruikt om een applicatie te bouwen die gebruikmaakt van een Trusted Web Activity en de verificatie doorstaat.
- Begrijp wanneer uw ondertekeningssleutels worden gebruikt.
- Je moet de handtekening kunnen bepalen waarmee je Android-applicatie wordt gebouwd.
- Weet hoe je een basisbestand voor digitale links aanmaakt.
Om deze handleiding te volgen, heb je het volgende nodig:
- Node.js 10 of hoger.
- Een Android-telefoon of -emulator, aangesloten en ingesteld voor ontwikkeling. Schakel USB-debugging in als je een fysieke telefoon gebruikt.
- Een mobiele browser die Trusted Web Activity ondersteunt.
- Een website die u wilt weergeven in de lijst met vertrouwde webactiviteiten.
Je kunt een vertrouwde webactiviteit voor je Android-app gebruiken om een browsertabblad op volledig scherm te openen, zonder browserinterface. Deze mogelijkheid is beperkt tot websites die je bezit. Je bewijst het eigendom door digitale assetkoppelingen in te stellen.
Wanneer u een vertrouwde webactiviteit start, controleert de browser de digitale links. Als de verificatie mislukt, schakelt de browser over naar het weergeven van uw website als een aangepast tabblad .
Bubblewrap installeren en configureren
Bubblewrap is een verzameling bibliotheken en een command line tool (CLI) voor Node.js waarmee ontwikkelaars Progressive Web Apps kunnen genereren, bouwen en uitvoeren binnen Android-applicaties, met behulp van Trusted Web Activity.
Installeer de CLI door dit commando uit te voeren:
npm i -g @bubblewrap/cli
De omgeving inrichten
Wanneer je Bubblewrap voor het eerst uitvoert, biedt het aan om automatisch de benodigde externe afhankelijkheden te downloaden en te installeren. We raden aan om automatische downloads toe te staan, omdat dit ervoor zorgt dat de afhankelijkheden correct geconfigureerd zijn. Raadpleeg de Bubblewrap-documentatie voor het gebruik van een bestaande Java Development Kit (JDK) of Android-opdrachtregeltools-installatie.
Initialiseer en bouw het project
Initialiseer een Android-project dat een PWA omvat:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap leest het webmanifest , vraagt ontwikkelaars om de waarden te bevestigen die in het Android-project moeten worden gebruikt, en genereert het project met behulp van die waarden.
Nadat het project is gegenereerd, genereer je een APK door het volgende commando uit te voeren:
bubblewrap build
Loop
De buildstap genereert een bestand met de naam app-release-signed.apk . Dit bestand kan worden geïnstalleerd op een ontwikkelapparaat voor testdoeleinden of worden geüpload naar de Play Store voor publicatie.
Bubblewrap biedt een commando om de applicatie op een lokaal apparaat te installeren en te testen. Sluit het ontwikkelapparaat aan op de computer en voer het volgende commando uit:
bubblewrap install
Als alternatief kan de adb- tool worden gebruikt.
adb install app-release-signed.apk
De applicatie zou nu beschikbaar moeten zijn in het opstartmenu van het apparaat.
Wanneer u de applicatie opent, zult u merken dat uw website wordt weergegeven als een aangepast tabblad en niet als een vertrouwde webactiviteit. Dit komt doordat we de validatie van onze digitale links nog niet hebben ingesteld.
Alternatieven voor de grafische gebruikersinterface (GUI) van Bubblewrap
PWA Builder biedt een grafische gebruikersinterface die de Bubblewrap-bibliotheek gebruikt voor het genereren van Trusted Web Activity-projecten. U vindt hier instructies voor het gebruik van PWA Builder om een Android-app te maken die uw PWA opent .
Ondertekeningssleutels
Digital Asset Links houdt rekening met de sleutel waarmee een APK is ondertekend. Een veelvoorkomende oorzaak van mislukte verificatie is het gebruik van een onjuiste handtekening. (Onthoud dat een mislukte verificatie betekent dat uw website wordt geopend als een aangepast tabblad met de browserinterface bovenaan de pagina.) Wanneer Bubblewrap de applicatie bouwt, wordt er een APK aangemaakt met een sleutel die tijdens de init is ingesteld. Wanneer u uw app echter publiceert in Google Play, kan er een andere sleutel voor u worden aangemaakt, afhankelijk van hoe u ervoor kiest om met ondertekeningssleutels om te gaan. Lees meer over ondertekeningssleutels en hoe deze zich verhouden tot Bubblewrap en Google Play .
Uw assetlinkbestand instellen
Digitale assetlinks bestaan in principe uit een bestand op uw website dat verwijst naar uw app en metadata in uw app die verwijzen naar uw website.
Nadat je je assetlinks.json bestand hebt aangemaakt, upload je het naar je website op .well-known/assetlinks.json (relatief ten opzichte van de rootmap) zodat je app correct door de browser kan worden geverifieerd. Bekijk de uitgebreide uitleg over digitale assetlinks voor meer informatie over de relatie met je ondertekeningssleutel.
Uw browser controleren
Een vertrouwde webactiviteit probeert zich aan te passen aan de standaardbrowser van de gebruiker. Als de standaardbrowser van de gebruiker vertrouwde webactiviteiten ondersteunt, wordt deze gestart. Zo niet, dan wordt een van de geïnstalleerde browsers die vertrouwde webactiviteiten ondersteunt, gekozen. Tot slot is het standaardgedrag om terug te vallen op de modus 'Aangepaste tabbladen'.
Dit betekent dat als u iets aan het debuggen bent dat te maken heeft met vertrouwde webactiviteiten, u ervoor moet zorgen dat u de browser gebruikt die u denkt te gebruiken. U kunt de volgende opdracht gebruiken om te controleren welke browser wordt gebruikt:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Volgende stappen
Hopelijk heb je, als je deze handleiding hebt gevolgd, een werkende Trusted Web Activity en voldoende kennis om problemen op te sporen als de verificatie mislukt. Zo niet, bekijk dan eens de andere Android-concepten voor webontwikkelaars .
Maak vervolgens een pictogram voor je app . Zodra dat klaar is, kun je overwegen je app in de Play Store te publiceren.