برنامه‌های وب پیش‌رونده (PWA) برنامه‌های وبی هستند که از مجموعه‌ای از دستورالعمل‌ها پیروی می‌کنند تا اطمینان حاصل شود که کاربران شما یک تجربه قابل اعتماد، سریع و جذاب دارند.
فایربیس سرویس‌های متعددی ارائه می‌دهد که می‌توانند به شما کمک کنند تا ویژگی‌های پیشرفته را به طور مؤثر به برنامه خود اضافه کنید تا بسیاری از بهترین شیوه‌های PWA را رعایت کنید، از جمله:
| بهترین شیوه‌های PWA | چگونه سرویس‌های فایربیس می‌توانند کمک کنند |
|---|---|
| امن و مطمئن |
|
| زمان بارگذاری سریع |
|
| انعطاف‌پذیری شبکه |
|
| کاربران را درگیر کنید |
|
این صفحه مروری بر چگونگی کمک پلتفرم Firebase به شما در ساخت یک PWA مدرن و با کارایی بالا با استفاده از Firebase JavaScript SDK چند مرورگره ما ارائه می‌دهد.
برای افزودن Firebase به برنامه وب خود، از راهنمای شروع به کار ما دیدن کنید.
امن و مطمئن
از ارائه خدمات به سایت شما گرفته تا پیاده‌سازی جریان احراز هویت، بسیار مهم است که PWA شما یک گردش کار امن و قابل اعتماد را فراهم کند.
PWA خود را از طریق HTTPS ارائه دهید
HTTPS از یکپارچگی وب‌سایت شما محافظت می‌کند و از حریم خصوصی و امنیت کاربران شما محافظت می‌کند. PWAها باید از طریق HTTPS ارائه شوند.
Firebase Hosting ، به طور پیش‌فرض، محتوای برنامه شما را از طریق HTTPS ارائه می‌دهد. می‌توانید محتوای خود را در یک زیردامنه رایگان فایربیس یا در دامنه سفارشی خود ارائه دهید. سرویس میزبانی ما به طور خودکار و بدون هیچ هزینه‌ای، گواهی SSL را برای دامنه سفارشی شما فراهم می‌کند.
برای آشنایی با نحوه میزبانی PWA خود در پلتفرم Firebase، به راهنمای شروع به کار Firebase Hosting مراجعه کنید.
ارائه یک جریان احراز هویت امن
FirebaseUI یک جریان احراز هویت واکنش‌گرای drop-in مبتنی بر 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 دیدن کنید.
زمان بارگذاری سریع
داشتن عملکرد عالی، تجربه کاربری را بهبود می‌بخشد، به حفظ کاربران کمک می‌کند و نرخ تبدیل را افزایش می‌دهد. عملکرد عالی، مانند «زمان کم برای اولین نقاشی معنادار » و « زمان کم برای تعامل »، یک الزام مهم برای PWAها است.
دارایی‌های ثابت خود را به طور مؤثر سرویس دهید
Firebase Hosting محتوای شما را از طریق یک CDN جهانی ارائه می‌دهد و با HTTP/2 سازگار است. وقتی دارایی‌های استاتیک خود را با فایربیس میزبانی می‌کنید، ما همه این موارد را برای شما پیکربندی می‌کنیم -- برای استفاده از این سرویس نیازی به انجام هیچ کار اضافی ندارید.
محتوای پویای خود را ذخیره کنید
با استفاده از 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 ، به مستندات ما مراجعه کنید.
سرویس‌ها را فقط زمانی که مورد نیاز هستند بارگذاری کنید
می‌توان کیت توسعه نرم‌افزار JavaScript Firebase JavaScript SDK) را تا حدی وارد کرد تا حجم اولیه دانلود حداقل بماند. از این کیت توسعه نرم‌افزار ماژولار برای وارد کردن سرویس‌های فایربیس مورد نیاز برنامه‌تان فقط در مواقع ضروری استفاده کنید.
برای مثال، برای افزایش سرعت اولیه‌ی رسم برنامه، برنامه‌ی شما می‌تواند ابتدا 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 های پویا بارگذاری کنید:
import('firebase/firestore').then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
انعطاف‌پذیری شبکه
ممکن است کاربران شما به اینترنت دسترسی مطمئنی نداشته باشند. PWAها باید رفتاری مشابه برنامه‌های بومی موبایل داشته باشند و تا حد امکان به صورت آفلاین نیز کار کنند.
دسترسی به داده‌های برنامه به صورت آفلاین
Cloud Firestore از ماندگاری داده‌های آفلاین پشتیبانی می‌کند که به لایه داده برنامه شما امکان می‌دهد به صورت شفاف آفلاین کار کند. در ترکیب با Service Workerها برای ذخیره سازی دارایی‌های استاتیک شما ، 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); });