Entegrasyon Kılavuzu

André Cipriani Bandarra

Twitter GitHub Glitch Mastodon Ana Sayfa

Not: Not: Güvenilir Web Etkinlikleri için daha basit bir hızlı başlangıç kılavuzu kullanıma sunulmuştur.

Güvenilir Web Etkinliği oluşturmak için geliştiricilerin Java kodu yazması gerekmez, ancak Android Studio gereklidir. Bu kılavuz Android Studio 3.3 kullanılarak oluşturulmuştur. Nasıl yükleneceğiyle ilgili belgelere göz atın.

Güvenilir Web Etkinliği Projesi Oluşturun

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

Not: Bu bölüm, Android Studio'da yeni proje oluşturma konusunda size yol gösterecektir. Aracı zaten tanıyorsanız Güvenilir Web Etkinliği Kitaplığını Edinme bölümüne atlayabilirsiniz.

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, destek kitaplığı tarafından sağlanan bir etkinlik kullandığından Etkinlik Ekleme'yi seçin ve İleri'yi tıklayın.

Bir sonraki adımda sihirbaz, proje için yapılandırmaları ister. Her alanın kısa bir açıklamasını aşağıda bulabilirsiniz:

• Ad: Android Başlatıcı'da uygulamanız için kullanılacak ad.
• Paket Adı: Play Store'daki ve Android cihazlardaki Android Uygulamaları için benzersiz bir tanımlayıcı. Android uygulamaları için paket adları oluşturma gereksinimleri ve en iyi uygulamalar hakkında daha fazla bilgi için belgelere göz atın.
• Konumu kaydetme: Android Studio'nun projeyi dosya sisteminde oluşturacağı konum.
• Dil: Proje için Java veya Kotlin kodu yazılması gerekmez. Varsayılan olarak Java'yı seçin.
• Minimum API Düzeyi: Destek Kitaplığı için en az API Düzeyi 16 gerekir. Yukarıdaki API 16 sürümlerini seçin.

Hazır Uygulamalar veya AndroidX yapıları kullanmayacağımızdan kalan onay kutularını işaretlemeden bırakın ve Son'u tıklayın.

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

Projede Güvenilir Web Etkinliği kitaplığını kurmak için Uygulama derleme dosyasını düzenlemeniz gerekir. Proje Gezgini'nde Gradle Komut Dosyaları bölümünü bulun. Biraz kafa karıştırıcı olabilecek build.gradle adlı iki dosya vardır ve parantez içindeki açıklamalar doğru dosyanın tanımlanmasına yardımcı olur.

Aradığımız dosya, adının yanında Module modülü bulunan dosyadır.

Güvenilir Web Etkinlikleri kitaplığı Java 8 özelliklerini kullanır ve ilk değişiklik Java 8'i etkinleştirir. Bir compileOptions bölümünü aşağıdaki gibi android bölümünün altına ekleyin:

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

Sonraki adım, projeye Güvenilir Web Etkinliği Destek Kitaplığı'nı ekler. dependencies bölümüne yeni bir bağımlılık ekleyin:

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

Android Studio, projeyi bir kez daha senkronize etmenizi isteyen bir istem gösterecek. Ş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 Manifest'i düzenlenerek ayarlanır.

Project Navigator'da uygulama bölümünü genişletin, ardından manifestleri genişletin ve dosyayı açmak için AndroidManifest.xml öğesini çift tıklayın.

Android Studio'dan projemizi oluştururken herhangi bir Etkinlik eklememesini istediğimizden, manifest boştur ve yalnızca uygulama etiketini içermektedir.

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 standart Android App Manifest'tir. Güvenilir Web Etkinlikleri bağlamında iki alakalı bilgi bulunur:

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

Not: Bu aşamada proje çalıştırılırken Özel Sekmeler'deki URL Çubuğu ekranın üst kısmında gösterilmeye devam eder. Bu bir hata değildir.

