Zaufane działania w internecie nastawione na tworzenie offline

Przy pierwszym uruchomieniu przez użytkownika progresywnej aplikacji internetowej (PWA) za pomocą zaufanego działania internetowego skrypt service worker nie będzie jeszcze dostępny, ponieważ proces rejestracji jeszcze się nie zakończył. Poza tym, jeśli przy pierwszym uruchomieniu aplikacji użytkownik nie będzie mieć połączenia, zamiast niestandardowego środowiska offline wyświetli się strona błędu sieci.

Przykładowy scenariusz może mieć miejsce po pobraniu przez użytkownika PWA ze Sklepu Play. Jeśli użytkownik nie będzie mieć połączenia z internetem przy próbie otwarcia aplikacji po raz pierwszy, skrypt service worker nie będzie jeszcze dostępny, aby wyświetlić stronę zastępczą offline. Wyświetli się standardowa strona błędu, co sprawi, że aplikacja nie będzie Ci odpowiadać.

TWA offline: standardowa strona offline

Z tego przewodnika dowiesz się, jak wyświetlić swoją aktywność w takiej sytuacji, sprawdzając stan sieci przed uruchomieniem zaufanej aktywności internetowej.

Tworzenie własnej aktywności LauncherActivity

Pierwszym krokiem jest utworzenie niestandardowego działania w Menu z aplikacjami. Ten element Activity będzie zawierać ekran trybu offline wyświetlany w przypadku braku połączenia przy pierwszym uruchomieniu aplikacji przez użytkownika.

Wywołaj aktywność OfflineFirstTWALauncherActivity i rozszerz ją: com.google.androidbrowserhelper.trusted.LauncherActivity.

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Następnie zarejestruj aktywność w aplikacji 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 OfflineFirstTWALauncherActivity jako działanie programu uruchamiającego i określa https://airhorner.com jako adres URL do otwarcia po uruchomieniu TWA.

Rozwiązywanie problemów w trybie offline

Najpierw w sekcji Aktywność zastąp metodę shouldLaunchImmediately() i ustaw jej zwracanie wartości false, dzięki czemu zaufana aktywność internetowa nie będzie uruchamiana od razu. Możesz też wprowadzić dodatkowe testy przed uruchomieniem kampanii:

@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 uruchomieniem aplikacji TWA. Dodaj wywołanie do tryLaunchTwa(), metody pomocniczej, która będzie zawierać tę logikę:

@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 sytuacje:

  • Jeśli TWA został uruchomiony wcześniej, skrypt service worker został zarejestrowany i może odpowiadać offline. W takim przypadku wywołaj launchTwa() zdefiniowaną w klasie nadrzędnej, by bezpośrednio uruchomić zaufaną aktywność w internecie.
  • Jeśli TWA nie została wcześniej udostępniona, a użytkownik jest online, uruchom zaufaną aktywność w internecie po raz pierwszy za pomocą metody firstTimeLaunchTwa(), którą wdrożysz później.
  • Jeśli aplikacja TWA nie została jeszcze uruchomiona, a użytkownik jest offline, wyrenderuj natywny ekran zastępczy offline.

Wdrażanie metod pomocniczych

Ostatnim krokiem jest zaimplementowanie metod pomocniczych wywołanych przez poprzedni kod. Oto kod do sprawdzenia 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 aplikacja TWA została co najmniej raz uruchomiona:

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 funkcję launchTWA() z klasy nadrzędnej i zapisuje flagę twa_launched_successfully w wspólnych preferencjach. Oznacza to, że aplikacja TWA została uruchomiona poprawnie – co najmniej raz.

Pozostała metoda pomocnicza renderOfflineFallback() renderuje ekran offline Androida.

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

W przypadku jego wersji demonstracyjnej zdefiniowaliśmy układ activity_offline_first_twa, który zawiera przycisk ponownej próby, który we właściwym czasie po sprawdzeniu połączenia wykona zadanie firstTimeLaunchTwa().

offline – niestandardowy ekran offline

Podsumowanie

  • Przy pierwszym uruchomieniu przez użytkownika progresywnej aplikacji internetowej (PWA) za pomocą zaufanego działania internetowego 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 dostępu offline i wyświetlić zastępczy ekran offline.
  • Z tego przewodnika dowiesz się, jak wdrożyć tę strategię. Jeśli chcesz sprawdzić kod użyty w tym przewodniku, pełne rozwiązanie znajdziesz w prezentacji pierwszego trybu offline TWA.