Aktivitas Web Tepercaya yang mula-mula Offline

Demián Renzulli

Saat pertama kali pengguna meluncurkan Progressive Web App (PWA) melalui Web Tepercaya Aktivitas, pekerja layanan belum akan tersedia sejak proses pendaftaran belum dilakukan. Selain itu, jika pengguna tidak memiliki konektivitas saat aplikasi pertama luncurkan, alih-alih pengalaman offline khusus, laman kesalahan jaringan ditampilkan.

Contoh skenario ini mungkin terjadi setelah pengguna mendownload PWA dari Play Store. Jika pengguna tidak memiliki konektivitas saat mencoba membuka aplikasi untuk pertama kalinya, pekerja layanan belum dapat ditampilkan halaman penggantian offline. Halaman {i>standard error<i} akan ditampilkan, yang berujung pada pengalaman buruk.

Panduan ini menjelaskan cara menampilkan aktivitas Anda dalam situasi ini dengan memeriksa status jaringan sebelum meluncurkan Aktivitas Web Tepercaya.

Catatan: Prasyarat untuk panduan ini adalah memiliki aplikasi Aktivitas Web Tepercaya sedang berjalan. Ikuti langkah-langkah dalam Panduan Integrasi untuk membuat project Aktivitas Web Tepercaya dasar.

Membuat LauncherActivity kustom

Langkah pertama adalah membuat aktivitas peluncur kustom. Activity ini yang akan berisi layar offline untuk ditampilkan jika tidak ada konektivitas saat pengguna pertama kali membuka aplikasi.

Panggil Aktivitas OfflineFirstTWALauncherActivity, dan perluas: com.google.androidbrowserhelper.trusted.LauncherActivity.

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Selanjutnya, daftarkan Aktivitas di 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>

Kode sebelumnya mendaftarkan OfflineFirstTWALauncherActivity sebagai peluncur aktivitas dan menentukan https://airhorner.com sebagai URL yang terbuka saat TWA diluncurkan.

Menangani skenario offline

Pertama, di dalam Aktivitas, ganti metode shouldLaunchImmediately() dan membuatnya menampilkan false, sehingga Aktivitas Web Tepercaya tidak akan diluncurkan segera. Anda juga dapat menambahkan pemeriksaan tambahan sebelum peluncuran awal:

@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;
}

Ganti metode onCreate() untuk memeriksa status jaringan sebelum TWA peluncuran. Tambahkan panggilan ke tryLaunchTwa(), metode bantuan yang akan berisi alamat tersebut logika:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    tryLaunchTwa();
}

Berikutnya, implementasikan 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();
    }
}

Kode sebelumnya menangani tiga skenario:

• Jika TWA telah diluncurkan sebelumnya, pekerja layanan telah telah terdaftar, dan PWA akan dapat merespons secara offline. Dalam kasus tersebut, memanggil launchTwa(), yang ditentukan di class induk, untuk meluncurkan Aktivitas Web Tepercaya secara langsung.
• Jika TWA belum diluncurkan sebelumnya dan pengguna sedang online, luncurkan Aktivitas Web Tepercaya untuk pertama kalinya menggunakan firstTimeLaunchTwa() yang akan Anda implementasikan nanti.
• Jika TWA belum diluncurkan dan pengguna sedang offline, render native secara offline.

Mengimplementasikan metode bantuan

Langkah terakhir adalah mengimplementasikan metode helper yang dipanggil oleh kode sebelumnya. Berikut adalah kode untuk memeriksa status offline isOnline():

private boolean isOnline() {
    ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
    NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
    return activeNetworkInfo != null && activeNetworkInfo.isConnected();
}

Selanjutnya, terapkan hasTwaLaunchedSuccessfully(), yang memeriksa apakah TWA memiliki diluncurkan minimal sekali:

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

Kode sebelumnya memanggil launchTWA() dari class induk, dan menyimpan Tanda twa_launched_successfully di preferensi bersama. Hal ini menunjukkan bahwa TWA telah berhasil diluncurkan, setidaknya sekali.

Metode bantuan yang tersisa, renderOfflineFallback(), merender Android layar offline.

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

Dalam demonya, kita telah menentukan tata letak activity_offline_first_twa, yang berisi tombol untuk mencoba lagi, yang pada waktunya akan dieksekusi firstTimeLaunchTwa() setelah memeriksa koneksi.

Kesimpulan

• Saat pertama kali pengguna meluncurkan Progressive Web App (PWA) melalui Web Tepercaya Aktivitas, pekerja layanan belum akan tersedia.
• Agar layar offline standar tidak ditampilkan jika pengguna tidak memiliki konektivitas, Anda dapat mendeteksi kondisi offline dan menampilkan layar offline penggantian sebagai gantinya.
• Dalam panduan ini, Anda telah mempelajari cara menerapkan strategi tersebut. Jika Anda untuk memeriksa kode yang kami gunakan di seluruh panduan ini, Anda dapat menemukan Solusi lengkap dalam Demo TWA Offline Pertama.