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

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

ב-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 לדומיין המותאם אישית שלכם באופן אוטומטי וללא עלות.

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

// 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);
    });