La primera vez que un usuario inicia una app web progresiva (AWP) a través de una Web confiable Actividad, el service worker todavía no estará disponible desde el proceso de registro aún no ocurrió. Además, si el usuario no tiene conectividad durante la primera en lugar de la experiencia personalizada sin conexión, la página de error de red se que se muestra.
Un ejemplo de esta situación podría ocurrir después de que el usuario descarga la AWP en Play Store. Si el usuario no tiene conectividad cuando intenta abrirlo la app por primera vez, el service worker todavía no estará disponible para mostrarlo la página de resguardo sin conexión. Se mostrará la página de error estándar lo que lleva a una mala experiencia.
Esta guía explica cómo mostrar tu propia actividad en esta situación al comprobar el estado de la red antes de iniciar Trusted Web Activity.
Cómo crear una LauncherActivity personalizada
El primer paso es crear una actividad de selector personalizada. Este/a Activity
que contendrá la pantalla sin conexión para mostrar si no hay conectividad
la primera vez que un usuario abre la aplicación.
Llama a Activity OfflineFirstTWALauncherActivity y haz que extienda:
com.google.androidbrowserhelper.trusted.LauncherActivity
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
A continuación, registra la actividad en 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>
El código anterior registra OfflineFirstTWALauncherActivity como selector
actividad y define https://airhorner.com como la URL
para abrir cuando se inicie el TWA.
Controla situaciones sin conexión
Primero, dentro de Activity, anula el método shouldLaunchImmediately() y
Hacer que muestre false para que no se inicie la Actividad web de confianza
de inmediato. También puedes agregar verificaciones adicionales antes del lanzamiento inicial:
@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;
}
Anula el método onCreate() para verificar el estado de la red antes de la TWA.
lanzamiento. Agrega una llamada a tryLaunchTwa(), un método de ayuda que contendrá ese
lógica:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
tryLaunchTwa();
}
Luego, 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();
}
}
El código anterior controla tres situaciones:
- Si el TWA se inició anteriormente, el service worker tiene
se registró y la AWP podrá responder sin conexión. En ese caso,
llama a
launchTwa(), que se define en la clase superior, para iniciar la directamente Actividad web de confianza. - Si la TWA no se ha lanzado anteriormente y el usuario está en línea, inicia el
Actividad web de confianza por primera vez con la
firstTimeLaunchTwa()que implementarás más adelante. - Si aún no se inició el TWA y el usuario no tiene conexión, renderiza el archivo nativo pantalla de resguardo sin conexión.
Implementa métodos auxiliares
El último paso consiste en implementar los métodos auxiliares a los que llamó el código anterior.
Este es el código para verificar el estado sin conexión isOnline():
private boolean isOnline() {
ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}
A continuación, implementa hasTwaLaunchedSuccessfully(), que verifica si el TWA tiene
lanzaron al menos una vez:
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);
}
El código anterior llama a launchTWA() desde la clase superior y guarda el elemento
Marca twa_launched_successfully en las preferencias compartidas. Esto indica que el TWA
se haya lanzado correctamente, al menos, una vez.
renderOfflineFallback(), el método de ayuda restante, renderiza un Android
pantalla sin conexión.
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();
}
});
}
Para su demostración, definimos el diseño activity_offline_first_twa, que
contiene un botón para reintentar, que, a tiempo, se ejecutará
firstTimeLaunchTwa() después de verificar la conexión.
Conclusión
- La primera vez que un usuario inicia una app web progresiva (AWP) a través de una Web confiable Activity, el service worker aún no estará disponible.
- Para evitar que se muestre la pantalla sin conexión estándar si el usuario no tiene conexión, puedes detectar el estado sin conexión y mostrar una pantalla de resguardo sin conexión en su lugar.
- En esta guía, aprendiste a implementar esa estrategia. Si eres en revisar el código que usamos en esta guía, puedes consultar la solución completa en la demostración de TWA de primero sin conexión.