Entegrasyon Kılavuzu

André Cipriani Bandarra

Not: Not: Daha basit bir Güvenilir Web Etkinlikleri için hızlı başlangıç kılavuzu kullanıma hazır.

Güvenilir Web Etkinliği oluşturmak için geliştiricilerin yazması gerekmez Android Studio'nun otomatik olarak gereklidir. Bu kılavuz, Android Studio 3.3 kullanılarak oluşturulmuştur. Nasıl yükleyeceğinizle ilgili dokümanlara göz atın.

Güvenilir Web Etkinliği Projesi Oluşturma

Güvenilir Web Etkinlikleri kullanılırken proje API 16 veya üstünü hedeflemelidir.

Not: Bu bölüm, Android'de yeni bir proje oluşturma konusunda size yol gösterecektir. Stüdyo'yu seçin. Bu araca zaten aşinaysanız Güvenilir Web Etkinliği Kitaplığı'nı alma bölümünü inceleyin.

Android Studio'yu açın ve Yeni bir Android Studio projesi başlat'ı tıklayın.

Android Studio, bir Etkinlik türü seçmenizi ister. Güvenilir Web Etkinlikleri, bir Destek kitaplığı tarafından sağlanan etkinlik, Etkinlik Ekle'yi seçin ve Sonraki'ye dokunun.

Sonraki adım, sihirbaz proje için yapılandırmalar ister. Buradan kısa bir açıklama ekleyin:

• Ad: Android Başlatıcı.
• Paket Adı: Play Store'da ve Android cihazlarda kullanılabilir. Kontrol edin belgeler paket oluşturma gereksinimleri ve en iyi uygulamalar hakkında daha fazla bilgi için adları için kullanabilirsiniz.
• Konumu kaydet: Android Studio'nun dosyada projeyi oluşturacağı yer bahsedeceğim.
• Dil: Proje herhangi bir Java veya Kotlin kodu yazılmasını gerektirmiyor. Varsayılan olarak Java'yı seçin.
• Minimum API Düzeyi: Destek Kitaplığı en az API Düzeyi 16'yı gerektirir. Yukarıdan herhangi bir sürümü API 16'yı seçin.

Hazır Uygulamalar kullanamayacağımız için geri kalan onay kutularının işaretini kaldırın. veya AndroidX yapılarını bulun ve Son'u tıklayın.

Güvenilir Web Etkinliği Destek Kitaplığı'nı edinme

Projede Güvenilir Web Etkinliği kitaplığını kurmak için Uygulama'yı düzenlemeniz gerekir derleme dosyası olarak kaydeder. Project Navigator'da Gradle Komut Dosyaları bölümünü bulun. build.gradle adında, biraz kafa karıştırıcı olabilecek iki dosya var ve parantez içindeki açıklamalar doğru olanı tanımlamaya yardımcı olur.

Aradığımız dosya, modülün yanındaki Modül dokunun.

Güvenilir Web Etkinlikleri kitaplığı, Java 8 özellikleri İlk değişiklik Java 8'i etkinleştirir. Şuna bir compileOptions bölümü ekle: aşağıdaki gibi android bölümünün alt kısmındaki:

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

Sonraki adım, projeye Güvenilir Web Etkinliği Destek Kitaplığı'nı ekleyecektir. Yeni ekle dependencies bölümüne bağımlılık:

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

Android Studio, projenin bir kez daha senkronize edilmesini isteyen bir istem gösterir. Şimdi Senkronize Et bağlantısını tıklayıp senkronize edin.

Güvenilir Web Etkinliği'ni başlatma

Güvenilir Web Etkinliği, Android uygulama manifesti.

Project Navigator'da uygulama bölümünü genişletin ve ardından manifest'lere gidin ve AndroidManifest.xml simgesini çift tıklayarak dosyayı açın.

Android Studio'dan şu anda projemize herhangi bir Etkinlik eklememesini manifest dosyası boş olur ve yalnızca uygulama etiketini içerir.

application etiketine bir activity etiketi ekleyerek Güvenilir Web Etkinliği'ni ekleyin:

<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>

XML'e eklenen etiketler standarttır Android uygulama manifesti. Güvenilir Web bağlamında iki alakalı bilgi vardır Etkinlikler:

1. meta-data etiketi, Güvenilir Web Etkinliği'ne hangi URL'yi açması gerektiğini bildirir. Değiştir android:value özelliğini, açmak istediğiniz PWA'nın URL'siyle değiştirin. İçinde Bu örnekte https://airhorner.com.
2. İkinci intent-filter etiketi, Güvenilir Web Etkinliği'nin Android'e müdahale etmesine olanak tanır https://airhorner.com öğesini açan amaçlar. android:host özelliği içindeki data etiketinin, Güvenilir Web Etkinliği tarafından açılan alana işaret etmesi gerekir.

