Bir kullanıcı, Güvenilir Web Etkinliği aracılığıyla bir Progresif Web Uygulaması'nı (PWA) ilk kez başlattığında, kayıt işlemi henüz gerçekleşmediğinden Service Worker henüz kullanılabilir olmaz. Buna ek olarak, kullanıcının uygulama ilk kez başlatılırken bağlantısı yoksa özel çevrimdışı deneyim yerine ağ hatası sayfası gösterilir.
Bu senaryonun bir örneği, kullanıcı Play Store'dan PWA'yı indirdikten sonra gerçekleşebilir. Bu nedenle, kullanıcının uygulamayı ilk kez açmaya çalışırken bağlantısı yoksa Service Worker henüz çevrimdışı yedek sayfayı gösteremez. Standart hata sayfası gösterilir, bu da kötü bir deneyime yol açar.
Bu kılavuzda, Güvenilir Web Etkinliği'ni başlatmadan önce ağın durumunu kontrol ederek bu durumda kendi etkinliğinizi nasıl görüntüleyeceğiniz açıklanmaktadır.
Özel LauncherActivity oluşturma
İlk adım, özel bir başlatıcı etkinliği oluşturmaktır. Bir kullanıcı uygulamayı ilk kez açtığında bağlantı olup olmadığını gösteren çevrimdışı ekranı içeren bu Activity.
Etkinliği OfflineFirstTWALauncherActivity çağırın ve uzatın:
com.google.androidbrowserhelper.trusted.LauncherActivity.
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
Ardından, Etkinliği AndroidManifest.xml uygulamasına kaydedin:
<activity android:name=".OfflineFirstTWALauncherActivity" android:theme="@style/Theme.Design.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!-- 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.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:host="airhorner.com" android:scheme="https" />
</intent-filter>
</activity>
Önceki kod, OfflineFirstTWALauncherActivity öğesini bir başlatıcı etkinliği olarak kaydeder ve TWA başlatıldığında açılacak URL olarak https://airhorner.com adresini tanımlar.
Çevrimdışı senaryoları işleme
Öncelikle Etkinlik'in içinde shouldLaunchImmediately() yöntemini geçersiz kılın ve false döndürmesini sağlayın. Böylece Güvenilir Web Etkinliği hemen başlamaz. İlk lansmandan önce ek kontroller de ekleyebilirsiniz:
@Override
protected boolean shouldLaunchImmediately() {
// launchImmediately() returns `false` so we can check connection
// and then render a fallback page or launch the Trusted Web Activity with `launchTwa()`.
return false;
}
TWA başlamadan önce ağ durumunu kontrol etmek için onCreate() yöntemini geçersiz kılın. Söz konusu mantığı içeren yardımcı bir yöntem olan tryLaunchTwa() öğesine bir çağrı ekleyin:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
tryLaunchTwa();
}
Sonra, tryLaunchTwa() uygulayın:
private void tryLaunchTwa() {
// If TWA has already launched successfully, launch TWA immediately.
// Otherwise, check connection status. If online, launch the Trusted Web Activity with `launchTwa()`.
// Otherwise, if offline, render the offline fallback screen.
if (hasTwaLaunchedSuccessfully()) {
launchTwa();
} else if (isOnline()) {
firstTimeLaunchTwa();
} else {
renderOfflineFallback();
}
}
Önceki kod üç senaryoyu işlemektedir:
- TWA daha önce kullanıma sunulduysa hizmet çalışanı kaydedilmiştir ve PWA çevrimdışı yanıt verebilir. Bu durumda, Güvenilir Web Etkinliği'ni doğrudan başlatmak için üst sınıfta tanımlanan
launchTwa()yöntemini çağırın. - TWA daha önce kullanıma sunulmamışsa ve kullanıcı çevrimiçiyse daha sonra uygulayacağınız
firstTimeLaunchTwa()yöntemini kullanarak Güvenilir Web Etkinliği'ni ilk kez başlatın. - TWA henüz başlatılmadıysa ve kullanıcı çevrimdışıysa yerel çevrimdışı yedek ekranı oluşturun.
Yardımcı yöntemler uygulama
Son adım, önceki kod tarafından çağrılan yardımcı yöntemleri uygulamaktır.
isOnline() çevrimdışı durumunu kontrol etmek için kullanabileceğiniz kod aşağıdadır:
private boolean isOnline() {
ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}
Ardından, TWA'nın en az bir kez başlatılıp başlatılmadığını kontrol eden hasTwaLaunchedSuccessfully() işlemini uygulayın:
private boolean hasTwaLaunchedSuccessfully() {
// Return `true` if the preference "twa_launched_successfully" has already been set.
SharedPreferences sharedPref = getSharedPreferences(getString(R.string.twa_offline_first_preferences_file_key), Context.MODE_PRIVATE);
return sharedPref.getBoolean(getString(R.string.twa_launched_successfully), false);
}
Önceki kod, üst sınıftan launchTWA() yöntemini çağırır ve twa_launched_successfully işaretini paylaşılan tercihlere kaydeder. Bu, TWA'nın en az bir kez başarıyla başlatıldığını gösterir.
Kalan yardımcı yöntem olan renderOfflineFallback(), Android çevrimdışı ekran oluşturur.
private void renderOfflineFallback() {
setContentView(R.layout.activity_offline_first_twa);
Button retryBtn = this.findViewById(R.id.retry_btn);
retryBtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Check connection status. If online, launch the Trusted Web Activity for the first time.
if (isOnline()) firstTimeLaunchTwa();
}
});
}
Demosu için activity_offline_first_twa düzenini tanımladık. Bu düzende, bağlantıyı kontrol ettikten sonra yeniden deneme düğmesi içeren ve zamanında firstTimeLaunchTwa() yürütülecek bir düğme bulunur.
Sonuç
- Bir kullanıcı, Güvenilir Web Etkinliği üzerinden bir Progresif Web Uygulaması'nı (PWA) ilk kez başlattığında, hizmet çalışanı henüz kullanılabilir olmaz.
- Kullanıcının bağlantısı yoksa standart çevrimdışı ekranın gösterilmesini önlemek için çevrimdışı koşulunu algılayıp bunun yerine bir yedek çevrimdışı ekran gösterebilirsiniz.
- Bu kılavuzda, bu stratejiyi nasıl uygulayacağınızı öğrendiniz. Bu kılavuz boyunca kullandığımız kodu kontrol etmek isterseniz eksiksiz çözümü Çevrimdışı İlk TWA Demosu'nda bulabilirsiniz.