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

Demián Renzulli
Demián Renzulli

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

דוגמה לתרחיש הזה עשויה להתרחש אחרי שהמשתמש מוריד את ה-PWA מחנות Play. אם למשתמש אין קישוריות כשהוא מנסה לפתוח את האפליקציה בפעם הראשונה, ה-Service Worker עדיין לא זמין להצגה לכן את דף הגיבוי אופליין. יוצג דף השגיאה הרגיל, שמובילה לחוויה לא טובה.

TWA אופליין: הדף הרגיל במצב אופליין

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

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

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

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

השלב האחרון הוא להטמיע את השיטות המסייעות שנקראו בקוד הקודם. זה הקוד לבדיקת מצב אופליין 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() אחרי בדיקת החיבור.

twa אופליין – מסך אופליין מותאם אישית

סיכום

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