Çevrimdışı Öncelikli Güvenilir Web Etkinlikleri

Demián Renzulli

Bir kullanıcı güvenilir web üzerinden progresif web uygulamasını (PWA) ilk kez başlattığında Etkinlik, kayıt işleminden bu yana hizmet çalışanı henüz kullanılamaz henüz gerçekleşmedi. Ayrıca, kullanıcının ilk uygulama sırasında bağlantısı yoksa çevrimdışıyken de ağ hata sayfası açılırsa gösteriliyor.

Bu senaryoya bir örnek, kullanıcı PWA'yı indirdikten sonra gösterilebilir. Google Play Store'dan. Kullanıcı açmayı denediğinde internet bağlantısı yoksa uygulamayı ilk kez kullanıyorsanız Service Worker henüz gösterilemez. çevrimdışı yedek sayfa olarak görünür. Standart hata sayfası gösterilir. bu da kötü bir deneyime yol açar.

Bu kılavuzda, bu durumda kendi etkinliklerinizi .

Not: Bu kılavuzun ön koşullarından biri, Güvenilir Web Etkinliği uygulamasına sahip olmaktır. çalışıyor. Entegrasyon Kılavuzu'ndaki adımları uygulayın. temel bir Güvenilir Web Etkinliği projesi oluşturun.

Özel bir LauncherActivity oluşturma

İlk adım, özel bir başlatıcı etkinliği oluşturmaktır. Bu Activity Bu sayfa, bağlantı yoksa gösterilecek çevrimdışı ekranı içerir. Kullanıcı uygulamayı ilk kez açtığında.

OfflineFirstTWALauncherActivity Etkinliği'ni çağırın ve süresi uzatın: com.google.androidbrowserhelper.trusted.LauncherActivity.

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Daha sonra, 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 başlatıcı olarak kaydediyor etkinliğidir ve URL olarak https://airhorner.com adresini tanımlar lansmanda açılacaklar.

Çevrimdışı senaryoları yönetme

İlk olarak, Etkinlik'in içinde shouldLaunchImmediately() yöntemini geçersiz kılın ve Güvenilir Web Etkinliği'nin başlatılmaması için false değerini döndürmesini sağlayabilirsiniz. hemen teslim edebilirsiniz. İ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'dan önce ağ durumunu kontrol etmek için onCreate() yöntemini geçersiz kılın lansman sonrasında gerçekleşebilir. Bunu içerecek yardımcı bir yöntem olan tryLaunchTwa() için bir çağrı ekleyin mantık:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    tryLaunchTwa();
}

Ardından 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 ele alır:

• TWA daha önce başlatılmışsa servis çalışanı ve PWA çevrimdışı yanıt verebilir. Böyle bir durumda, öğesini başlatmak için üst sınıfta tanımlanan launchTwa() öğesini çağırın Güvenilir Web Etkinliği.
• TWA daha önce kullanıma sunulmamışsa ve kullanıcı çevrimiçiyse firstTimeLaunchTwa() kullanılarak ilk kez Güvenilir Web Etkinliği başka bir yöntem kullanabilirsiniz.
• TWA henüz kullanıma sunulmadıysa ve kullanıcı çevrimdışıysa yerel dosyayı oluşturun çevrimdışı yedek ekranı.

Yardımcı yöntemleri uygulama

Son adım, önceki kod tarafından çağrılan yardımcı yöntemleri uygulamaktır. Çevrimdışı durumu (isOnline()) kontrol etmek için kullanılacak kod aşağıda belirtilmiştir:

private boolean isOnline() {
    ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
    NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
    return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}

Ardından, TWA'nın mevcut olup olmadığını kontrol eden hasTwaLaunchedSuccessfully() en az bir kez başlatıldı:

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, ebeveyn sınıfından launchTWA() öğesini çağırır ve Paylaşılan tercihlerde twa_launched_successfully işareti. Bu ifade, TWA en az bir kez başarıyla başlatıldı.

Kalan yardımcı yöntem olan renderOfflineFallback(), bir Android oluşturur çevrimdışı ekranı.

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. yeniden denemek için bir düğme içerir. Bu düğme zamanında Bağlantıyı kontrol ettikten sonra firstTimeLaunchTwa().

Sonuç

• Bir kullanıcı güvenilir web üzerinden progresif web uygulamasını (PWA) ilk kez başlattığında Service Worker henüz kullanılabilir olmayacaktır.
• Kullanıcının bağlantısı yoksa standart çevrimdışı ekranının gösterilmesini önlemek için çevrimdışı durumu algılayabilir ve yedek çevrimdışı ekranı gösterebilirsiniz .
• Bu kılavuzda, bu stratejiyi nasıl uygulayacağınızı öğrendiniz. Şu durumda: öğrenmek isterseniz, bu kılavuzda kullandığımız kodu Çevrimdışı İlk TWA Demosu'nda kapsamlı çözümü bulabilirsiniz.