La prima volta che un utente avvia un'app web progressiva (PWA) tramite Web attendibile Attività, il service worker non sarà ancora disponibile dalla procedura di registrazione non si è ancora verificato. Inoltre, se l'utente non ha connettività durante la prima app anziché l'esperienza offline personalizzata, la pagina di errore di rete come mostrato nell'immagine.
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 prova ad aprire l'app per la prima volta, il service worker non sarà ancora disponibile la pagina di riserva offline. Viene visualizzata la pagina di errore standard generando un'esperienza negativa.
Questa guida spiega come visualizzare la tua attività in questa situazione controllare 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
che conterrà la schermata offline per mostrare se non è disponibile connettività
la prima volta che un utente apre l'app.
Richiama 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 Avvio app
dell'attività e definisce https://airhorner.com come URL
da aprire al momento del lancio della TWA.
Gestire scenari offline
Innanzitutto, nell'attività, sostituisci il metodo shouldLaunchImmediately() e
restituisce 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 verificare lo stato della rete prima della TWA
viene avviato. Aggiungi una chiamata a tryLaunchTwa(), un metodo helper che conterrà
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 avviata in precedenza, il service worker ha
e la PWA potrà rispondere offline. In questo caso,
chiama
launchTwa(), definita nella classe principale, per avviare la Attività web attendibile. - Se la TWA non è stata lanciata in precedenza e l'utente è online, avvia la
Attività web attendibile per la prima volta con
firstTimeLaunchTwa()che implementerai in seguito. - Se la TWA non è ancora stata lanciata e l'utente è offline, esegui il rendering nativo la schermata di riserva offline.
Implementare metodi helper
Il passaggio finale consiste nell'implementare i metodi helper richiamati 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();
}
Successivamente, implementa hasTwaLaunchedSuccessfully(), che controlla se l'utente ha
lanciati 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() dal corso principale e salva il
twa_launched_successfully flag nelle preferenze condivise. Ciò indica che la TWA
sia stato avviato correttamente almeno una volta.
Il metodo helper rimanente, renderOfflineFallback() esegue il rendering di un
schermata 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();
}
});
}
Come dimostra la dimostrazione, abbiamo definito il layout activity_offline_first_twa, che
contiene un pulsante per riprovare, che nel tempo verrà eseguito
firstTimeLaunchTwa() dopo aver controllato la connessione.
Conclusione
- La prima volta che un utente avvia un'app web progressiva (PWA) tramite Web attendibile Nell'attività, il service worker non sarà ancora disponibile.
- Per evitare di mostrare la schermata offline standard se l'utente non dispone di connettività, puoi rilevare la condizione offline e mostrare una schermata offline di riserva .
- In questa guida hai imparato come implementare questa strategia. Se il codice utilizzato in questa guida, troverai la soluzione completa nella prima demo TWA offline.