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

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

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

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

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

בטוח ומאובטח

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

הצגת אפליקציית PWA באמצעות HTTPS

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

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

במדריך לתחילת העבודה עם Firebase Hosting מוסבר איך לארח את ה-PWA בפלטפורמת Firebase.

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

‫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);

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

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

אם משתמשים ב-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
};

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

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

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

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

אפשר לייבא חלקית את SDK‏ Firebase JavaScript כדי לשמור על גודל ההורדה הראשוני מינימלי. כדאי להשתמש ב-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 ...
});

חוסן הרשת

יכול להיות שלמשתמשים שלכם אין גישה אמינה לאינטרנט. אפליקציות 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);
    });