שימוש ב-Firebase באפליקציית אינטרנט מתקדמת (PWA)

אפליקציות מסוג Progressive Web App ‏ (PWA) הן אפליקציות אינטרנט שעומדות בקבוצת הנחיות שמטרתן להבטיח שהמשתמשים ייהנו מחוויה מהימנה, מהירה ומרתקת.

פלטפורמת Firebase מציעה כמה שירותים שיכולים לעזור לכם להוסיף לאפליקציה תכונות מתקדמות בצורה יעילה, כדי לעמוד בדרישות של שיטות מומלצות רבות ל-PWA, כולל:

שיטה מומלצת ל-PWA	איך שירותי Firebase יכולים לעזור
שמירה על הבטיחות והאבטחה	‫Firebase Hosting מספקת אישורי SSL ללא עלות לדומיין המותאם אישית ולתת-הדומיין שמוגדר כברירת מחדל ב-Firebase. ‫Firebase Authentication מאפשרת למשתמשים להיכנס לחשבון שלהם במכשירים שונים בצורה מאובטחת. ‫FirebaseUI מטמיע שיטות מומלצות לזרימות אימות.
זמן טעינה מהיר	‫Firebase Hosting תומך ב-HTTP/2 ויכול לשמור במטמון גם את התוכן הסטטי וגם את התוכן הדינמי שלכם ברשת CDN גלובלית. ‫Firebase JavaScript SDK הוא מודולרי, ואפשר לייבא ספריות באופן דינמי כשצריך.
חוסן (resilience) של הרשת	עם Cloud Firestore, אתם יכולים לאחסן נתונים ולגשת אליהם בזמן אמת ובמצב אופליין. ‫Firebase Authentication שומר על מצב האימות של המשתמש, גם במצב אופליין.
הגברת העניין והמעורבות של המשתמשים	‫Firebase Cloud Messaging מאפשרת לכם לשלוח הודעות פוש למכשירים של המשתמשים. עם Cloud Functions for Firebase, אתם יכולים להגדיר אוטומציה של הודעות לעידוד חזרה לשימוש, על סמך אירועים בענן.

בדף הזה מוסבר איך פלטפורמת Firebase יכולה לעזור לכם ליצור PWA מודרני עם ביצועים גבוהים באמצעות Firebase JavaScript SDK חוצה דפדפנים.

כדי להוסיף את Firebase לאפליקציית האינטרנט, אפשר לעיין במדריך לתחילת העבודה.

בטוח ומאובטח

החל מהצגת האתר ועד להטמעה של תהליך אימות, חשוב מאוד ש-PWA יספק תהליך עבודה מאובטח ומהימן.

הצגת PWA באמצעות HTTPS

פרוטוקול HTTPS מגן על תקינות האתר ועל הפרטיות והאבטחה של המשתמשים. חובה להציג PWA באמצעות HTTPS.

‫Firebase Hosting, כברירת מחדל, התוכן של האפליקציה מוגש באמצעות HTTPS. אתם יכולים להציג את התוכן שלכם בתת-דומיין של Firebase ללא עלות או בדומיין מותאם אישית משלכם. שירות האירוח שלנו מקצה אישור SSL לדומיין המותאם אישית שלכם באופן אוטומטי וללא עלות.

כדי ללמוד איך לארח את ה-PWA בפלטפורמת Firebase, אפשר לעיין במדריך לתחילת השימוש ב-Firebase Hosting.

הצעת תהליך אימות מאובטח

‫FirebaseUI מספק תהליך אימות רספונסיבי שניתן להטמעה בקלות, שמבוסס על Firebase Authentication. כך האפליקציה יכולה לשלב תהליך כניסה מתוחכם ומאובטח בלי מאמץ רב. FirebaseUI מותאם באופן אוטומטי לגודל המסך של המכשירים של המשתמשים ומתבסס על שיטות מומלצות לתהליכי אימות.

‫FirebaseUI תומך במספר ספקי כניסה. מוסיפים את FirebaseUI תהליך האימות לאפליקציה בכמה שורות קוד בלבד שמוגדרות לספקי כניסה:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon success
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
};

// Initialize the FirebaseUI widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

מידע נוסף על אפשרויות ההגדרה השונות של FirebaseUI זמין במאמרי העזרה שלנו ב-GitHub.

כניסה של משתמשים לחשבון במכשירים שונים

אם משתמשים ב-FirebaseUI כדי לשלב כניסה בהקשה אחת, האפליקציה יכולה להכניס משתמשים באופן אוטומטי, גם במכשירים שונים שהם הגדירו באמצעות פרטי הכניסה שלהם.

כדי להפעיל כניסה בלחיצה אחת באמצעות FirebaseUI, צריך לשנות שורה אחת בהגדרות:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon success
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
};

מידע נוסף על אפשרויות ההגדרה השונות של FirebaseUI זמין במאמרי העזרה שלנו ב-GitHub.

זמן טעינה מהיר

