Wenn ein Nutzer zum ersten Mal eine progressive Web-App (PWA) über eine vertrauenswürdige Webaktivität startet, ist der Service Worker noch nicht verfügbar, da der Registrierungsprozess noch nicht stattgefunden hat. Wenn der Nutzer beim ersten Start der App keine Verbindung hat, wird anstelle des benutzerdefinierten Offlinemodus eine Netzwerkfehlerseite angezeigt.
Ein Beispiel für dieses Szenario könnte eintreten, nachdem der Nutzer die PWA aus dem Play Store heruntergeladen hat. Wenn der Nutzer beim ersten Öffnen der App keine Verbindung hat, kann der Service Worker die Offline-Fallback-Seite daher noch nicht anzeigen. Die standardmäßige Fehlerseite wird angezeigt, was zu einer schlechten Nutzererfahrung führt.
In diesem Leitfaden wird erläutert, wie du deine eigene Aktivität in dieser Situation anzeigen kannst. Dazu solltest du den Status des Netzwerks prüfen, bevor du die Trusted Web Activity-Methode startest.
Benutzerdefinierte LauncherActivity erstellen
Im ersten Schritt erstellen Sie eine benutzerdefinierte Launcher-Aktivität. Activity, der den Offlinebildschirm enthält, der angezeigt wird, wenn beim ersten Öffnen der App keine Verbindung besteht.
Rufen Sie die Aktivität OfflineFirstTWALauncherActivity auf und legen Sie fest, dass sie erweitert wird:
com.google.androidbrowserhelper.trusted.LauncherActivity.
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
Registrieren Sie als Nächstes die Aktivität 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>
Der vorherige Code registriert OfflineFirstTWALauncherActivity als Launcher-Aktivität und definiert https://airhorner.com als die URL, die beim Start der TWA geöffnet werden soll.
Offlineszenarien verarbeiten
Überschreiben Sie zuerst in der Activity-Klasse die Methode shouldLaunchImmediately() und geben Sie false zurück, damit die vertrauenswürdige Web-Aktivität nicht sofort gestartet wird. Sie können auch vor der Einführung zusätzliche Prüfungen hinzufügen:
@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;
}
Überschreiben Sie die Methode onCreate(), um den Netzwerkstatus zu prüfen, bevor der TWA gestartet wird. Fügen Sie einen Aufruf der Hilfsmethode tryLaunchTwa() hinzu, die diese Logik enthält:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
tryLaunchTwa();
}
Implementieren Sie als Nächstes 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();
}
}
Der vorherige Code behandelt drei Szenarien:
- Wenn die TWA bereits gestartet wurde, ist der Service Worker registriert und die PWA kann offline antworten. Rufen Sie in diesem Fall
launchTwa()auf, der in der übergeordneten Klasse definiert ist, um die vertrauenswürdige Webaktivität direkt zu starten. - Wenn die TWA noch nicht gestartet wurde und der Nutzer online ist, starten Sie die vertrauenswürdige Webaktivität zum ersten Mal mit der Methode
firstTimeLaunchTwa(), die Sie später implementieren. - Wenn die TWA noch nicht gestartet wurde und der Nutzer offline ist, rendern Sie den nativen Offline-Fallback-Bildschirm.
Hilfsmethoden implementieren
Im letzten Schritt implementieren Sie die vom vorherigen Code aufgerufenen Hilfsmethoden.
Hier ist der Code zum Prüfen des Offlinestatus isOnline():
private boolean isOnline() {
ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}
Implementieren Sie als Nächstes hasTwaLaunchedSuccessfully(), um zu prüfen, ob der TWA mindestens einmal gestartet wurde:
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);
}
Mit dem vorherigen Code wird das launchTWA() aus der übergeordneten Klasse aufgerufen und das Flag twa_launched_successfully in den gemeinsamen Einstellungen gespeichert. Dies zeigt an, dass die TWA mindestens einmal erfolgreich gestartet wurde.
Mit der verbleibenden Hilfsmethode renderOfflineFallback() wird ein Android-Offlinebildschirm gerendert.
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();
}
});
}
Für diese Demo haben wir das activity_offline_first_twa-Layout definiert. Es enthält eine Schaltfläche zum Wiederholen, mit der firstTimeLaunchTwa() rechtzeitig nach Überprüfung der Verbindung ausgeführt wird.
Fazit
- Wenn ein Nutzer zum ersten Mal eine progressive Web-App (PWA) über die vertrauenswürdige Webaktivität startet, ist der Service Worker noch nicht verfügbar.
- Damit der Standard-Offlinebildschirm nicht angezeigt wird, wenn der Nutzer keine Verbindung hat, können Sie die Offlinebedingung erkennen und stattdessen einen Fallback-Offlinebildschirm anzeigen.
- In diesem Leitfaden haben Sie gelernt, wie Sie diese Strategie umsetzen. Wenn Sie den Code prüfen möchten, den wir in diesem Leitfaden verwendet haben, finden Sie die vollständige Lösung in der Offline First TWA-Demo.