استفاده از Firebase در یک برنامه وب پیشرفته (PWA)

برنامه های وب پیشرو (PWA) برنامه های وب هستند که مجموعه ای از دستورالعمل ها را دنبال می کنند تا اطمینان حاصل شود که کاربران شما تجربه ای قابل اعتماد، سریع و جذاب دارند.

Firebase چندین سرویس ارائه می دهد که می تواند به شما کمک کند به طور موثر ویژگی های پیشرو را به برنامه خود اضافه کنید تا با بسیاری از بهترین روش های PWA مطابقت داشته باشید، از جمله:

این صفحه یک نمای کلی از اینکه چگونه پلت فرم Firebase می تواند به شما کمک کند تا با استفاده از Firebase JavaScript SDK بین مرورگر ما، یک PWA مدرن و با کارایی بالا بسازید، ارائه می دهد.

برای افزودن Firebase به برنامه وب خود، از راهنمای شروع ما دیدن کنید.

امن و امان

از ارائه خدمات به سایت شما تا اجرای یک جریان احراز هویت، بسیار مهم است که PWA شما یک گردش کار ایمن و قابل اعتماد ارائه دهد.

PWA خود را از طریق HTTPS ارائه دهید

HTTPS از یکپارچگی وب سایت شما محافظت می کند و از حریم خصوصی و امنیت کاربران شما محافظت می کند. PWA ها باید از طریق HTTPS ارائه شوند.

میزبانی Firebase ، به طور پیش‌فرض، محتوای برنامه شما را از طریق HTTPS ارائه می‌کند. می توانید محتوای خود را در یک زیر دامنه Firebase بدون هزینه یا در دامنه سفارشی خود ارائه دهید. سرویس میزبانی ما یک گواهی SSL برای دامنه سفارشی شما به صورت خودکار و بدون هیچ هزینه ای ارائه می کند.

برای آشنایی با نحوه میزبانی PWA خود در پلتفرم Firebase از راهنمای شروع میزبانی Firebase دیدن کنید.

یک جریان احراز هویت امن ارائه دهید

FirebaseUI یک جریان احراز هویت پاسخ‌گوی کشویی بر اساس احراز هویت Firebase ارائه می‌کند و به برنامه شما اجازه می‌دهد یک جریان ورود به سیستم پیچیده و ایمن را با تلاش کم ادغام کند. 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 دیدن کنید.

زمان بارگذاری سریع

داشتن عملکرد عالی تجربه کاربر را بهبود می بخشد، به حفظ کاربران کمک می کند و تبدیل را افزایش می دهد. عملکرد عالی، مانند "زمان کم برای اولین رنگ معنی دار " و " زمان برای تعامل "، یک نیاز مهم برای PWA ها است.

به دارایی های استاتیک خود به طور موثر خدمت کنید

میزبانی Firebase محتوای شما را از طریق CDN جهانی ارائه می دهد و با HTTP/2 سازگار است. هنگامی که دارایی‌های استاتیک خود را با Firebase میزبانی می‌کنید، ما همه اینها را برای شما پیکربندی می‌کنیم -- برای بهره‌مندی از این سرویس، هیچ کاری اضافی لازم نیست انجام دهید.

محتوای پویا خود را کش کنید

با میزبانی Firebase، برنامه وب شما همچنین می‌تواند محتوای پویا را ارائه دهد که توسط توابع Cloud یا یک برنامه محفظه‌سازی شده در Cloud Run در سمت سرور ایجاد می‌شود. با استفاده از این سرویس، می توانید محتوای پویا خود را در یک CDN جهانی قدرتمند با یک خط کد کش کنید :

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

این سرویس به شما امکان می‌دهد از تماس‌های اضافی با بک‌اند خود اجتناب کنید، سرعت پاسخ‌ها را افزایش دهید و هزینه‌ها را کاهش دهید.

برای آشنایی با نحوه ارائه محتوای پویا (با عملکردهای Cloud یا Cloud Run) و فعال کردن حافظه پنهان CDN با میزبانی Firebase، از اسناد ما دیدن کنید.

خدمات را فقط در صورت نیاز بارگیری کنید

Firebase JavaScript SDK را می توان تا حدی وارد کرد تا حجم دانلود اولیه به حداقل برسد. از این SDK مدولار برای وارد کردن سرویس‌های Firebase که برنامه شما به آن نیاز دارد، فقط در صورت نیاز استفاده کنید.

برای مثال، برای افزایش سرعت رنگ‌آمیزی اولیه برنامه، ابتدا برنامه شما می‌تواند Firebase Authentication را بارگیری کند. سپس، وقتی برنامه شما به آنها نیاز داشت، می‌توانید سایر سرویس‌های Firebase مانند Cloud Firestore را بارگیری کنید.

با استفاده از یک مدیریت بسته مانند webpack، ابتدا می توانید احراز هویت Firebase را بارگیری کنید:

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

حفظ حالت auth آفلاین

احراز هویت 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 برای 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);
    });