أنشطة الويب الموثوقة الأولى بلا اتصال بالإنترنت

Demián Renzulli

في المرة الأولى التي يشغِّل فيها المستخدم تطبيق ويب تقدّمي (PWA) عبر الويب الموثوق به نشاط، لن يكون مشغّل الخدمات متاحًا منذ عملية التسجيل لم يتم حدوثها بعد. بالإضافة إلى ذلك، إذا لم يكن لدى المستخدم اتصال أثناء التطبيق الأول صفحة خطأ الشبكة، فبدلاً من التجربة المخصصة بلا اتصال كما هو موضح.

قد يحدث مثال على هذا السيناريو بعد أن ينزّل المستخدم تطبيق الويب التقدّمي (PWA) من "متجر Play". إذا لم يكن لدى المستخدم اتصال عند محاولة فتح التطبيق للمرة الأولى، فلن يكون عامل الخدمة متاحًا لعرض وبالتالي الصفحة الاحتياطية دون اتصال بالإنترنت. فسيتم عرض صفحة الخطأ القياسية، مما يؤدي إلى تجربة سيئة.

يشرح هذا الدليل كيفية عرض نشاطك في هذه الحالة من خلال التحقّق من حالة الشبكة قبل بدء سجلّ "النشاط الموثوق به على الويب".

إنشاء 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()، الذي يتحقّق مما إذا كان "تايوان" تم إطلاقها مرة واحدة على الأقل:

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() تعرض صورة 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() بعد التحقق من الاتصال.

الخاتمة

• في المرة الأولى التي يشغِّل فيها المستخدم تطبيق ويب تقدّمي (PWA) عبر الويب الموثوق به النشاط، لن يكون عامل الخدمات متاحًا بعد.
• لتجنب عرض الشاشة العادية بلا اتصال بالإنترنت إذا لم يكن المستخدم متصلاً بالإنترنت، يمكنك اكتشاف حالة عدم الاتصال بالإنترنت وإظهار شاشة احتياطية بلا اتصال بدلاً من ذلك.
• تعلمت في هذا الدليل كيفية تنفيذ هذه الاستراتيجية. إذا كنت مهتمًا بالتحقق من التعليمات البرمجية التي استخدمناها خلال هذا الدليل، يمكنك العثور على الحل الكامل في العرض التوضيحي لـ First TWA بلا إنترنت.