Hoạt động đáng tin cậy trên web ưu tiên ngoại tuyến

Demián Renzulli

Lần đầu tiên người dùng chạy Ứng dụng web tiến bộ (PWA) thông qua Web đáng tin cậy Activity, trình chạy dịch vụ sẽ chưa khả dụng kể từ quá trình đăng ký chưa diễn ra. Ngoài ra, nếu người dùng không kết nối trong ứng dụng đầu tiên khởi chạy, thay vì trải nghiệm ngoại tuyến tuỳ chỉnh, trang lỗi mạng hiển thị.

Một ví dụ về trường hợp này có thể xảy ra sau khi người dùng tải PWA xuống từ Cửa hàng Play. Nếu người dùng không có kết nối khi cố gắng mở ứng dụng lần đầu, nên trình chạy dịch vụ sẽ chưa có mặt để hiển thị trang dự phòng ngoại tuyến. Trang lỗi chuẩn sẽ hiển thị, dẫn đến trải nghiệm không hay.

Hướng dẫn này giải thích cách hiển thị hoạt động của bạn trong tình huống này bằng cách kiểm tra trạng thái mạng trước khi khởi chạy Hoạt động đáng tin cậy trên web.

Tạo một LauncherActivity tuỳ chỉnh

Bước đầu tiên là tạo hoạt động của trình chạy tuỳ chỉnh. Activity này sẽ chứa màn hình ngoại tuyến để hiển thị nếu không có kết nối lần đầu tiên người dùng mở ứng dụng.

Gọi Hoạt động OfflineFirstTWALauncherActivity và mở rộng: com.google.androidbrowserhelper.trusted.LauncherActivity

import com.google.androidbrowserhelper.trusted.LauncherActivity;

public class OfflineFirstTWALauncherActivity extends LauncherActivity {

}

Tiếp theo, hãy đăng ký Hoạt động trong 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>

Mã trước đó đăng ký OfflineFirstTWALauncherActivity làm trình chạy và xác định https://airhorner.com dưới dạng URL để mở khi TWA khởi chạy.

Xử lý tình huống không có mạng

Trước tiên, bên trong Hoạt động, hãy ghi đè phương thức shouldLaunchImmediately() và làm cho hàm trả về false để Hoạt động đáng tin cậy trên web không chạy ngay lập tức. Bạn cũng có thể thêm các bước kiểm tra bổ sung trước lần phát hành đầu tiên:

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

Ghi đè phương thức onCreate() để kiểm tra trạng thái mạng trước TWA khởi chạy. Thêm lệnh gọi vào tryLaunchTwa(), một phương thức trợ giúp chứa nội dung đó logic:

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

Tiếp theo, hãy triển khai 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();
    }
}

Mã trước đó xử lý 3 trường hợp:

• Nếu TWA đã khởi chạy trước đó, trình chạy dịch vụ đã đã được đăng ký và PWA sẽ có thể phản hồi khi không có mạng. Trong trường hợp đó, gọi launchTwa(), được xác định trong lớp mẹ, để khởi chạy Hoạt động đáng tin cậy trên web.
• Nếu TWA chưa từng chạy và người dùng đang trực tuyến, hãy chạy Hoạt động đáng tin cậy trên web lần đầu tiên sử dụng firstTimeLaunchTwa() mà bạn sẽ triển khai sau này.
• Nếu TWA chưa khởi chạy và người dùng đang ngoại tuyến, hãy hiển thị tệp gốc màn hình dự phòng ngoại tuyến.

Triển khai các phương thức trợ giúp

Bước cuối cùng là triển khai các phương thức trợ giúp được gọi theo mã trước đó. Dưới đây là mã để kiểm tra trạng thái ngoại tuyến isOnline():

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

Tiếp theo, hãy triển khai hasTwaLaunchedSuccessfully() để kiểm tra xem TWA có khởi chạy ít nhất một lần:

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

Mã trước đó gọi launchTWA() từ lớp mẹ và lưu twa_launched_successfully gắn cờ trong lựa chọn ưu tiên dùng chung. Điều này cho thấy TWA đã khởi chạy thành công, ít nhất một lần.

Phương thức trợ giúp còn lại, renderOfflineFallback() sẽ kết xuất một Android màn hình ngoại tuyến.

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

Với bản minh hoạ của anh ấy, chúng ta đã xác định bố cục activity_offline_first_twa, chứa nút để thử lại, nút này sẽ thực thi kịp thời firstTimeLaunchTwa() sau khi kiểm tra kết nối.

Kết luận

• Lần đầu tiên người dùng chạy Ứng dụng web tiến bộ (PWA) thông qua Web đáng tin cậy Hoạt động, trình chạy dịch vụ sẽ không có sẵn.
• Để tránh hiển thị màn hình ngoại tuyến tiêu chuẩn nếu người dùng không có kết nối, bạn có thể phát hiện điều kiện ngoại tuyến và hiện màn hình dự phòng ngoại tuyến thay thế.
• Trong hướng dẫn này, bạn đã tìm hiểu cách triển khai chiến lược đó. Nếu bạn muốn kiểm tra mã chúng tôi sử dụng trong suốt hướng dẫn này, bạn có thể tìm thấy giải pháp hoàn chỉnh trong Bản minh hoạ TWA ngoại tuyến đầu tiên.