Доверенные веб-действия в автономном режиме

Demián Renzulli

Когда пользователь впервые запускает Progressive Web App (PWA) через Trusted Web Activity, service worker еще не будет доступен, поскольку процесс регистрации еще не состоялся. Кроме того, если у пользователя нет подключения во время первого запуска приложения, вместо пользовательского офлайн-опыта отображается страница сетевой ошибки.

Пример такого сценария может иметь место после того, как пользователь загрузит PWA из Play Store. Если у пользователя нет подключения при первой попытке открыть приложение, service worker еще не будет доступен для отображения резервной страницы офлайн, поэтому. Будет показана стандартная страница ошибки, что приведет к плохому опыту.

В этом руководстве объясняется, как отобразить собственную активность в этой ситуации, проверив состояние сети перед запуском Trusted Web Activity.

Создайте пользовательский LauncherActivity

Первый шаг — создать пользовательскую активность запуска. Эта Activity будет содержать автономный экран, который будет отображаться, если нет подключения при первом открытии приложения пользователем.

Назовите Activity OfflineFirstTWALauncherActivity и сделайте его расширяемым: com.google.androidbrowserhelper.trusted.LauncherActivity .

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Далее зарегистрируйте Activity в 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>

Предыдущий код регистрирует OfflineFirstTWALauncherActivity как действие запуска и определяет https://airhorner.com как URL-адрес, который открывается при запуске TWA.

Обработка офлайн-сценариев

Во-первых, внутри Activity переопределите метод shouldLaunchImmediately() и заставьте его возвращать false , чтобы Trusted Web Activity не запускалась немедленно. Вы также можете добавить дополнительные проверки перед первоначальным запуском:

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

Переопределите метод onCreate() для проверки состояния сети перед запуском TWA. Добавьте вызов tryLaunchTwa() , вспомогательного метода, который будет содержать эту логику:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    tryLaunchTwa();
}

Далее реализуем 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();
    }
}

Предыдущий код обрабатывает три сценария:

• Если TWA был запущен ранее, service worker был зарегистрирован, и PWA сможет ответить в автономном режиме. В этом случае вызовите launchTwa() , определенный в родительском классе, чтобы запустить Trusted Web Activity напрямую.
• Если TWA ранее не запускался и пользователь находится в сети, запустите Trusted Web Activity в первый раз с помощью метода firstTimeLaunchTwa() , который вы реализуете позже.
• Если TWA еще не запущен и пользователь находится в автономном режиме, отобразите собственный резервный экран для автономного режима.

Реализовать вспомогательные методы

Последний шаг — реализовать вспомогательные методы, вызываемые предыдущим кодом. Вот код для проверки офлайн-состояния isOnline() :

private boolean isOnline() {
    ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
    NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
    return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}

Далее реализуем hasTwaLaunchedSuccessfully() , который проверяет, был ли запущен TWA хотя бы один раз:

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

Предыдущий код вызывает launchTWA() из родительского класса и сохраняет флаг twa_launched_successfully в общих настройках. Это указывает на то, что TWA был успешно запущен, по крайней мере один раз.

Оставшийся вспомогательный метод renderOfflineFallback() отображает автономный экран Android.

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

Для его демонстрации мы определили макет activity_offline_first_twa , который содержит кнопку повтора, которая со временем выполнит firstTimeLaunchTwa() после проверки соединения.

Заключение

• При первом запуске пользователем Progressive Web App (PWA) через Trusted Web Activity сервисный работник еще не будет доступен.
• Чтобы избежать отображения стандартного автономного экрана, если у пользователя нет подключения к сети, вы можете определить состояние офлайн и вместо этого отобразить резервный офлайн-экран.
• В этом руководстве вы узнали, как реализовать эту стратегию. Если вам интересно проверить код, который мы использовали в этом руководстве, вы можете найти полное решение в Offline First TWA Demo .