오프라인 우선의 신뢰할 수 있는 웹 활동

Demián Renzulli

사용자가 신뢰할 수 있는 웹을 통해 프로그레시브 웹 앱 (PWA)을 처음 실행할 때 활동, 등록 프로세스 이후 서비스 워커를 아직 사용할 수 없습니다. 일어나지 않았습니다. 또한 사용자가 첫 번째 앱을 실행하는 동안 연결되어 있지 않은 경우 맞춤 오프라인 환경 대신 네트워크 오류 페이지가 있습니다.

이 시나리오의 예는 사용자가 PWA를 다운로드한 후 발생할 수 있습니다. 앱을 다운로드할 수 있습니다. 사용자가 파일을 열려고 할 때 인터넷 연결이 끊어지는 경우 서비스를 처음 사용하는 경우에는 아직 서비스 워커를 사용할 수 있습니다 그러면 표준 오류 페이지가 표시되며 부정적인 경험을 초래합니다.

이 가이드에서는 이러한 상황에서 자신의 활동을 표시하는 방법을 신뢰할 수 있는 웹 활동을 시작하기 전에 네트워크 상태를 확인해야 합니다.

참고: 이 가이드의 기본 요건은 신뢰할 수 있는 웹 활동 앱이 있어야 합니다. 있습니다 통합 가이드의 단계를 따릅니다. 를 사용하여 신뢰할 수 있는 웹 활동 기본 프로젝트를 만듭니다.

맞춤 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를 런처로 등록합니다. 활동이며 https://airhorner.com을 URL로 정의합니다. 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();
    }
}

이전 코드는 세 가지 시나리오를 처리합니다.

• 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()는 표시됩니다.

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)을 처음 실행할 때 서비스 워커는 아직 사용할 수 없습니다.
• 사용자가 인터넷에 연결되어 있지 않을 때 표준 오프라인 화면이 표시되지 않도록 하려면 오프라인 상태를 감지하고 대체 오프라인 화면을 표시할 수 있습니다. 하세요.
• 이 가이드에서는 해당 전략을 구현하는 방법을 알아봤습니다. 만약 이 가이드에서 사용한 코드를 확인하는 데 관심이 있다면 오프라인 우선 TWA 데모에서 전체 솔루션을 확인하세요.