使用者首次透過受信任網路活動啟動漸進式網頁應用程式 (PWA) 時,由於尚未進行註冊程序,未來將無法使用 Service Worker。此外,如果使用者首次啟動應用程式期間沒有連線,而不是自訂離線體驗,系統會顯示網路錯誤頁面。
使用者從 Play 商店下載 PWA 後,可能會發生這種情況。如果使用者首次開啟應用程式時沒有連線,服務工作站將無法顯示離線備用頁面。系統會顯示標準錯誤頁面,並導致不良體驗。
本指南說明如何在啟動「受信任網路活動」前檢查網路狀態,藉此在這種情況下顯示您自己的活動。
建立自訂 LauncherActivity
第一步是建立自訂啟動器活動。這個 Activity
包含離線畫面,用來在使用者首次開啟應用程式時沒有連線。
呼叫 Activity OfflineFirstTWALauncherActivity
,然後將其擴充:com.google.androidbrowserhelper.trusted.LauncherActivity
。
import com.google.androidbrowserhelper.trusted.LauncherActivity;
public class OfflineFirstTWALauncherActivity extends LauncherActivity {
}
接著,在 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 定義為在 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()
,即可直接啟動受信任的網路活動。 - 如果 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()
。
結論
- 使用者首次透過受信任網路活動啟動漸進式網頁應用程式 (PWA) 時,將無法使用 Service Worker。
- 為避免在使用者沒有連線時顯示標準離線畫面,您可以偵測離線條件,並改為顯示備用的離線畫面。
- 在這份指南中,您學到瞭如何實行這項策略。如果有興趣查看我們在本指南中使用的程式碼,請參閱「離線優先 TWA 示範」一文中的完整解決方案。