ユーザーが信頼できるウェブ アクティビティを介して初めてプログレッシブ ウェブアプリ（PWA）を起動したときは、登録プロセスがまだ実行されていないため、Service Worker はまだ利用できません。また、アプリの初回起動時にユーザーが接続できない場合は、カスタムのオフライン エクスペリエンスではなく、ネットワーク エラーのページが表示されます。
このシナリオの例は、ユーザーが Google Play ストアから PWA をダウンロードした後に発生します。ユーザーがアプリを初めて開こうとしたときに接続がない場合、Service Worker はまだオフライン フォールバック ページを表示できません。標準エラーページが表示され ユーザーエクスペリエンスが低下します
このガイドでは、この状況で、信頼できるウェブ アクティビティを起動する前にネットワークのステータスを確認して、自身のアクティビティを表示する方法について説明します。
カスタム LauncherActivity を作成する
まず、カスタム ランチャー アクティビティを作成します。この 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 をランチャー アクティビティとして登録し、TWA の起動時に開く URL として https://airhorner.com を定義しています。
オフラインのシナリオに対応する
まず、アクティビティ内で 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();
}
}
上記のコードでは、次の 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 が少なくとも 1 回起動したかどうかを確認する hasTwaLaunchedSuccessfully() を実装します。
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() は、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 デモで完全なソリューションを確認できます。