Not: Projeyi bu aşamada çalıştırırken Özel Sekmelerdeki URL Çubuğu, ekranın üst kısmında görünmeye devam eder. Bu bir hata değildir.

Sonraki bölümde, Google Ads Temel Düzey Dijital Öğe Bağlantıları kullanarak web sitesi ile uygulama arasındaki ilişkiyi doğrulayın ve URL çubuğunu kaldırın.

URL çubuğunu kaldırma

Güvenilir Web Etkinlikleri, Android uygulaması arasında bir ilişkilendirme gerektirir ve oluşturulacak web sitesi ile URL çubuğunun kaldırılması.

Bu ilişkilendirme, üzerinden oluşturuldu Dijital varlık bağlantıları ve ilişkilendirmenin her iki şekilde de kurulması gerekir. uygulamadan web sitesine ve web sitesinden uygulamaya

Uygulamayı web sitesi doğrulamasına göre ayarlamak ve Chrome'u atlayacak şekilde ayarlamak mümkündür web sitesinden uygulamaya doğrulama için.

Uygulama ile web sitesi arasında bir ilişkilendirme oluşturmak

app > res > values > strings.xml dizesi kaynakları dosyasını açın ve Digital AssetLinks beyanını aşağıda bulabilirsiniz:

<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>

site özelliğinin içeriğini şema ve alanla eşleşecek şekilde değiştirin Güvenilir Web Etkinliği tarafından açıldı.

Android Uygulama Manifest dosyasında (AndroidManifest.xml) ifadesi, yeni bir meta-data etiketi ekleyerek, ancak bu kez application etiketi:

<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>

Artık Android uygulaması ile web sitesi. Anahtar kelime oluşturmadan ilişkinin bu kısmında hata ayıklamak, web sitesinden uygulama doğrulamaya

Bunun bir geliştirme cihazında nasıl test edileceği aşağıda açıklanmıştır:

Hata ayıklama modunu etkinleştir

1. Geliştirme cihazında Chrome'u açın, chrome://flags adresine gidin, arama yapın root olmayan cihazlarda komut satırını etkinleştir adlı öğede ise ETKİN olarak ayarlayın ve ardından tarayıcıyı yeniden başlatın.
2. Daha sonra, işletim sisteminizin Terminal uygulamasında Android Hata Ayıklama Köprüsü (Android Studio yüklü) açın ve aşağıdaki komutu çalıştırın:

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

Chrome'u kapatın ve uygulamanızı Android Studio'dan yeniden başlatın. İlgili içeriği oluşturmak için kullanılan uygulama artık tam ekran olarak görüntüleniyor.

Not: Doğru tarayıcıyla yeniden başlatılması için Chrome'un kapanmaya zorlanması gerekebilir komut satırından erişebilirsiniz. Android Ayarları > Uygulamalar ve bildirimler > Chrome, ve Zorla durdur'u tıklayın.

Web sitesinden uygulamaya bir ilişki kurmak

Geliştiricinin uygulamasında oluşturmanız gerekir:

• Paket Adı: İlk bilgi, uygulamanın paket adıdır. Bu uygulama oluşturulurken oluşturulan paket adıyla aynıdır. Ayrıca, build.gradle adresindeki Modül içinde, Gradle Komut Dosyaları > Build.gradle (Modül: uygulama) ve applicationId özelliği için de bir değer olabilir.
• SHA-256 Parmak İzi: Android uygulamalarının Google Play Store'a yükleyebilirsiniz. Sözleşme imzalatmak için de aynı imza kullanılır. uygulamanın SHA-256 parmak izi aracılığıyla web sitesi ile uygulama arasındaki bağlantıyı yükleme anahtarıdır.

Android dokümanlarında, Android Studio kullanılarak anahtarın nasıl oluşturulacağı ayrıntılı olarak açıklanmaktadır. Anahtar deposuna ait yol, takma ad ve şifreleri not ettiğinizden emin olun, sonraki adımda ihtiyacınız olacak.

SHA-256 parmak izini şunu kullanarak ayıklayın: keytool şu komutla kullanın:

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

SHA-256 parmak izi değeri, Sertifika parmak izi bölümüne gidin. Aşağıda bir çıkış örneği verilmiştir:

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

Her iki bilgiyi de elinizde tutarak öğe bağlantısı oluşturma aracına gidin. alanları doldurun ve İfade Oluştur'u tıklayın. Oluşturulan ifadeyi kopyala ve /.well-known/assetlinks.json URL'sinden alanınızdan yayınlayabilirsiniz.

Not: AssetLinks dosyası /.well-known/assetlinks.json değerinin altında, kök olacaktır. Çünkü Chrome yalnızca bunu arayacaktır.

Simge Oluşturma

