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

יישומי אינטרנט מתקדמים (PWAs) הם אפליקציות אינטרנט העוקבות אחר סדרה של הנחיות שנועדו להבטיח שלמשתמשים שלך תהיה חוויה אמינה, מהירה ומרתקת.

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

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

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

בטוח ומאובטח

משירות האתר שלך ועד ליישום זרימת אימות, זה קריטי שה-PWA שלך יספק זרימת עבודה מאובטחת ומהימנה.

שרת את ה-PWA שלך באמצעות HTTPS

HTTPS מגן על שלמות האתר שלך ומגן על הפרטיות והאבטחה של המשתמשים שלך. יש להגיש PWAs דרך 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.

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

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

שרת את הנכסים הסטטיים שלך ביעילות

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-caching עם 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 ...
});

חוסן רשת

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

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

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

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

שמור על מצב אישור במצב לא מקוון

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

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