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.
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:
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ğerihttps://airhorner.com
'dir.- İkinci
intent-filter
etiket, Güvenilir Web Etkinliği'ninhttps://airhorner.com
adresini açan Android Intent'lerine müdahale etmesine olanak tanır.data
etiketinin içindekiandroid:host
özelliği, Güvenilir Web Etkinliği tarafından açılan alana işaret etmelidir.
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
- 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. - 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.
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 veapplicationId
ö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.
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/ |
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>
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.