Google Play Store’da bir “Web Uygulama” yayınlayın

PWA konseptinin gerçekleşmesinden bu yana bir süre geçti. Bir süre önce, Service Workers API’sinin kullanılması sayesinde , web geliştiricileri Android veya iOS cihazlarının kodladığı gibi benzer şekilde web uygulamaları yaratabiliyorlardı. Ancak, Progressive Web Uygulamaları, yerel destek eksikliği nedeniyle ikinci sırada yer aldı. Eğer böyle müthiş bir PWA oluşturabilir. Twitter bile Google Play’de yayınlamak için izin verilmedi.

En son Google Duyurusu’ndan önce tek bir seçenek vardı, PWA’nızı bir web görünümü veya bir Chrome özel sekmesi kullanarak normal bir Android uygulamasına yerleştirin. Bu çözümler iyi çalışıyordu ancak uygulamanıza tam ekran bir UI kullanarak göstermenize ya da tarayıcı paylaşım yeteneklerinden herhangi birini kullanmanıza izin vermedi: tarayıcıdaki tüm depolama, önbellek ve oturumlar. Ayrıca, uygulamanızın bir tarayıcıda işlendiğini gösteren çirkin bir araç çubuğu da gösterdi. Ancak, Chrome 72’den başlayarak , uygulamalarınızın hemen içinde bulunan tüm Chrome özelliklerinde gömülü bir tam ekran tarayıcı kullanmamızı sağlayacak, Trusted Web Activity adlı yeni etkileyici bir bileşeni kullanabileceğiz.

Güvenilir bir Web Etkinliği, bir Android uygulamasında tam ekran bir Chrome tarayıcısı çalıştırır, yani uygulamada görünen hiçbir kullanıcı arayüzü yoktur (URL çubuğunu içerir). Bu güçlü bir kabiliyettir, bu nedenle Google’ın, uygulamanın ve sitenin aynı geliştiriciye ait olduğunu doğrulaması gerekir – bu nedenle ‘Güvenilir’. Uygulamanın ve içindeki sitenin aynı geliştiriciye ait olduğunu doğrulamak için, TWA mülkiyeti doğrulamak için Dijital Varlık Bağlantılarını kullanır .

PWA’mı Google Play’de yayınlamak istersem ne yapmalıyım? Spoiler, hala Android uygulamanızı oluşturmanız gerekiyor ? Ama endişelenmeyin, bu satırdan başlayarak Android APK’nızı oluşturmak için gereken tüm adımları gözden geçireceğiz PWA ile yayınlanmaya hazır ?

Aşama 1:

Android Studio’yu kullanarak sıfırdan bir Android projesi oluşturun.

En az API 16 kullanmanız gerektiğini unutmayın

Adım 2:

TWA Destek Kitaplığını yapılandırın ve Jitpack bağımlılığını depo listenize ekleyin:

allprojects {   
	repositories {       
		google()       
		jcenter()       
		maven { url "https://jitpack.io" }   
	}
}

Java 8 kaynağını ve hedef uyumluluğunu etkinleştirin:

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

``

Sonuncusu, ancak en önemlisi, Güvenilir Web Etkinliği özelliğini uygulayan özel sekmeler istemci kitaplığını ekleyin:

dependencies {
    ...
    implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3'
    ...
}

Aşama 3:

AndroidManifest.xml dosyanızı, uygulamanıza Güvenilir Web Etkinliği ekleyerek yapılandırın:

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

    <application
        ...
        <activity android:name="android.support.customtabs.trusted.LauncherActivity">

           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
    
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <data
                 android:scheme="https"
                 android:host="twitter.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

Görebildiğiniz gibi, yapılandırılan son amaç filtresi yalnızca PWA sunucunuz herhangi bir bağlantı veya URL’den açıldığında tetiklemek için kullanılacaktır. Bu, normal bir PWA’nın yaptığı gibi varsayılan olarak derin linkleri desteklemenizi sağlayacaktır.

4. Adım:

Dijital Varlıklar Bağlantılarını , PWA’nın diğer web siteleri ve mobil uygulamalar tarafından tüketilebilecek doğrulanabilir bildirimler yapması için bir yol sağlayabilecek şekilde yapılandırmamız gerekir . Bunu yapmak için strings.xml dosyanıza bunun gibi yeni bir string kaynak eklemeniz gerekir:

