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