Przewodnik integracji

André Cipriani Bandarra

Uwaga: uwaga: prościej krótki przewodnik po zaufanych działaniach internetowych jest już dostępna.

Skonfigurowanie zaufanej aktywności internetowej nie wymaga od programistów tworzenia w Javie, ale w Android Studio Ten przewodnik powstał w Android Studio 3.3. Zapoznaj się z dokumentacją dotyczącą instalacji.

Tworzenie zaufanego projektu dotyczącego aktywności w internecie

Jeśli korzystasz z Zaufanej aktywności internetowej, projekt musi być kierowany na interfejs API na poziomie 16 lub wyższym.

Uwaga: w tej sekcji dowiesz się, jak skonfigurować nowy projekt na urządzeniu z Androidem. Studio. Jeśli znasz już nasze narzędzie, przejdź do Uzyskiwanie biblioteki Zaufanej aktywności internetowej.

Otwórz Android Studio i kliknij Rozpocznij nowy projekt w Android Studio.

Android Studio poprosi o wybranie typu aktywności. Zaufane działania internetowe korzystają z Aktywność pochodząca z biblioteki pomocy, wybierz Dodaj brak aktywności i kliknij Dalej.

W następnym kroku kreator poprosi o konfiguracje projektu. Oto krótki opis poszczególnych pól:

• Nazwa:nazwa, która będzie używana dla aplikacji w Menu z aplikacjami na Androida.
• Nazwa pakietu: unikalny identyfikator aplikacji na Androida na Sklepu Play i na urządzeniach z Androidem. Zajrzyj do dokumentacja , by dowiedzieć się więcej o wymaganiach i sprawdzonych metodach tworzenia pakietów nazw aplikacji na Androida.
• Zapisz lokalizację:miejsce, w którym Android Studio utworzy projekt w pliku. systemu.
• Język: projekt nie wymaga pisania kodu Java ani Kotlin. Jako domyślną opcję wybierz Java.
• Minimalny poziom interfejsu API: Biblioteka pomocy wymaga co najmniej poziomu API 16. Wybierz interfejs API 16 dowolną wersję powyżej.

Nie będziemy używać aplikacji błyskawicznych. lub artefaktów AndroidaX i kliknij Zakończ.

Pobierz bibliotekę pomocy dotyczącej Zaufanej aktywności internetowej

Aby skonfigurować bibliotekę Zaufanej aktywności internetowej w projekcie, musisz edytować aplikację plik kompilacji. Poszukaj sekcji Skrypty Gradle w nawigatorze projektów. Masz 2 pliki o nazwie build.gradle, co może być nieco mylące, a plik a opisy w nawiasach ułatwiają jego rozpoznanie.

Szukany plik to ten z modułem Module imię i nazwisko.

Biblioteka Trusted Web Activity wykorzystuje Funkcje Java 8 a pierwsza zmiana – w języku Java 8. Dodaj sekcję compileOptions do android, jak poniżej:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

W kolejnym kroku dodasz do projektu bibliotekę obsługi Zaufanej aktywności internetowej. Dodaj nowy element zależność w sekcji dependencies:

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

Android Studio jeszcze raz wyświetli prośbę o zsynchronizowanie projektu. Kliknij link Synchronizuj teraz i przeprowadź synchronizację.

Uruchamianie zaufanej aktywności internetowej

Zaufaną aktywność internetową można skonfigurować, edytując Manifest aplikacji na Androida

W nawigatorze projektu rozwiń sekcję aplikacji, a następnie manifests i kliknij dwukrotnie AndroidManifest.xml, aby otworzyć plik.

Poprosiliśmy Android Studio, by nie dodawał żadnej aktywności do naszego projektu, zostanie utworzony, plik manifestu jest pusty i zawiera tylko tag aplikacji.

Dodaj zaufaną aktywność internetową, wstawiając tag activity do tagu application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

Tagi dodane do pliku XML są standardowe Manifest aplikacji na Androida W kontekście Zaufanej sieci można wytłumaczyć 2 istotne informacje: Aktywności:

1. Tag meta-data informuje zaufaną aktywność internetową, który adres URL ma otworzyć. Zmień z atrybutem android:value z adresem URL aplikacji PWA, którą chcesz otworzyć. W W tym przykładzie jest to https://airhorner.com.
2. Drugi tag intent-filter umożliwia zaufanej aktywności internetowej przechwytywanie Androida Intencje otwierające https://airhorner.com. Atrybut android:host wewnątrz tagu data musi wskazywać domenę otwieraną przez zaufaną aktywność internetową.

.

