กิจกรรมบนเว็บที่เชื่อถือได้ซึ่งออฟไลน์เป็นอันดับหนึ่ง

Demián Renzulli

ครั้งแรกที่ผู้ใช้เปิด Progressive Web App (PWA) ผ่านเว็บที่เชื่อถือได้ กิจกรรม โปรแกรมทำงานของบริการจะยังไม่พร้อมใช้งานตั้งแต่ขั้นตอนการลงทะเบียน ยังไม่เกิดขึ้น นอกจากนี้ หากผู้ใช้ไม่ได้เชื่อมต่ออินเทอร์เน็ตในแอปแรก การเปิด แทนที่จะเป็นประสบการณ์ออฟไลน์ที่กำหนดเอง หน้าข้อผิดพลาดของเครือข่ายจะเป็น แสดงอยู่

ตัวอย่างสถานการณ์นี้อาจเกิดขึ้นหลังจากที่ผู้ใช้ดาวน์โหลด PWA จาก Play Store หากผู้ใช้ไม่มีการเชื่อมต่อเมื่อพยายามเปิด ใช้แอปเป็นครั้งแรก โปรแกรมทำงานของบริการจะยังไม่พร้อมใช้งาน หน้าสำรองแบบออฟไลน์ด้วย หน้าข้อผิดพลาดมาตรฐานจะแสดงขึ้น ทำให้เกิดประสบการณ์การใช้งาน ที่ไม่ดี

คู่มือนี้จะอธิบายวิธีแสดงกิจกรรมของคุณเองในสถานการณ์นี้โดย ตรวจสอบสถานะของเครือข่ายก่อนเปิดใช้งานกิจกรรมบนเว็บที่เชื่อถือได้

สร้างกิจกรรม Launcher ที่กำหนดเอง

ขั้นตอนแรกคือการสร้างกิจกรรมของ Launcher ที่กำหนดเอง 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 เป็น Launcher กิจกรรม และระบุ 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() ซึ่งเป็นเมธอด Help ที่จะมีการเรียก ตรรกะ:

@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 ได้เปิดตัวไปก่อนหน้านี้ โปรแกรมทำงานของบริการจะ ได้รับการลงทะเบียนแล้ว และ PWA จะสามารถตอบกลับแบบออฟไลน์ ในกรณีดังกล่าว เรียก launchTwa() ที่กำหนดในชั้นเรียนระดับบนสุดเพื่อเปิด กิจกรรมบนเว็บที่เชื่อถือได้โดยตรง
• หาก TWA ยังไม่เปิดตัวก่อนหน้านี้และผู้ใช้ออนไลน์อยู่ ให้เรียกใช้ กิจกรรมบนเว็บที่เชื่อถือได้เป็นครั้งแรกโดยใช้ firstTimeLaunchTwa() ที่คุณจะนำมาใช้ในภายหลังได้
• หาก TWA ยังไม่เปิดตัวและผู้ใช้ออฟไลน์อยู่ ให้แสดงผลโฆษณาเนทีฟ หน้าจอสำรองแบบออฟไลน์

ใช้เมธอดของ Helper

ขั้นตอนสุดท้ายคือการใช้เมธอด Helper ที่โค้ดก่อนหน้านี้เรียก นี่คือโค้ดสำหรับการตรวจสอบสถานะออฟไลน์ isOnline():

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

ต่อไป ให้ใช้ hasTwaLaunchedSuccessfully() ซึ่งจะตรวจสอบว่า TWA มี เปิดตัวอย่างน้อย 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() จะแสดงผล 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()หลังจากตรวจสอบการเชื่อมต่อ

บทสรุป

• ครั้งแรกที่ผู้ใช้เปิด Progressive Web App (PWA) ผ่านเว็บที่เชื่อถือได้ กิจกรรม โปรแกรมทำงานของบริการจะยังไม่พร้อมใช้งาน
• เพื่อหลีกเลี่ยงการแสดงหน้าจอออฟไลน์มาตรฐานในกรณีที่ผู้ใช้ไม่มีการเชื่อมต่อ คุณจะสามารถตรวจหาเงื่อนไขออฟไลน์ และแสดงหน้าจอสำรองแบบออฟไลน์ แทน
• ในคู่มือนี้คุณได้เรียนรู้วิธีนำกลยุทธ์ดังกล่าวไปใช้ หากคุณ หากสนใจที่จะตรวจสอบโค้ดที่เราใช้ตลอดทั้งคู่มือนี้ คุณสามารถดู โซลูชันที่สมบูรณ์ได้ในการสาธิต TWA แบบออฟไลน์ครั้งแรก