ביצועים טובים משפרים את חוויית המשתמש, עוזרים לשמר משתמשים ומגדילים את מספר ההמרות. ביצועים טובים, כמו ערכים נמוכים של הצגת התוכן העיקרי (FMP) ושל זמן עד שהאתר אינטראקטיבי (TTI), הם דרישה חשובה לאפליקציות PWA.

הצגת נכסים סטטיים בצורה יעילה

‫Firebase Hosting מציג את התוכן שלכם באמצעות CDN גלובלי ותואם ל-HTTP/2. כשמאחסנים נכסים סטטיים ב-Firebase, אנחנו מגדירים את כל זה בשבילכם – לא צריך לבצע שום פעולה נוספת כדי ליהנות מהשירות הזה.

שמירה של תוכן דינמי במטמון

באמצעות Firebase Hosting, אפליקציית האינטרנט יכולה גם להציג תוכן דינמי שנוצר בצד השרת על ידי Cloud Functions או על ידי אפליקציה מכולה של Cloud Run. באמצעות השירות הזה, אפשר לשמור במטמון את התוכן הדינמי ברשת CDN גלובלית עוצמתית באמצעות שורת קוד אחת:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

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

בתיעוד שלנו מוסבר איך להציג תוכן דינמי (שמופעל על ידי Cloud Functions או Cloud Run) ולהפעיל שמירה במטמון של CDN באמצעות Firebase Hosting.

טעינת שירותים רק כשצריך

אפשר לייבא חלקית את Firebase JavaScript SDK כדי לשמור על גודל ההורדה הראשוני מינימלי. כדאי להשתמש ב-SDK המודולרי הזה כדי לייבא את שירותי Firebase שהאפליקציה שלכם צריכה רק כשצריך אותם.

לדוגמה, כדי לשפר את מהירות הטעינה הראשונית של האפליקציה, אפשר לטעון קודם את Firebase Authentication. אחר כך, כשהאפליקציה צריכה אותם, אפשר לטעון שירותים אחרים של Firebase, כמו Cloud Firestore.

אם משתמשים במנהל חבילות כמו webpack, אפשר קודם לטעון את Firebase Authentication:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

לאחר מכן, כשצריך לגשת לשכבת הנתונים, טוענים את ספריית Cloud Firestore באמצעות ייבוא דינמי:

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

חוסן (resilience) של הרשת

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

גישה לנתוני האפליקציה במצב אופליין

‫Cloud Firestore תומך בשמירת נתונים במצב אופליין, מה שמאפשר לשכבת הנתונים של האפליקציה לפעול בצורה שקופה במצב אופליין. בשילוב עם Service Workers כדי לשמור במטמון את הנכסים הסטטיים, אפליקציית ה-PWA יכולה לפעול באופן מלא אופליין. אפשר להפעיל שמירת נתונים במצב אופליין באמצעות שורת קוד אחת:

firebase.firestore().enablePersistence().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

שמירה על סטטוס האימות במצב אופליין

‫Firebase Authentication שומר מטמון מקומי של נתוני כניסה, כך שמשתמשים שנכנסו לחשבון בעבר יכולים להישאר מאומתים גם כשהם במצב אופליין. הכלי למעקב אחרי מצב הכניסה יפעל כרגיל ויפעיל את הטריגר גם אם המשתמש יטען מחדש את האפליקציה במצב אופליין:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

כדי להתחיל להשתמש ב-Cloud Firestore וב-Firebase Authentication, אפשר לעיין בתיעוד שלנו.

מעורבות המשתמשים

המשתמשים רוצים לדעת מתי אתם משיקים תכונות חדשות באפליקציה, ואתם רוצים לשמור על רמת התעניינות גבוהה של המשתמשים. כדאי להגדיר את ה-PWA כך שיפנה למשתמשים באופן יזום ואחראי.

הצגת התראות פוש למשתמשים

בעזרת Firebase Cloud Messaging, אתם יכולים לשלוח התראות רלוונטיות מהשרת למכשירים של המשתמשים. השירות הזה מאפשר לכם להציג למשתמשים התראות בזמן, גם כשהאפליקציה סגורה.

אוטומציה של עידוד לאינטראקציה חוזרת של משתמשים

באמצעות Cloud Functions for Firebase, אפשר לשלוח למשתמשים הודעות לעידוד מעורבות חוזרת על סמך אירועים בענן, למשל כתיבת נתונים ל-Cloud Firestore או מחיקת חשבון משתמש. אפשר גם לשלוח התראה בנייד למשתמש כשהוא מקבל עוקב חדש:

// Send push notification when user gets a new follower.
exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}')
    .onWrite((change, context) => {
      const userUID = context.params.userUID;
      const followerUID = context.params.followerUID;

      const tokens = getUserDeviceTokens(userUID);
      const name = getUserDisplayName(followerUID);

      // Notification details.
      const payload = {
        notification: {
          title: 'You have a new follower!',
          body: `${name} is now following you.`
        }
      };
      return admin.messaging().sendToDevice(tokens, payload);
    });