離線優先信任網路活動

Demián Renzulli

使用者首次透過受信任網路活動啟動漸進式網頁應用程式 (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 示範」一文中的完整解決方案。