离线优先的 Trusted Web Activity

Demián Renzulli
Demián Renzulli

用户首次通过 Trusted Web 启动渐进式 Web 应用 (PWA) 时 Activity,Service Worker 自注册过程起尚不可用 尚未开始此外,如果用户在第一个应用期间未连接到网络 网络错误页面 。

例如,在用户下载 PWA 后,可能会发生此场景的示例 。如果用户在尝试打开应用时没有连接 Service Worker 尚不可用于显示 因此是离线后备网页系统会显示标准错误页面 进而导致糟糕的体验

TWA 离线功能:标准的离线网页

本指南介绍了如何在这种情况下显示您自己的 activity: 在启动 Trusted Web Activity 之前检查网络状态。

创建自定义 LauncherActivity

第一步是创建自定义启动器 activity。这部Activity ,其中将包含离线屏幕,以便在没有网络连接时显示 当用户首次打开应用时触发。

调用 activity OfflineFirstTWALauncherActivity,并对其进行扩展: com.google.androidbrowserhelper.trusted.LauncherActivity

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

接下来,在 AndroidManifest.xml 中注册该 activity:

<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 注册为启动器 activity,并将 https://airhorner.com 定义为网址 在 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 之前未启动并且用户已联网,则启动 首次使用 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()

离线模式 - 自定义离线屏幕

总结

  • 用户首次通过 Trusted Web 启动渐进式 Web 应用 (PWA) 时 活动,Service Worker 尚不可用。
  • 为避免在用户没有网络连接时显示标准离线屏幕, 您可以检测离线情况并显示后备离线屏幕 。
  • 在本指南中,您学习了如何实施该策略。如果您 如果您想查看我们在本指南中用到的代码,您可以 离线优先 TWA 演示中的完整解决方案。