פעילויות אינטרנט מהימנות במקום הראשון

Demián Renzulli

בפעם הראשונה שמשתמש מפעיל Progressive Web App (PWA) דרך פעילות אינטרנט מהימנה, קובץ השירות (service worker) עדיין לא יהיה זמין כי תהליך הרישום עוד לא בוצע. בנוסף, אם למשתמש אין קישוריות במהלך השקת האפליקציה הראשונה, יופיע דף שגיאת הרשת במקום בחוויה המותאמת אישית של מצב אופליין.

דוגמה לתרחיש כזה יכולה להתרחש אחרי שהמשתמש יוריד את ה-PWA מחנות Play. לכן, אם למשתמש אין קישוריות כשהוא מנסה לפתוח את האפליקציה בפעם הראשונה, קובץ השירות (service worker) עדיין לא יהיה זמין להצגת דף הגיבוי הלא מקוון. יוצג דף השגיאה הרגיל, מה שיוביל לחוויית משתמש גרועה.

מדריך זה מסביר איך להציג את הפעילות שלכם במצב כזה, על ידי בדיקת הסטטוס של הרשת לפני הפעלת הפעילות המהימנה באינטרנט.

שימו לב: אחת הדרישות המוקדמות של המדריך היא להפעיל את האפליקציה 'פעילות באינטרנט' בצורה מהימנה. בצעו את השלבים המפורטים במדריך השילוב כדי ליצור פרויקט בסיסי של פעילות מהימנה באינטרנט.

יצירה של פעילות מרכז אפליקציות בהתאמה אישית

השלב הראשון הוא יצירת פעילות מותאמת אישית במרכז האפליקציות. 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(), שמוגדרת במחלקת ההורה, כדי להפעיל ישירות את הפעילות Trusted Web.
• אם ה-TWA לא הושק בעבר והמשתמש מחובר לאינטרנט, מפעילים את ההגדרה Trusted Web Activity בפעם הראשונה באמצעות השיטה firstTimeLaunchTwa() שאותה תטמיעו מאוחר יותר.
• אם TWA עדיין לא הופעל והמשתמש במצב אופליין, צריך לעבד את מסך הגיבוי המקורי של מצב אופליין.

הטמעה של שיטות עזר

השלב האחרון הוא ליישם את השיטות המסייעות שנקראו על ידי הקוד הקודם. זה הקוד לבדיקת מצב אופליין isOnline():

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

בשלב הבא, מטמיעים את hasTwaLaunchedSuccessfully(), שבודק אם ה-TWA הופעל פעם אחת לפחות:

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() לאחר בדיקת החיבור.

סיכום

• בפעם הראשונה שמשתמש מפעיל Progressive Web App (PWA) דרך פעילות אינטרנט מהימנה, קובץ השירות (service worker) עדיין לא יהיה זמין.
• על מנת להימנע מהצגת המסך הרגיל של מצב אופליין אם למשתמש אין קישוריות, אפשר לזהות את התנאי של מצב אופליין ולהציג במקום זאת מסך חלופי למצב אופליין.
• במדריך הזה למדתם איך ליישם את האסטרטגיה הזו. אם אתם מעוניינים לבדוק את הקוד שבו השתמשנו במדריך הזה, תוכלו למצוא את הפתרון המלא בהדגמה של נתוני ה-TWA הראשונים במצב אופליין.