Bir sonraki bölümde, web sitesi ile uygulama arasındaki ilişkiyi doğrulamak için Dijital Öğe Bağlantıları'nın nasıl kurulacağı ve URL çubuğunun nasıl kaldırılacağı gösterilir.

URL çubuğunu kaldırma

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

Bu ilişkilendirme Dijital Varlık Bağlantıları aracılığıyla oluşturulur. İlişkilendirme, uygulamadan web sitesine ve web sitesinden uygulamaya bağlanacak şekilde her iki şekilde de oluşturulmalıdır.

Uygulamayı web sitesi doğrulaması için ayarlayabilir ve hata ayıklama amacıyla Chrome'u web sitesinden uygulama doğrulamaya atlayacak şekilde ayarlayabilirsiniz.

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

app > res > values > strings.xml dize kaynakları dosyasını açın ve Digital AssetLinks beyanını aşağıya ekleyin:

<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, Güvenilir Web Etkinliği tarafından açılan şema ve alanla eşleşecek şekilde değiştirin.

Android Uygulama Manifest dosyasına (AndroidManifest.xml), yeni bir meta-data etiketi ekleyerek ifadeye bağlantı oluşturun. Ancak bu kez application etiketinin alt öğesi olarak:

<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 arasında bir ilişki kurduk. Web sitesinden uygulama doğrulamasına geçmeden, ilişkinin bu kısmında hata ayıklamak faydalıdır.

Bunu bir geliştirme cihazında nasıl test edeceğiniz aşağıda açıklanmıştır:

Hata ayıklama modunu etkinleştirme

1. Geliştirme cihazında Chrome'u açın, chrome://flags bölümüne gidin, Root erişimli olmayan cihazlarda komut satırını etkinleştir adlı öğeyi arayın, ETKİN olarak değiştirin ve tarayıcıyı yeniden başlatın.
2. Ardından, işletim sisteminizin Terminal uygulamasında Android Debug Bridge'i (Android Studio yüklüdür) kullanı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. Uygulama artık tam ekran modunda gösterilecektir.

Not: Chrome'un doğru komut satırıyla yeniden başlatılması için kapanmaya zorlaması gerekebilir. Android Ayarları > Uygulamalar ve bildirimler > Chrome'a gidin ve Zorla durdur'u tıklayın.

Web sitesinden uygulama ile ilişkilendirme oluşturun

Geliştiricinin ilişkilendirmeyi oluşturmak için uygulamadan toplaması gereken iki bilgi vardır:

• Paket Adı: İlk bilgi, uygulamanın paket adıdır. Bu, uygulama oluşturulurken oluşturulan paket adıyla aynıdır. Ayrıca, Modül build.gradle içinde, Gradle Komut Dosyaları > build.gradle (Modül: uygulama) altında bulunabilir ve applicationId özelliğinin değeridir.
• SHA-256 Parmak İzi: Android uygulamalarının Play Store'a yüklenebilmesi için imzalanması gerekir. Aynı imza, yükleme anahtarının SHA-256 parmak izi üzerinden web sitesi ile uygulama arasında bağlantı kurmak için kullanılır.

Android dokümanlarında, Android Studio kullanarak anahtar oluşturma işlemi ayrıntılı olarak açıklanmaktadır. Anahtar deposuyla ilgili yol, takma ad ve şifreleri not etmeyi unutmayın. Sonraki adımda bunlara ihtiyacınız olacaktır.

keytool öğesini kullanarak SHA-256 parmak izini ayıklayın ve aşağıdaki komutla bu işlemi gerçekleştirin:

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

SHA-256 parmak izi değeri, Sertifika parmak izi bölümünün altında yazılıdır. 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 bulundurduğunuzda assetlinks oluşturma aracına gidin, alanları doldurun ve İfade Oluştur'u tıklayın. Oluşturulan ifadeyi kopyalayın ve alanınızdan /.well-known/assetlinks.json URL'sinden yayınlayın.

Not: AssetLinks dosyası, alanın kökündeki /.well-known/assetlinks.json altında olmalıdır. Çünkü Chrome yalnızca bu dosyayı arar.

