Zaufane działania w internecie nastawione na tworzenie offline

Demián Renzulli

Za pierwszym razem, gdy użytkownik uruchomi progresywną aplikację internetową (PWA) przez Trusted Web aktywność, mechanizm Service Worker nie będzie jeszcze dostępny od procesu rejestracji jeszcze nie miała miejsca. Ponadto, jeśli użytkownik nie będzie miał połączenia w trakcie pierwszej aplikacji zamiast niestandardowego środowiska offline, strona błędu sieci to wyświetlane.

Przykładem tego może być sytuacja, gdy użytkownik pobierze aplikację PWA. w Sklepie Play. Jeśli użytkownik nie ma połączenia podczas próby otwarcia pierwszy raz, mechanizm Service Worker nie będzie jeszcze dostępny do wyświetlenia stronę zastępczą offline. Wyświetli się standardowa strona błędu, co źle wpływa na wrażenia użytkowników.

Z tego przewodnika dowiesz się, jak w takiej sytuacji pokazać swoją aktywność przez sprawdza stan sieci przed uruchomieniem zaufanej aktywności internetowej.

Tworzenie niestandardowej aktywności LauncherActivity

Pierwszym krokiem jest utworzenie niestandardowego działania programu uruchamiającego. To urządzenie (Activity) który będzie zawierać ekran trybu offline, informujący o braku połączenia. przy pierwszym uruchomieniu aplikacji przez użytkownika.

Wywołaj aktywność OfflineFirstTWALauncherActivity i zwiększ jej zakres: com.google.androidbrowserhelper.trusted.LauncherActivity

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Następnie zarejestruj aktywność w usłudze AndroidManifest.xml:

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

Poprzedni kod rejestruje aplikację OfflineFirstTWALauncherActivity jako program uruchamiający activity i definiuje https://airhorner.com jako adres URL. zostanie otwarta po uruchomieniu TWA.

Obsługa scenariuszy offline

Najpierw w sekcji Aktywność zastąp metodę shouldLaunchImmediately() i ustaw zwracanie wartości false, by usługa Trusted Web Activity nie była uruchamiana natychmiast. Przed aktualizacją możesz też przeprowadzić dodatkową kontrolę:

@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;
}

Zastąp metodę onCreate(), aby sprawdzić stan sieci przed TWA nowych funkcji. Dodaj wywołanie do metody tryLaunchTwa(), metody pomocniczej, która będzie zawierać to logika:

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

Następnie zaimplementuj tryLaunchTwa():

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();
    }
}

Poprzedni kod uwzględnia 3 scenariusze:

• Jeśli TWA została wcześniej uruchomiona, skrypt service worker a aplikacja PWA będzie mogła odpowiedzieć offline. W takim przypadku wywołaj launchTwa(), zdefiniowane w klasie nadrzędnej, aby uruchomić polecenie bezpośrednio zaufana aktywność internetowa.
• Jeśli TWA nie została jeszcze uruchomiona, a użytkownik jest online, uruchom zaufaną aktywność w internecie po raz pierwszy przy użyciu firstTimeLaunchTwa() który wdrożysz później.
• Jeśli TWA nie została jeszcze uruchomiona, a użytkownik jest offline, wyrenderuj natywny awaryjnego ekranu offline.

Wdrażanie metod pomocniczych

Ostatnim krokiem jest wdrożenie metod pomocniczych wywoływanych przez poprzedni kod. Oto kod do sprawdzania stanu offline isOnline():

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

Następnie zaimplementuj hasTwaLaunchedSuccessfully(), który sprawdza, czy TWA uruchomiono co najmniej raz:

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);
}

Poprzedni kod wywołuje launchTWA() z klasy nadrzędnej i zapisuje twa_launched_successfully w udostępnianych preferencjach. Oznacza to, że TWA udało się uruchomić przynajmniej raz.

Pozostała metoda pomocnicza, tj. renderOfflineFallback(), renderuje Androida ekranu offline.

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();
        }
    });
}

Definiowaliśmy układ activity_offline_first_twa, zawiera przycisk umożliwiający ponowienie próby, który z czasem uruchomi firstTimeLaunchTwa() po sprawdzeniu połączenia.

Podsumowanie

• Za pierwszym razem, gdy użytkownik uruchomi progresywną aplikację internetową (PWA) przez Trusted Web Aktywność, mechanizm Service Worker nie będzie jeszcze dostępny.
• Aby uniknąć wyświetlania standardowego ekranu offline, gdy użytkownik nie ma połączenia, możesz wykryć warunek offline i wyświetlić zastępczy ekran offline .
• W tym przewodniku pokazaliśmy, jak wdrożyć tę strategię. Jeśli jesteś chcesz sprawdzić kod użyty w tym przewodniku, znajdziesz kompleksowe rozwiązanie znajdziesz w przewodniku offline First TWA (w języku angielskim).