«برنامه‌های وب پیشرو» (PWA) برنامه‌های وبی هستند که از مجموعه‌ای از دستورالعمل‌ها پیروی می‌کنند تا اطمینان حاصل شود که کاربران شما تجربه‌ای قابل‌اعتماد، سریع، و جذاب دارند.
Firebase چندین سرویس ارائه می‌دهد که می‌تواند به شما کمک کند به‌طور مؤثر ویژگی‌های پیش‌رونده را به برنامه‌تان اضافه کنید تا بسیاری از روال‌های مطلوب «برنامه وب پیش‌رونده» را برآورده کنید، ازجمله:
| روال مطلوب «برنامه وب پیشرو» | سرویس‌های Firebase چگونه می‌توانند کمک کنند |
|---|---|
| ایمن و امن |
|
| زمان بار کردن سریع |
|
| تاب‌آوری شبکه |
|
| جذب کاربران |
|
این صفحه نمای کلی از نحوه کمک پلاتفرم Firebase به شما برای ساختن یک PWA مدرن با عملکرد بالا بااستفاده از Firebase JavaScript SDK میان‌مرورگر ما ارائه می‌دهد.
برای افزودن Firebase به برنامه وب خود، راهنمای شروع به کار ما را ببینید.
ایمن و مطمئن
از ارائه سایتتان گرفته تا پیاده‌سازی جریان اصالت‌سنجی، بسیار مهم است که برنامه وب پیشروی شما گردش کار امن و مطمئنی ارائه دهد.
ارائه برنامه وب پیشرو ازطریق HTTPS
HTTPS از یکپارچگی وب‌سایت شما محافظت می‌کند و حریم خصوصی و امنیت کاربران شما را حفظ می‌کند. برنامه‌های وب پیش‌رونده باید ازطریق HTTPS ارائه شوند.
Firebase Hosting، به‌طور پیش‌فرض، محتوای برنامه‌تان را ازطریق HTTPS ارائه می‌دهد. می‌توانید محتوایتان را در زیردامنه Firebase بدون هزینه یا در دامنه سفارشی خودتان ارائه دهید. سرویس میزبانی ما به‌طور خودکار و بدون هزینه، گواهینامه SSL برای دامنه سفارشی شما فراهم می‌کند.
برای آشنایی با نحوه میزبانی برنامه وب پیش‌رونده در پلاتفرم 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);
برای آشنایی بیشتر با گزینه‌های پیکربندی مختلفی که 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 مراجعه کنید.
زمان بار کردن سریع
داشتن عملکرد عالی تجربه کاربری را بهبود می‌بخشد، به حفظ کاربران کمک می‌کند، و تبدیل را افزایش می‌دهد. عملکرد عالی، مثل «زمان تا اولین رنگ‌آمیزی معنی‌دار» و «زمان تا تعاملی شدن» کم، یکی از الزامات مهم برای «برنامه‌های وب پیش‌رونده» است.
دارایی‌های ثابتتان را به‌طور کارآمد ارائه دهید
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 می‌تواند تاحدی وارد شود تا اندازه بارگیری اولیه حداقل باشد. از این کیت توسعه نرم‌افزار واحدی استفاده کنید تا سرویس‌های 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 ... });
تاب‌آوری شبکه
ممکن است کاربران شما دسترسی قابل‌اعتمادی به اینترنت نداشته باشند. برنامه‌های وب پیش‌رونده باید رفتاری مشابه برنامه‌های تلفن همراه بومی داشته باشند و درصورت امکان به‌صورت آفلاین کار کنند.
دسترسی به داده‌های برنامه به‌صورت آفلاین
Cloud Firestore از پایداری داده‌های آفلاین پشتیبانی می‌کند که به لایه داده‌های برنامه‌تان امکان می‌دهد به‌طور شفاف به‌صورت آفلاین کار کند. در ترکیب با Service Workers برای ذخیره کردن دارایی‌های ثابت در حافظه نهان، «برنامه وب پیشرو» شما می‌تواند به‌طور کامل به‌صورت آفلاین کار کند. می‌توانید پایداری داده‌های آفلاین را با یک خط کد فعال کنید:
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، به اسناد ما مراجعه کنید.
جذب کاربران
کاربرانتان می‌خواهند بدانند چه زمانی ویژگی‌های جدیدی برای برنامه‌تان منتشر می‌کنید و شما می‌خواهید تعامل کاربر را بالا نگه دارید. برنامه وب پیشرو خود را راه‌اندازی کنید تا به‌طور فعال و مسئولانه با کاربران خود ارتباط برقرار کنید.
نمایش اعلان‌های لحظه‌ای به کاربران
با 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); });