ครั้งแรกที่ผู้ใช้เปิด Progressive Web App (PWA) ผ่านกิจกรรมเว็บที่เชื่อถือได้ โปรแกรมทำงานของบริการจะไม่พร้อมใช้งานเนื่องจากยังไม่มีขั้นตอนการลงทะเบียน นอกจากนี้ หากผู้ใช้ไม่มีการเชื่อมต่อในระหว่างการเปิดแอปครั้งแรก หน้าข้อผิดพลาดของเครือข่ายจะแสดงขึ้นแทนประสบการณ์แบบออฟไลน์ที่กำหนดเอง
ตัวอย่างสถานการณ์นี้อาจเกิดขึ้นหลังจากที่ผู้ใช้ดาวน์โหลด PWA จาก Play Store หากผู้ใช้ไม่มีการเชื่อมต่อเมื่อพยายามเปิดแอปเป็นครั้งแรก โปรแกรมทำงานของบริการจะยังไม่พร้อมแสดงหน้าสำรองแบบออฟไลน์ หน้าข้อผิดพลาดมาตรฐานจะปรากฏขึ้น ซึ่งนำไปสู่ประสบการณ์ที่ไม่ดี
คู่มือนี้จะอธิบายวิธีแสดงกิจกรรมของคุณเองในสถานการณ์นี้ โดยตรวจสอบสถานะของเครือข่ายก่อนที่จะเปิดใช้งานกิจกรรมบนเว็บที่เชื่อถือได้
สร้าง LauncherActivity ที่กำหนดเอง
ขั้นตอนแรกคือสร้างกิจกรรม 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()
ซึ่งเป็นเมธอดตัวช่วยที่จะมีตรรกะดังนี้
@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();
}
ต่อไป ให้ใช้ 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 ครั้งแรกแบบออฟไลน์