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