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. Se l'utente non ha connettività quando tenta di aprire l'app per la prima volta, il service worker non sarà ancora disponibile per 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à di Avvio personalizzata. 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 al momento del lancio del TWA.
Gestire gli 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();
}
A questo punto, 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 avviata 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
twa_launched_successfully flag nelle preferenze condivise. Ciò indica che la TWA è stata avviata correttamente almeno una volta.
L'altro metodo di assistenza, renderOfflineFallback(), mostra una schermata di Android 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();
}
});
}
Per questa demo, abbiamo definito il layout activity_offline_first_twa, che contiene un pulsante per riprovare, che, in 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 di TWA offline first.