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 Starten der App keine Verbindung hat, wird anstelle der benutzerdefinierten Offlinefunktionen die Netzwerkfehlerseite angezeigt.
Ein Beispiel für dieses Szenario könnte nach dem Herunterladen der PWA aus dem Play Store auftreten. Wenn der Nutzer beim ersten Öffnen der App keine Internetverbindung hat, kann der Service Worker die Offline-Fallback-Seite daher noch nicht anzeigen. Die Standardfehlerseite wird angezeigt, was zu einer schlechten Nutzererfahrung führt.
In dieser Anleitung wird erläutert, wie Sie in dieser Situation Ihre eigene Aktivität anzeigen können, indem Sie den Status des Netzwerks überprüfen, bevor Sie die vertrauenswürdige Webaktivität starten.
Benutzerdefinierte LauncherActivity erstellen
Der erste Schritt besteht darin, eine benutzerdefinierte Launcher-Aktivität zu erstellen. Diese Activity enthält den Offlinebildschirm, der angezeigt wird, wenn beim ersten Öffnen der App keine Verbindung besteht.
Rufen Sie die Aktivität OfflineFirstTWALauncherActivity auf und erweitern Sie sie:
com.google.androidbrowserhelper.trusted.LauncherActivity.
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
Registrieren Sie die Aktivität dann 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>
Mit dem vorherigen Code wird OfflineFirstTWALauncherActivity als Launcher-Aktivität registriert und https://airhorner.com als URL definiert, die beim Start der TWA geöffnet werden soll.
Offlineszenarien verarbeiten
Überschreiben Sie zuerst in der Aktivität die Methode shouldLaunchImmediately() und lassen Sie sie false zurückgeben, damit die vertrauenswürdige Webaktivität nicht sofort gestartet wird. Sie können vor der Erstveröffentlichung auch 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 die TWA gestartet wird. Fügen Sie einen Aufruf von tryLaunchTwa() hinzu, einer Hilfsmethode, 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 verarbeitet drei Szenarien:
- Wenn die TWA bereits gestartet wurde, wurde der Dienst-Worker registriert und die PWA kann offline antworten. In diesem Fall rufen Sie
launchTwa()auf, das in der übergeordneten Klasse definiert ist, um die vertrauenswürdige Webaktivität direkt zu starten. - Wenn die vertrauenswürdige Web-Aktivität noch nicht gestartet wurde und der Nutzer online ist, starten Sie sie zum ersten Mal mit der
firstTimeLaunchTwa()-Methode, die Sie später implementieren. - Wenn die TWA noch nicht gestartet wurde und der Nutzer offline ist, blende den nativen Offline-Fallback-Bildschirm ein.
Hilfsmethoden implementieren
Im letzten Schritt implementieren Sie die Hilfsmethoden, die vom vorherigen Code aufgerufen werden.
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(), mit dem geprüft wird, ob die 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 freigegebenen Einstellungen gespeichert. Dies bedeutet, dass die TWA mindestens einmal erfolgreich gestartet wurde.
Die verbleibende Hilfsmethode renderOfflineFallback() rendert einen Android-Offlinebildschirm.
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 Layout activity_offline_first_twa definiert, das eine Schaltfläche zum Wiederholen enthält, die nach der Überprüfung der Verbindung rechtzeitig firstTimeLaunchTwa() ausführt.
Fazit
- Wenn ein Nutzer zum ersten Mal eine progressive Web-App (PWA) über vertrauenswürdige Webaktivitäten startet, ist der Service Worker noch nicht verfügbar.
- Wenn Sie verhindern möchten, dass der Standard-Offlinebildschirm angezeigt wird, wenn der Nutzer keine Verbindung hat, können Sie den Offlinestatus erkennen und stattdessen einen Fallback-Offlinebildschirm anzeigen.
- In diesem Leitfaden haben Sie gelernt, wie Sie diese Strategie implementieren. Wenn Sie sich den Code ansehen möchten, den wir in diesem Leitfaden verwendet haben, finden Sie die vollständige Lösung in der Offline First TWA-Demo.