Attività web attendibili offline

Demián Renzulli

La prima volta che un utente avvia un'applicazione web progressiva (PWA) tramite l'attività web attendibile, il service worker non sarà ancora disponibile poiché la procedura di registrazione non è ancora stata eseguita. Inoltre, se l'utente non ha connettività durante il primo avvio dell'app, anziché l'esperienza offline personalizzata viene visualizzata la pagina di errore di rete.

Un esempio di questo scenario potrebbe verificarsi dopo che l'utente ha scaricato la PWA dal Play Store. Di conseguenza, se l'utente non dispone di connettività quando tenta di aprire l'app per la prima volta, il service worker non sarà ancora disponibile a mostrare la pagina di riserva offline. Verrà visualizzata la pagina di errore standard, inducendo a un'esperienza negativa.

Questa guida spiega come visualizzare la tua attività in questa situazione controllando lo stato della rete prima di avviare l'Attività web attendibile.

Creare un'attività LauncherActivity personalizzata

Il primo passaggio consiste nel creare un'attività personalizzata in Avvio app. Questo Activity contiene la schermata offline che viene visualizzata se non è presente alcuna connettività la prima volta che un utente apre l'app.

Chiama l'attività OfflineFirstTWALauncherActivity e estendila: com.google.androidbrowserhelper.trusted.LauncherActivity.

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Successivamente, registra l'attività in 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>

Il codice precedente registra OfflineFirstTWALauncherActivity come attività di avvio e definisce https://airhorner.com come URL da aprire all'avvio della TWA.

Gestire scenari offline

Innanzitutto, all'interno dell'attività, sostituisci il metodo shouldLaunchImmediately() e fai in modo che restituisca false, in modo che l'attività web attendibile non si avvii immediatamente. Puoi anche aggiungere controlli aggiuntivi prima del lancio iniziale:

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

Sostituisci il metodo onCreate() per controllare lo stato della rete prima del lancio del TWA. Aggiungi una chiamata a tryLaunchTwa(), un metodo di supporto che conterrà la logica:

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

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

Il codice precedente gestisce tre scenari:

• Se la TWA è stata lanciata in precedenza, il servizio worker è stato registrato e la PWA potrà rispondere offline. In questo caso, chiama launchTwa(), definito nella classe principale, per avviare direttamente l'attività web attendibile.
• Se l'Attività web attendibile non è stata avviata in precedenza e l'utente è online, avviala per la prima volta utilizzando il metodo firstTimeLaunchTwa() che implementerai in un secondo momento.
• Se la TWA non è ancora stata lanciata e l'utente è offline, viene visualizzata la schermata di riserva offline nativa.

Implementa metodi di assistenza

Il passaggio finale consiste nell'implementare i metodi di assistenza chiamati dal codice precedente. Ecco il codice per controllare lo stato offline isOnline():

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

Poi implementa hasTwaLaunchedSuccessfully(), che controlla se la TWA è stata lanciata almeno una volta:

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

Il codice precedente chiama launchTWA() dalla classe principale e salva il flag twa_launched_successfully nelle preferenze condivise. Ciò indica che la TWA è stata avviata correttamente almeno una volta.

Il metodo di supporto rimanente, renderOfflineFallback(), esegue il rendering di una schermata offline di Android.

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

Per la sua demo, abbiamo definito il layout activity_offline_first_twa, che contiene un pulsante per riprovare, che, nel tempo, eseguirà firstTimeLaunchTwa() dopo aver controllato la connessione.

Conclusione

• La prima volta che un utente avvia un'applicazione web progressiva (PWA) tramite Attività web attendibile, il service worker non sarà ancora disponibile.
• Per evitare di mostrare la schermata offline standard se l'utente non ha connettività, puoi rilevare la condizione offline e mostrare una schermata offline di riserva.
• In questa guida hai imparato a implementare questa strategia. Se ti interessa controllare il codice che abbiamo utilizzato in questa guida, puoi trovare la soluzione completa nella demo TWA offline first.