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