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 .
Ö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.