オフラインファーストの信頼できるウェブアクティビティ

ユーザーが信頼できるウェブ経由でプログレッシブ ウェブアプリ(PWA)を初めて起動したとき Activity の場合、登録プロセス以降、Service Worker はまだ利用できません。 まだ行われていません。また、最初のアプリの使用中にユーザーが接続できない場合 カスタムのオフライン エクスペリエンスではなく、起動時に表示される 表示されます。

このシナリオの例は、ユーザーが PWA をダウンロードした後になる場合があります。 ダウンロードしてください。開こうとしたときに接続できない場合 初めて起動する場合、Service Worker はまだ表示されません。 オフラインの代替ページが使用されます標準のエラーページが表示されます 好ましくありません

TWA オフライン: 標準的なオフライン ページ

このガイドでは、このような状況で自分のアクティビティを表示する方法について説明します。 信頼できるウェブ アクティビティを起動する前に、ネットワークのステータスを確認する。

カスタム 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 をランチャーとして登録しています。 アクティビティの URL として https://airhorner.com を定義します。 TWA を起動すると開きます。

オフラインのシナリオに対応する

まず、アクティビティ内で 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();
    }
}

上記のコードでは、次の 3 つのシナリオに対処します。

  • 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();
}

次に、TWA が動作しているかどうかを確認する hasTwaLaunchedSuccessfully() を実装します。 少なくとも 1 回起動:

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 が 少なくとも 1 回正常に起動している必要があります

残りのヘルパー メソッドである renderOfflineFallback() は、 クリックします。

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()

twa offline - カスタムのオフライン画面

まとめ

  • ユーザーが信頼できるウェブ経由でプログレッシブ ウェブアプリ(PWA)を初めて起動したとき Service Worker はまだ利用できません。
  • ユーザーが接続できない場合に標準のオフライン画面が表示されないようにするには、 オフライン状態を検出してオフラインの代替画面を表示できます してください。
  • このガイドでは、その戦略を実装する方法を学習しました。もし このガイドで使用したコードの確認に興味がある場合は、 Offline First TWA Demo でソリューション全体を確認してください。