Vertrouwde webactiviteiten kunnen een beetje lastig zijn om in te stellen, vooral als u alleen uw website wilt weergeven. Deze handleiding begeleidt u bij het maken van een basisproject dat gebruikmaakt van vertrouwde webactiviteiten en behandelt alle valkuilen.
Aan het einde van deze handleiding zult u:
- Ik heb Bubblewrap gebruikt om een applicatie te bouwen die een vertrouwde webactiviteit gebruikt en de verificatie doorstaat.
- Begrijp wanneer uw ondertekeningssleutels worden gebruikt.
- In staat zijn om de handtekening te bepalen waarmee uw Android-applicatie wordt gebouwd.
- Weet hoe u een eenvoudig Digital Asset Links- bestand maakt.
Om deze handleiding te volgen heeft u het volgende nodig:
- Node.js 10 of hoger geïnstalleerd op de ontwikkelcomputer.
- Een Android-telefoon of -emulator aangesloten en ingesteld voor ontwikkeling ( schakel USB-foutopsporing in als u een fysieke telefoon gebruikt).
- Een browser die Trusted Web Activity ondersteunt op uw ontwikkeltelefoon. Chrome 72 of hoger zal werken. Ondersteuning in andere browsers is onderweg.
- Een website die u wilt bekijken in de Vertrouwde webactiviteit.
Met een vertrouwde webactiviteit kan uw Android-app een browsertabblad op volledig scherm starten zonder enige browserinterface. Deze mogelijkheid is beperkt tot websites waarvan u de eigenaar bent, en u bewijst dit door Digital Asset Links in te stellen. We zullen later meer over hen praten.
Wanneer u een vertrouwde webactiviteit start, controleert de browser of de Digital Asset Links uitchecken, dit wordt verificatie genoemd. Als de verificatie mislukt, zal de browser terugvallen op het weergeven van uw website als een aangepast tabblad .
Installeer en configureer Bubblewrap
Bubblewrap is een set bibliotheken en een opdrachtregeltool (CLI) voor Node.js waarmee ontwikkelaars Progressive Web Apps kunnen genereren, bouwen en uitvoeren in Android-applicaties, met behulp van Trusted Web Activity.
De CLI kan worden geïnstalleerd met de volgende opdracht:
npm i -g @bubblewrap/cli
De omgeving instellen
Wanneer Bubblewrap voor de eerste keer wordt uitgevoerd, wordt aangeboden om automatisch de vereiste externe afhankelijkheden te downloaden en te installeren. We raden u aan dit door de tool te laten doen, omdat dit garandeert dat de afhankelijkheden correct zijn geconfigureerd. Raadpleeg de Bubblewrap-documentatie om een bestaande installatie van Java Development Kit (JDK) of Android-opdrachtregelprogramma's te gebruiken.
Initialiseer en bouw een project
Het initialiseren van een Android-project dat een PWA omhult, wordt gedaan door de opdracht init uit te voeren:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap leest het Web Manifest , vraagt ontwikkelaars om 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, genereert u een APK door het volgende uit te voeren:
bubblewrap build
Loop
Tijdens de bouwstap wordt een bestand met de naam app-release-signed.apk uitgevoerd. Dit bestand kan ter test op een ontwikkelapparaat worden geïnstalleerd of voor release naar de Play Store worden geüpload.
Bubblewrap biedt een opdracht om de applicatie op een lokaal apparaat te installeren en te testen. Terwijl het ontwikkelapparaat op de computer is aangesloten, voert u het volgende 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 apparaatstartprogramma. Wanneer u de applicatie opent, zult u merken dat uw website wordt gelanceerd als een aangepast tabblad en niet als een vertrouwde webactiviteit. Dit komt omdat we onze validatie van Digital Asset Links nog niet hebben ingesteld, maar eerst...
Grafische gebruikersinterface (GUI)-alternatieven voor noppenfolie
PWA Builder biedt een GUI-interface die de Bubblewrap-bibliotheek gebruikt om het genereren van Trusted Web Activity-projecten mogelijk te maken. In deze blogpost vindt u meer instructies over hoe u PWA Builder kunt gebruiken om een Android-app te maken waarmee uw PWA wordt geopend.
Een opmerking over het ondertekenen van sleutels
Digital Asset Links houden rekening met de sleutel waarmee een APK is ondertekend. Een veel voorkomende oorzaak van het mislukken van de verificatie is het gebruik van de verkeerde handtekening. (Houd er rekening mee dat een mislukte verificatie betekent dat u uw website start als een aangepast tabblad met een browserinterface bovenaan de pagina.) Wanneer Bubblewrap de applicatie bouwt, wordt er tijdens de init stap een APK gemaakt met een sleutelconfiguratie. Wanneer u uw app echter publiceert in Google Play, kan er een andere sleutel voor u worden gemaakt, afhankelijk van hoe u met ondertekeningssleutels omgaat. Meer informatie over het ondertekenen van sleutels en hoe deze verband houden met Bubblewrap en Google Play .
Uw asset-linkbestand instellen
Digital Asset Links bestaan in essentie uit een bestand op uw website dat naar uw app verwijst en enkele metagegevens in uw app die naar uw website verwijzen.
Nadat u uw assetlinks.json bestand hebt gemaakt, uploadt u dit naar uw website op .well-known/assetlinks.json ten opzichte van de root), zodat uw app goed door de browser kan worden geverifieerd. Bekijk een diepgaande duik op Digital Asset Links voor meer informatie over hoe dit verband houdt met uw ondertekeningssleutel.
Controleer uw browser
Een vertrouwde webactiviteit probeert zich te houden aan de standaardbrowserkeuze van de gebruiker. Als de standaardbrowser van de gebruiker vertrouwde webactiviteiten ondersteunt, wordt deze gestart. Als dat niet lukt, wordt er gekozen voor een geïnstalleerde browser die vertrouwde webactiviteiten ondersteunt. Ten slotte is het standaardgedrag om terug te vallen op de modus Aangepaste tabbladen.
Dit betekent dat als u fouten oplost in iets dat te maken heeft met vertrouwde webactiviteiten, u ervoor moet zorgen dat u de browser gebruikt die u denkt te gebruiken. U kunt het volgende commando 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
Als u deze handleiding heeft gevolgd, beschikt u hopelijk over een werkende Trusted Web Activity en beschikt u over voldoende kennis om te kunnen opsporen wat er aan de hand is als de verificatie mislukt. Als dat niet het geval is, bekijk dan meer Android-concepten voor webontwikkelaars of dien een GitHub-probleem in tegen deze documenten .
Voor uw volgende stappen raad ik u aan om te beginnen met het maken van een pictogram voor uw app . Als dat klaar is, kunt u overwegen uw app in de Play Store te implementeren.