用户首次通过 Trusted Web Activity 启动渐进式 Web 应用 (PWA) 时，Service Worker 尚不可用，因为注册流程尚未开始。此外，如果用户在首次启动应用期间无法连接到网络，系统会显示网络错误页面，而不是自定义离线体验。
用户从 Play 商店下载 PWA 后，可能会发生此场景的示例。因此，如果用户在首次尝试打开应用时没有连接到网络，服务工作器将无法显示离线后备页面。系统会显示标准错误页面，导致用户体验不佳。
本指南介绍了如何在这种情况下，通过在启动可信 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()方法首次启动可信 Web Activity。 - 如果 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()。
总结
- 当用户首次通过可信 Web 活动启动渐进式 Web 应用 (PWA) 时，服务工作器尚不可用。
- 为避免在用户没有连接的情况下显示标准离线屏幕，您可以检测离线状态，并改为显示回退离线屏幕。
- 在本指南中，您学习了如何实施该策略。如果您有兴趣查看本指南中使用的代码，可以参阅“离线优先”TWA 演示版，找到完整的解决方案。