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

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

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

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

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

امن و مطمئن

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

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

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

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

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

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

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 بیشتر بدانید.

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

داشتن عملکرد عالی تجربه کاربر را بهبود می بخشد، به حفظ کاربران کمک می کند و تبدیل را افزایش می دهد. عملکرد عالی، مانند "زمان کم برای اولین رنگ معنی دار " و " زمان برای تعامل "، یک نیاز مهم برای 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 ...
});

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

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