تطبيقات الويب التقدّمية (PWA) هي تطبيقات ويب تتبع مجموعة من الإرشادات المصمّمة لضمان حصول المستخدمين على تجربة موثوقة وسريعة وجذابة.
تقدّم Firebase عدة خدمات يمكن أن تساعدك في إضافة ميزات تقدّمية إلى تطبيقك بكفاءة لتلبية العديد من أفضل ممارسات تطبيقات الويب التقدّمية، بما في ذلك:
| أفضل ممارسات تطبيقات الويب التقدّمية | كيف يمكن أن تساعد خدمات Firebase |
|---|---|
| الأمان والسلامة |
|
| مدّة التحميل السريعة |
|
| القدرة على الصمود في وجه انقطاع الشبكة |
|
| جذب المستخدمين |
|
تقدّم هذه الصفحة نظرة عامة على كيفية مساعدة منصة Firebase في إنشاء تطبيق ويب تقدّمي حديث وعالي الأداء باستخدام حزمة Firebase JavaScript SDK.
يُرجى الانتقال إلى دليل البدء لإضافة Firebase إلى تطبيق الويب.
الأمان والسلامة
من عرض موقعك الإلكتروني إلى تنفيذ عملية مصادقة، من المهم أن يقدّم تطبيق الويب التقدّمي سير عمل آمنًا وموثوقًا به.
عرض تطبيق الويب التقدّمي عبر بروتوكول HTTPS
يحمي بروتوكول HTTPS سلامة موقعك الإلكتروني ويحمي خصوصية المستخدمين وأمانهم. يجب عرض تطبيقات الويب التقدّمية عبر بروتوكول HTTPS.
Firebase Hosting تعرض تلقائيًا محتوى تطبيقك عبر بروتوكول HTTPS. يمكنك عرض المحتوى على نطاق فرعي من Firebase بدون أي تكلفة أو على نطاقك المخصّص. توفّر خدمة الاستضافة شهادة طبقة المقابس الآمنة (SSL) لنطاقك المخصّص تلقائيًا وبدون أي تكلفة.
يُرجى الانتقال إلى دليل البدء في Firebase Hosting للتعرّف على كيفية استضافة تطبيق الويب التقدّمي على منصة 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.
مدّة التحميل السريعة
يؤدي الأداء الممتاز إلى تحسين تجربة المستخدم ويساعد في الاحتفاظ بالمستخدمين وزيادة الإحالات الناجحة. يُعد الأداء الممتاز، مثل " سرعة عرض أوّل محتوى مفيد على الصفحة" و "سرعة الاستعداد للتفاعل"، من المتطلبات المهمة لتطبيقات الويب التقدّمية.
عرض مواد العرض الثابتة بكفاءة
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 ... });
القدرة على الصمود في وجه انقطاع الشبكة
قد لا يتوفّر للمستخدمين اتصال موثوق بالإنترنت. يجب أن تتصرف تطبيقات الويب التقدّمية بشكل مشابه لتطبيقات الأجهزة الجوّالة الأصلية ويجب أن تعمل بلا إنترنت كلما أمكن ذلك.
الوصول إلى بيانات تطبيقك بلا إنترنت
Cloud Firestore تتوافق مع ميزة الاحتفاظ بالبيانات بلا إنترنت ما يسمح لطبقة بيانات تطبيقك بالعمل بلا إنترنت بشكل شفاف. بالإضافة إلى استخدام عاملي الخدمة لتخزين مواد العرض الثابتة مؤقتًا، يمكن أن يعمل تطبيق الويب التقدّمي بشكل كامل بلا إنترنت. يمكنك تفعيل ميزة الاحتفاظ بالبيانات بلا إنترنت باستخدام سطر واحد من الرموز البرمجية:
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.
جذب المستخدمين
يريد المستخدمون معرفة متى تطرح ميزات جديدة لتطبيقك، وتريد أنت الحفاظ على مستوى عالٍ من تفاعل المستخدمين. يمكنك إعداد تطبيق الويب التقدّمي للتواصل مع المستخدمين بشكل استباقي ومسؤول.
عرض إشعارات push للمستخدمين
باستخدام Firebase Cloud Messaging، يمكنك إرسال إشعارات ذات صلة من الخادم إلى أجهزة المستخدمين. تسمح لك هذه الخدمة بعرض إشعارات في الوقت المناسب للمستخدمين حتى عندما يكون التطبيق مغلقًا.
أتمتة إعادة تفاعل المستخدمين
باستخدام Cloud Functions for Firebase، يمكنك إرسال رسائل إعادة التفاعل مع المستخدمين استنادًا إلى الأحداث السحابية، مثل كتابة البيانات في Cloud Firestore أو حذف حساب مستخدم. يمكنك أيضًا إرسال إشعار push إلى مستخدم عندما يحصل على متابع جديد:
// 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); });