Android Studio yeni bir proje oluşturduğunda, proje için varsayılan bir Simge bulunur. Geliştirici olarak kendi simgenizi oluşturmak ve web sitenizin diğer Android Launcher uygulamasından uygulama.

Android Studio, Image Asset Studio'yu içerir. Bu, her biri için doğru simgeleri oluşturmak üzere gereken araçları ve uygulamanızın ihtiyaçlarını şekillendirin.

Android Studio'da File > New > Image Asset uygulamasına gidin, Launcher Icons (Adaptative and Legacy) ve Sihirbazdaki adımları uygulayın. uygulama için özel bir simge oluşturmak üzere.

İmzalanmış bir APK oluşturma

assetlinks dosyası, alanınızda ve asset_statements etiketinde bulunuyorsa yapılandırdıysanız bir sonraki adım imzalı uygulama oluşturmaktır. Bunun için de atılması gereken adımlar, belgelenmiştir.

Çıkış APK'sı, adb kullanılarak bir test cihazına yüklenebilir:

adb install app-release.apk

Doğrulama adımı başarısız olursa hata kontrolü yapılabilir. Android Debug Bridge'i kullanarak, işletim sisteminizin terminalinden ve test cihazı bağlandı.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Yükleme APK'sı oluşturulduktan sonra, uygulamayı Play Store'a yükleyebilirsiniz.

Başlangıç Ekranı Ekleme

Güvenilir Web Etkinlikleri, Chrome 75'ten itibaren Başlangıç Ekranlarını destekler. Başlangıç Ekranı, şuraya birkaç yeni resim dosyası ve yapılandırma ekleyerek ayarlanabilir: belirler.

Chrome 75 veya sonraki bir sürüme güncellediğinizden emin olun ve Güvenilir Web Etkinliği Destek Kitaplığı'nın en yeni sürümünü kullanın.

Başlangıç Ekranı için görüntüler oluşturma

Android cihazların farklı ekran boyutları olabilir ve piksel yoğunlukları. Başlangıç Ekranının tüm cihazlarda iyi görünmesini sağlamak için resmini de görüntüleyebilirsiniz.

Ekrandan bağımsız piksellerin (dp veya dip) tam açıklaması bu makalenin kapsamı dışındadır, ancak örnek olarak 320x320 dp'dir ve herhangi bir yoğunlukta cihaz ekranında 2x2 inç kareyi temsil eder. ve mdpi yoğunlukta 320x320 piksele eşittir.

Oradan, diğer piksel yoğunlukları için gereken boyutları türetebiliriz. Aşağıda bir liste verilmiştir piksel yoğunlukları, taban boyutuna (320x320 dp) uygulanan çarpan, piksel olarak nihai boyutunu ve resmin Android Studio projesi.

Yoğunluk	Çarpan	Boyut	Proje Konumu
mdpi (referans değer)	1,0x	320x320 piksel	/res/drawable-mdpi/
ldpi	0,75x	240x240 piksel	/res/drawable-ldpi/
hdpi	1,5x	480x480 piksel	/res/drawable-hdpi/
xhdpi	2,0x	640x640 piksel	/res/drawable-xhdpi/
xxhdpi	3,0x	960x960 piksel	/res/drawable-xxhdpi/
xxxhdpi	4,0x	1.280x1.280 piksel	/res/drawable-xxxhdpi/

Not: Tüm resim boyutlarını oluşturmanın bir alternatifi, tek bir Vektör Çizimi kullanmaktır. Vector Asset Studio , geliştiricilerin SVG'leri Android Vector Drawables'a dönüştürmelerine yardımcı olacak araçlar sunar.

Uygulamayı güncelleme

Başlangıç ekranı resimleri oluşturulduktan sonra, gerekli olan tüm yapılandırmalara dahil edilir.

Öncelikle bir content-provider ekleyin (AndroidManifest.xml) kaldırın.

<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>

Not: Sağlayıcıyı oluştururken android:authorities özelliğini değiştirdiğinizden emin olun. çünkü iki uygulama bir cihazda aynı yetkiye sahip olamaz.

Ardından res/xml/filepaths.xml kaynağı ekleyin ve twa başlangıç ekranının yolunu belirtin:

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

Son olarak, LauncherActivity'yi özelleştirmek için meta-tags öğesini Android Manifest'e ekleyin:

<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>

android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY değerinin şundan emin olun: etiketinin içindeki android:authorities özelliğinin tanımladığı değerle eşleşir provider etiketi.

LauncherActivity'yi şeffaf hale getirme

Ayrıca, beyaz ekran olmaması için LauncherActivity'nin şeffaf olduğundan emin olun :

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

Geliştiricilerin Güvenilir Web ile neler geliştirdiğini görmek için sabırsızlanıyoruz Etkinlikler. Geri bildirimlerinizi paylaşmak için şu adresten bize ulaşın: @ChromiumDev.