Uwaga: po uruchomieniu projektu na tym etapie pasek adresu URL na kartach niestandardowych będzie są nadal widoczne na górze ekranu. To nie jest błąd.

W następnej sekcji dowiesz się, jak skonfigurować Cyfrowe linki AssetLink aby zweryfikować relację między witryną a aplikacją, a potem usunąć pasek adresu URL.

Usuń pasek adresu URL

Zaufane działania internetowe wymagają powiązania między aplikacją na Androida i strony, która ma zostać utworzona, aby usunąć pasek adresu URL.

To powiązanie jest tworzone przez Linki do zasobów cyfrowych a powiązanie musi zostać ustanowione na oba sposoby: z aplikacji do strony internetowej oraz ze strony internetowej do aplikacji.

Można skonfigurować weryfikację witryny w aplikacji i skonfigurować Chrome w celu pominięcia z witryny do aplikacji.

Tworzenie powiązania między aplikacją a witryną

Otwórz plik zasobów ciągu app > res > values > strings.xml i dodaj do Oto oświadczenie dotyczące Digital AssetLinks:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Zmień zawartość atrybutu site, aby pasowała do schematu i domeny otwieranych przez zaufaną aktywność internetową.

Z powrotem w pliku manifestu aplikacji na Androida (AndroidManifest.xml) dodaj link do instrukcja, dodając nowy tag meta-data, ale tym razem jako element podrzędny tagu Tag application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

Nawiązaliśmy już relację między aplikacją dla systemu Android witryny. Warto debugować tę część relacji bez tworzenia z witryny do weryfikacji.

Aby przetestować tę funkcję na urządzeniu, którego używasz do programowania:

Włącz tryb debugowania

1. Otwórz Chrome na urządzeniu, którego używasz do programowania, przejdź do chrome://flags i wyszukaj dla elementu o nazwie Włącz wiersz poleceń na urządzeniach bez dostępu do roota i zmień go wybierz opcję ENABLED (Włącz) i ponownie uruchom przeglądarkę.
2. Następnie w aplikacji Terminal w systemie operacyjnym użyj Android Debug Bridge (zainstalowane w Androidzie Studio) i uruchom to polecenie:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Zamknij Chrome i uruchom ponownie aplikację z Android Studio. Aplikacja powinna być teraz wyświetlana na pełnym ekranie.

Uwaga: może być konieczne wymuszenie zamknięcia Chrome. W ten sposób Chrome uruchomi się ponownie, gdy prawidłowo wiersza poleceń. Otwórz Ustawienia Androida > Aplikacje powiadomienia > Chrome, i kliknij Wymuś zatrzymanie.

Tworzenie powiązania między witryną a aplikacją

Deweloper musi zebrać 2 informacje z aplikacji, aby utworzyć powiązanie:

• Nazwa pakietu: pierwsza informacja to nazwa pakietu aplikacji. Ten to ta sama nazwa pakietu wygenerowana podczas tworzenia aplikacji. Możesz też go znaleźć w module build.gradle, poniżej Skrypty Gradle > build.gradle (moduł: aplikacja) i jest wartością klasy applicationId.
• Odcisk cyfrowy SHA-256: aplikacje na Androida muszą być zalogowane, aby mogły przesłane do Sklepu Play. Ten sam podpis jest używany do ustalenia połączenia między witryną a aplikacją za pomocą odcisku cyfrowego SHA-256 z kluczem przesyłania.

Dokumentacja Androida szczegółowo wyjaśnia, jak wygenerować klucz w Android Studio. Zanotuj ścieżkę, alias i hasła do magazynu kluczy. będzie Ci on potrzebny w następnym kroku.

Wyodrębnij odcisk cyfrowy SHA-256 za pomocą keytool, za pomocą tego polecenia:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

Wartość odcisku cyfrowego SHA-256 jest wydrukowana pod certyfikatem. odcisków palców. Oto przykładowe dane wyjściowe:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

Mając te informacje, skorzystaj z generatora linków do zasobów, wypełnij te pola i kliknij Generate Statement. Skopiuj wygenerowane informacje i udostępniać je w swojej domenie z adresu URL /.well-known/assetlinks.json.

Uwaga: plik AssetLinks musi być mniejszy niż /.well-known/assetlinks.json w katalogu głównego domeny, ponieważ tylko Chrome będzie go szukać.

Tworzenie ikony

Gdy Android Studio utworzy nowy projekt, będzie miał domyślną ikonę. Jako programista możesz utworzyć własną ikonę i wyróżnić aplikacji innych firm w programie Android Launcher.

Android Studio zawiera narzędzie Image Asset Studio, który zapewnia narzędzia do tworzenia poprawnych ikon dla każdego i określić potrzeby aplikacji.

