Vertrauenswürdige Webaktivitäten offline

Demián Renzulli

Wenn ein Nutzer zum ersten Mal eine progressive Web-App (PWA) über das vertrauenswürdige Web startet Aktivität, der Service Worker ist seit dem Registrierungsprozess noch nicht verfügbar hat noch nicht stattgefunden. Wenn der Nutzer während der ersten App keine Internetverbindung hat statt der benutzerdefinierten Offline-Oberfläche, wird die Netzwerkfehlerseite angezeigt.

Ein Beispiel für dieses Szenario könnte eintreten, nachdem der Nutzer die PWA heruntergeladen hat. aus dem Play Store. Wenn der Nutzer beim Öffnen wenn Sie die App zum ersten Mal verwenden, kann der Service Worker noch nicht angezeigt werden. also die Offline-Fallback-Seite. Die Standardfehlerseite wird angezeigt, was zu einer schlechten Erfahrung führt.

In diesem Leitfaden wird erläutert, wie Sie Ihre eigenen Aktivitäten in dieser Situation darstellen können, indem Sie den Netzwerkstatus überprüfen, bevor die Trusted Web-Aktivität gestartet wird.

Benutzerdefinierte LauncherActivity erstellen

Der erste Schritt besteht darin, eine benutzerdefinierte Launcher-Aktivität zu erstellen. Dieses Activity auf dem der Offlinebildschirm angezeigt wird. wenn Nutzende die App zum ersten Mal öffnen.

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>

Mit dem vorherigen Code wird OfflineFirstTWALauncherActivity als Launcher registriert und definiert https://airhorner.com als URL die beim Start der TWA geöffnet werden sollen.

Mit Offlineszenarien umgehen

Überschreiben Sie zuerst in der Aktivität die Methode shouldLaunchImmediately() und false zurückgeben, damit die Trusted Web-Aktivität sofort. Sie können auch vor der Markteinfü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 vor der TWA zu prüfen Markteinführungen. Fügen Sie einen Aufruf zu tryLaunchTwa() hinzu, einer Hilfsmethode, die Folgendes enthält: Logik:

@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();
    }
}

Im vorherigen Code werden drei Szenarien behandelt:

• Wenn die TWA bereits gestartet wurde, hat der Service Worker registriert wurde und die PWA offline antworten kann. In diesem Fall launchTwa(), wie in der übergeordneten Klasse definiert, wird aufgerufen, vertrauenswürdige Webaktivität direkt.
• Wenn die TWA noch nicht gestartet wurde und der Nutzer online ist, starten Sie die Erstmalige Verwendung von firstTimeLaunchTwa() als vertrauenswürdige Webaktivität die Sie später implementieren werden.
• Wenn die TWA noch nicht gestartet wurde und der Nutzer offline ist, rendern Sie die native Anzeige 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(), das prüft, ob die TWA mindestens einmal eingeführt:

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);
}

Der vorherige Code ruft die launchTWA() aus der übergeordneten Klasse auf und speichert die Das Flag twa_launched_successfully in den geteilten Einstellungen. Das bedeutet, dass die TWA erfolgreich eingeführt wurde, mindestens einmal.

Mit der verbleibenden Hilfsmethode, renderOfflineFallback(), rendert oder offline ist.

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 seine Demo haben wir das activity_offline_first_twa-Layout definiert, das enthält eine Schaltfläche zum Wiederholen, mit der nach und nach firstTimeLaunchTwa(), nachdem die Verbindung geprüft wurde.

Fazit

• Wenn ein Nutzer zum ersten Mal eine progressive Web-App (PWA) über das vertrauenswürdige Web startet Aktivität, der Service Worker ist noch nicht verfügbar.
• Um zu vermeiden, dass der standardmäßige Offlinebildschirm angezeigt wird, wenn der Nutzer keine Verbindung hat, gehen Sie so vor: können Sie die Bedingung „Offline“ erkennen und sich einen Fallback-Bildschirm anzeigen lassen, der offline ist. .
• In diesem Leitfaden haben Sie gelernt, wie Sie diese Strategie umsetzen. Wenn Sie den Code zu überprüfen, den wir in diesem Leitfaden verwendet haben, in der Offline First TWA-Demo zur Komplettlösung.