Simge Oluşturma

Android Studio yeni bir proje oluşturduğunda, bu proje için de varsayılan bir Simge bulunur. Bir geliştirici olarak kendi simgenizi oluşturmak ve uygulamanızı Android Launcher'daki diğer uygulamalardan ayırt etmek isteyeceksiniz.

Android Studio, uygulamanızın her ihtiyacına uygun her çözünürlük ve şekil için doğru simgeleri oluşturmak amacıyla gerekli araçları sağlayan Image Asset Studio'yu içerir.

Android Studio'da File > New > Image Asset uygulamasına gidin, Launcher Icons (Adaptative and Legacy) öğesini seçin ve Sihirbaz'daki adımları uygulayarak uygulama için özel bir simge oluşturun.

İmzalanmış bir APK oluşturuluyor

Alanınızda assetlinks dosyası ve asset_statements etiketi Android uygulamasında yapılandırıldıktan sonra, bir sonraki adım imzalı uygulama oluşturmaktır. Yine, bunun için gereken adımlar da geniş çapta belgelerle açıklanmıştır.

Çı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 Android Debug Bridge'i kullanarak, işletim sisteminizin terminalinden ve test cihazından yararlanarak hata mesajlarını kontrol edebilirsiniz.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Yüklenen APK'yı oluşturduktan sonra uygulamayı Play Store'a yükleyebilirsiniz.

Başlangıç Ekranı Ekleme

Güvenilir Web Etkinlikleri, Chrome 75'ten itibaren Başlangıç Ekranlarını desteklemektedir. Başlangıç Ekranı, projeye birkaç yeni görüntü dosyası ve yapılandırması eklenerek ayarlanabilir.

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

Başlangıç Ekranı için resimler oluşturuluyor

Android cihazların farklı ekran boyutları ve piksel yoğunlukları olabilir. Başlangıç Ekranı'nın tüm cihazlarda iyi görünmesini sağlamak amacıyla her piksel yoğunluğu için resim oluşturmanız gerekir.

Ekrandan bağımsız piksellerin (dp veya dip) tam açıklaması bu makalenin kapsamında değildir. Ancak herhangi bir yoğunlukta cihaz ekranında 2x2 inç kareyi temsil eden ve mdpi'de 320x320 piksele eşdeğer olan 320x320 dp boyutunda bir resim oluşturmak için bir örnek verilebilir.

Buradan, diğer piksel yoğunlukları için gereken boyutları türetebiliriz. Aşağıda piksel yoğunluklarını, taban boyutuna (320x320 dp) uygulanan çarpanın, piksel cinsinden sonuç boyutu ve resmin Android Studio projesinde eklenmesi gereken konumun yer aldığı bir liste verilmiştir.

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,0 kat	960x960 piksel	/res/drawable-xxhdpi/
xxxhdpi	4 kat	1.280x1.280 piksel	/res/drawable-xxxhdpi/

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

Uygulama güncelleniyor

Başlangıç ekranı için resimler oluşturulduktan sonra, gerekli yapılandırmaları projeye ekleyin.

Öncelikle Android Manifest'e (AndroidManifest.xml) bir içerik sağlayıcı ekleyin.

<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: İki uygulama bir cihazda aynı yetkiye sahip olamayacağından sağlayıcı oluştururken android:authorities özelliğini değiştirdiğinizden emin olun.

Ardından res/xml/filepaths.xml kaynağını ekleyip 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 uygulamasını 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 etiketi değerinin, provider etiketindeki android:authorities özelliğinde tanımlanan değerle eşleştiğinden emin olun.

LauncherActivity'yi şeffaf hale getirme

Ayrıca, LauncherActivity için yarı saydam bir tema ayarlayarak başlangıç tarihinden önce beyaz bir ekranın görüntülenmesini önlemek 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 Etkinlikleri ile neler oluşturduklarını görmek için sabırsızlanıyoruz. Geri bildirimleriniz için @ChromiumDev adresinden bize ulaşın.