La prima volta che un utente avvia un'app web progressiva (PWA) tramite un'attività web attendibile, il service worker non sarà ancora disponibile in quanto il processo di registrazione non è ancora stato eseguito. Inoltre, se l'utente non dispone di connettività durante il primo avvio dell'app, anziché l'esperienza offline personalizzata, viene mostrata 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 dispone di 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 dell'errore standard, che genera un'esperienza negativa.
Questa guida spiega come visualizzare le tue attività in questa situazione controllando lo stato della rete prima di avviare l'attività web attendibile.
Crea una LauncherActivity personalizzata
Il primo passaggio consiste nel creare un'attività Avvio app personalizzata. Questo Activity
che conterrà la schermata offline per mostrare se non c'è connettività
la prima volta che un utente apre l'app.
Chiama l'attività OfflineFirstTWALauncherActivity e ampliala:
com.google.androidbrowserhelper.trusted.LauncherActivity.
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
Quindi, 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 del TWA.
Gestire scenari offline
Innanzitutto, all'interno dell'attività, sostituisci il metodo shouldLaunchImmediately() e impostalo come valore false, in modo che l'Attività web attendibile non venga avviata immediatamente. Puoi anche aggiungere ulteriori controlli 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;
}
Esegui l'override del metodo onCreate() per controllare lo stato della rete prima del lancio del TWA. Aggiungi una chiamata a tryLaunchTwa(), un metodo helper che conterrà questa logica:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
tryLaunchTwa();
}
Poi, 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 il TWA è stato lanciato in precedenza, il service 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 TWA non è stato lanciato in precedenza e l'utente è online, avvia per la prima volta l'Attività web attendibile utilizzando il metodo
firstTimeLaunchTwa()che implementerai in seguito. - Se TWA non è ancora stato lanciato e l'utente è offline, esegui il rendering della schermata di riserva nativa offline.
Implementare metodi helper
Il passaggio finale consiste nell'implementare i metodi helper richiamati dal codice precedente.
Ecco il codice per verificare 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 verifica se il TWA è stato lanciato 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. Questo indica che il TWA è stato
avviato correttamente, almeno una volta.
Il metodo helper 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, in tempo, eseguirà firstTimeLaunchTwa() dopo aver verificato la connessione.
Conclusione
- La prima volta che un utente avvia un'app web progressiva (PWA) tramite un'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 invece una schermata offline di riserva.
- Con 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.