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.
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:
meta-data
etiketi, Güvenilir Web Etkinliği'ne hangi URL'yi açması gerektiğini bildirir. Değiştirandroid:value
özelliğini, açmak istediğiniz PWA'nın URL'siyle değiştirin. İçinde Bu örnektehttps://airhorner.com
.- İkinci
intent-filter
etiketi, Güvenilir Web Etkinliği'nin Android'e müdahale etmesine olanak tanırhttps://airhorner.com
öğesini açan amaçlar.android:host
özelliği içindekidata
etiketinin, Güvenilir Web Etkinliği tarafından açılan alana işaret etmesi gerekir.
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
- 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. - 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.
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) veapplicationId
ö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.
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/ |
Uygulamayı güncelleme
Başlangıç ekranı resimleri oluşturulduktan sonra, gerekli olan ekleyebilirsiniz.
Ö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>
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 Android Manifest'e meta-tags
öğesini 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 adresine gidin.