W Android Studio przejdź do aplikacji File > New > Image Asset, wybierz Launcher Icons (Adaptative and Legacy) i postępuj zgodnie z instrukcjami w kreatorze. aby utworzyć niestandardową ikonę dla aplikacji.

Generowanie podpisanego pakietu APK

Z plikiem assetlinks w domenie i tagiem asset_statements skonfigurowany w aplikacji na Androida, następnym krokiem jest wygenerowanie podpisanej aplikacji. Działania w tym zakresie są bardzo zróżnicowane udokumentowane.

Wyjściowy plik APK można zainstalować na urządzeniu testowym przy użyciu narzędzia adb:

adb install app-release.apk

Jeśli etap weryfikacji się nie powiedzie, możesz sprawdzić, czy nie wystąpiły błędy za pomocą narzędzia Android Debug Bridge – prześlij je w terminalu systemu operacyjnego oraz Podłączono urządzenie testowe.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Po wygenerowaniu przesłanego pliku APK możesz przesłać aplikację do Sklepu Play.

Dodawanie ekranu powitalnego

Od wersji Chrome 75 Zaufana aktywność internetowa obsługuje ekrany powitalne. Ekran powitalny można skonfigurować, dodając kilka nowych plików graficznych i konfiguracji do w projektach AI.

Zaktualizuj do Chrome 75 lub nowszej i użyj najnowszą wersję biblioteki obsługi Zaufanej aktywności internetowej.

Generuję obrazy na ekran powitalny

Urządzenia z Androidem mogą mieć ekrany o różnych rozmiarach. i gęstości pikseli. Aby ekran powitalny wyglądał dobrze na wszystkich urządzeniach, musisz wygenerować dla każdej gęstości pikseli.

Pełne wyjaśnienie pikseli niezależnych od wyświetlacza (dp lub dip). wykracza poza zakres tego artykułu, ale na przykład utworzenie obrazu, który ma format 320 x 320 dp, który reprezentuje kwadrat o wymiarach 2 x 2 cali i na ekranie urządzenia o dowolnej gęstości i odpowiada 320 x 320 pikseli przy gęstości mdpi.

Z tego miejsca otrzymamy rozmiary potrzebne dla innych gęstości pikseli. Poniżej znajduje się lista gęstości pikseli, mnożnik stosowany do rozmiaru podstawowego (320 x 320 dp), w pikselach, a także lokalizację, w której obraz powinien zostać dodany projekt Android Studio.

Gęstość	Mnożnik	Rozmiar	Lokalizacja projektu
mdpi (wartość odniesienia)	1x	320 x 320 piks.	/res/drawable-mdpi/
ldpi	0,75x	240 x 240 piks.	/res/drawable-ldpi/
hdpi	1,5x	480 x 480 piks.	/res/drawable-hdpi/
xhdpi	2x	640 x 640 piks.	/res/drawable-xhdpi/
xxhdpi	3×	960 x 960 piks.	/res/drawable-xxhdpi/
xxxhdpi	4×	1280 x 1280 piks.	/res/drawable-xxxhdpi/

Uwaga: zamiast tworzyć wszystkie rozmiary obrazów, możesz użyć jednego elementu rysowalnego wektorowego. Vector Asset Studio, udostępnia narzędzia, które pomagają programistom przekształcać pliki SVG w elementy rysowalne wektorowe w Androidzie.

Aktualizowanie aplikacji

Po wygenerowaniu obrazów ekranu powitalnego dodaj niezbędne konfiguracji w projekcie.

Najpierw dodaj content-provider do pliku manifestu Androida (AndroidManifest.xml).

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

Uwaga: pamiętaj o zmianie atrybutu android:authorities podczas tworzenia dostawcy, ponieważ 2 aplikacje nie mogą mieć takich samych uprawnień na urządzeniu.

Następnie dodaj zasób res/xml/filepaths.xml i określ ścieżkę do ekranu powitalnego:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

Na koniec dodaj meta-tags do pliku manifestu Androida, aby dostosować LauncherActivity:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

Upewnij się, że wartość atrybutu android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY pasuje do wartości zdefiniowanej w atrybucie android:authorities w tagu Tag provider.

Ustawienie przejrzystości działania LauncherActivity

Upewnij się też, że LauncherActivity jest przezroczysty, aby uniknąć białego ekranu. pokazując się przed powitaniem, ustawiając półprzezroczysty motyw dla LauncherActivity:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

Z niecierpliwością czekamy na to, co deweloperzy tworzą dzięki Trusted Web Czynności. Aby podzielić się z nami opinią, skontaktuj się z nami: @ChromiumDev