<resources>
	...
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://twitter.com\"}
        }]
    </string>
</resources>

Twitter.com adresini kendi sunucunuzla değiştirmeyi unutmayın .

Adım 5:

Bu meta-veri satırını bildiriminize ekleyerek önceden oluşturulmuş dizeyi Trusted Web Activity ile bağlayın:

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

6. Adım:

Aşağıdaki komutu kullanarak anahtar deposu SHA-256’yı çıkartın:

keytool -list -v -keystore  -alias  -storepass  -keypass 

Eğer deposu SHA-256 değerini anladıktan sonra artık varlıkları kullanarak json dosyası bağlantı oluşturabilir , bu jeneratör ve etki kökünden hizmet vermektedir: /.well-known/assetlinks.json. Bunun gibi bir dosya alacaksınız:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target" : { "namespace": "android_app", "package_name": "com.karumi.pwa",
               "sha256_cert_fingerprints": ["YOUR_CERT_SHA_256"] }
}]

Bu, PWA’nızdaki bu Güvenilir Web Etkinliği özelliğini kullanabilen tek kişi olmanıza izin verecektir.

7. Adım (isteğe bağlı):

Uygulamayı sunucularınıza herhangi bir dosya yüklemeden veya uygulama anahtar deponuzu yapılandırmadan test etmek istiyorsanız , “chrome: // flags” URL’sinden ” root olmayan cihazlarda komut satırını etkinleştir ” seçeneğini etkinleştirebilirsiniz :

Bu bayrağı etkinleştirdikten sonra, bu komutu çalıştırabilir ve cihazınızı yeniden başlatabilirsiniz:

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

Cihazınızı yeniden başlattıktan sonra, Android uygulamanızı içinde tam ekran ve tamamen işlevsel bir web uygulamasıyla çalıştırabilirsiniz.

8. adım:

İyi haber, gitmeye hazırız APK APK’nızı oluşturun ve Google Play’de yayınlayın! Yardıma ihtiyacınız olursa, bu kılavuzu her zaman takip edebilirsiniz.

Sonuç:

Google Chrome’un sağladığı bu yeni özellik, Google Play ekosisteminin bir parçası olmak isteyen tüm web geliştiricileri için ilginçtir. Ancak sizinle paylaşmak istediğimiz bazı düşünceler ve sonuçlar var:

• Bu projenin yaratılma süreci otomatikleştirilmelidir. En azından proje iskele. Bir şekilde otomatikleştirmemiz gereken en az 7 manuel adım var.
• Bu teknik sayesinde herhangi bir normal uygulama gibi uygulamamızı güncelleyebileceğiz. Yalnızca uygulama simgesi değişirse veya yazabileceğimiz herhangi bir yerel kodu değiştirmek istiyorsak, yeni bir APK yayınlamamız gerekir.
• Kullanımı bu gelişme stratejisi yerel uygulamalar, çarpıntı, Kotlin yerli yerine veya performans açısından yerel uygulamalar tepki asla. Web uygulamalarının yerel kodlar veya bazı hibrit platformlar gibi okuyucular kullanmasına izin verilmediğini unutmayın.
• Kullanıcı bir Google Chrome <72 sürümünü yüklediyse, uygulamanızı bir Google Chrome özel sekmesi olarak görür. Bunun nedeni, Güvenilir Web Etkinliğinin bir Chrome Özel Sekmesinin özel bir örneği olması.
• Bunun şimdilik iOS uygulamaları için uygun olmadığını unutmayın .
• Kullanıcı Google Chrome’u yüklememişse, uygulama varsayılan tarayıcı kullanılarak oluşturulur . Bu, uygulamanız için beklenmeyen bir UI ile sonuçlanabilir ve sonuç üzerinde kontrol sahibi olmazsınız.
• PWA’nızın Lighthouse gibi bazı araçlar tarafından onaylanması gerekeceğini unutmayın . Burada takip etmemiz gereken PWA taban çizgisinin bir listesini bulabilirsiniz .