用户首次通过 Trusted Web 启动渐进式 Web 应用 (PWA) 时 Activity,Service Worker 自注册过程起尚不可用 尚未开始此外,如果用户在第一个应用期间未连接到网络 网络错误页面 。
例如,在用户下载 PWA 后,可能会发生此场景的示例 。如果用户在尝试打开应用时没有连接 Service Worker 尚不可用于显示 因此是离线后备网页系统会显示标准错误页面 进而导致糟糕的体验
本指南介绍了如何在这种情况下显示您自己的 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 演示中的完整解决方案。