La première fois qu'un utilisateur lance une progressive web app (PWA) via une activité Web de confiance, le service worker n'est pas encore disponible, car le processus d'enregistrement n'a pas encore eu lieu. En outre, si l'utilisateur n'est pas connecté lors du premier lancement de l'application, la page d'erreur réseau s'affiche au lieu de l'expérience hors connexion personnalisée.
Un exemple de ce scénario peut se produire après que l'utilisateur a téléchargé la PWA depuis le Play Store. Si l'utilisateur n'a pas de connexion lorsqu'il tente d'ouvrir l'application pour la première fois, le service worker ne sera donc pas encore disponible pour afficher la page de remplacement hors connexion. La page d'erreur standard s'affiche, ce qui nuit à l'expérience utilisateur.
Ce guide explique comment afficher votre propre activité dans cette situation en vérifiant l'état du réseau avant de lancer l'activité Web sécurisée.
Créer uneLaunchActivity personnalisée
La première étape consiste à créer une activité de lanceur personnalisée. Cet Activity, qui contiendra l'écran hors connexion à afficher en l'absence de connectivité la première fois qu'un utilisateur ouvre l'application.
Appelez l'activité OfflineFirstTWALauncherActivity et faites-la étendre : com.google.androidbrowserhelper.trusted.LauncherActivity.
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
Ensuite, enregistrez l'activité dans 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>
Le code précédent enregistre OfflineFirstTWALauncherActivity en tant qu'activité de lanceur et définit https://airhorner.com comme l'URL à ouvrir au lancement de la TWA.
Gérer les situations hors connexion
Tout d'abord, dans l'activité, remplacez la méthode shouldLaunchImmediately() et faites en sorte qu'elle renvoie false, afin que l'activité Web de confiance ne soit pas lancée immédiatement. Vous pouvez également ajouter des vérifications supplémentaires avant le lancement initial:
@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;
}
Ignorez la méthode onCreate() pour vérifier l'état du réseau avant le lancement de la TWA. Ajoutez un appel à tryLaunchTwa(), une méthode d'assistance contenant cette logique:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
tryLaunchTwa();
}
Implémentez ensuite 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();
}
}
Le code précédent gère trois scénarios:
- Si la TWA a déjà été lancée, le service worker a été enregistré et la PWA pourra répondre hors connexion. Dans ce cas, appelez
launchTwa(), défini dans la classe parente, pour lancer directement l'activité Web de confiance. - Si la TWA n'a pas déjà été lancée et que l'utilisateur est en ligne, lancez l'activité Web de confiance pour la première fois à l'aide de la méthode
firstTimeLaunchTwa()que vous implémenterez ultérieurement. - Si la TWA n'a pas déjà été lancée et que l'utilisateur est hors connexion, affichez l'écran de remplacement natif hors connexion.
Implémenter des méthodes d'assistance
La dernière étape consiste à implémenter les méthodes d'assistance appelées par le code précédent.
Voici le code permettant de vérifier l'état hors connexion de isOnline():
private boolean isOnline() {
ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}
Implémentez ensuite hasTwaLaunchedSuccessfully(), qui vérifie si la TWA s'est lancée au moins une fois:
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);
}
Le code précédent appelle le launchTWA() à partir de la classe parente et enregistre l'option twa_launched_successfully dans les préférences partagées. Cela indique que la TWA a bien été lancée, au moins une fois.
La méthode d'assistance restante, renderOfflineFallback(), affiche un écran Android hors connexion.
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();
}
});
}
Dans sa démonstration, nous avons défini la mise en page activity_offline_first_twa, qui contient un bouton permettant de réessayer et qui, à terme, exécutera firstTimeLaunchTwa() après la vérification de la connexion.
Conclusion
- La première fois qu'un utilisateur lance une progressive web app (PWA) via une activité Web fiable, le service worker n'est pas encore disponible.
- Pour éviter d'afficher l'écran hors connexion standard si l'utilisateur n'est pas connecté, vous pouvez détecter la condition hors connexion et afficher un écran hors connexion de remplacement à la place.
- Dans ce guide, vous avez appris à mettre en œuvre cette stratégie. Si vous souhaitez vérifier le code que nous avons utilisé tout au long de ce guide, vous trouverez la solution complète dans la démonstration TWA hors connexion.