使用者首次透過受信任的網頁啟動漸進式網頁應用程式 (PWA) Service Worker 在註冊程序期間即將無法使用 還沒有活動。此外,如果使用者在第一個應用程式期間沒有連線 網路錯誤網頁 。
舉例來說,在使用者下載 PWA 後, 。使用者嘗試開啟檔案時沒有連線 首次執行應用程式時,Service Worker 無法顯示 因此促成離線備用網頁系統會顯示標準錯誤頁面 也可能導致不良體驗
本指南將說明在上述情況下,該如何顯示您自己的活動: 啟動「受信任的網路活動」之前,檢查網路的狀態。
建立自訂 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 定義為網址
。
處理離線情況
首先,在 Activity 中覆寫 shouldLaunchImmediately()
方法並
並傳回 false
,這樣信任的網路活動就不會啟動
立即生效您也可以在初次啟動前加入額外檢查:
@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 先前已經啟動,服務工作處理程序就會
,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 目前不提供活動,
- 為了避免在使用者沒有網路連線時顯示標準離線畫面, 您可以偵測離線狀況並顯示備用離線畫面 。
- 在本指南中,您已瞭解如何實作這項策略。如果您是 如果有興趣查看本指南所使用的程式碼,您可以找到 完整解決方案,請參閱離線優先示範影片。