שימוש ב-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);

מידע נוסף על אפשרויות ההגדרה השונות שמוצעות על ידי 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 ...
});

חוסן הרשת

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