استخدام Firebase في تطبيق ويب تقدّمي (PWA)

تطبيقات الويب التقدّمية (PWA) هي تطبيقات ويب تتّبع مجموعة من الإرشادات تهدف إلى ضمان حصول المستخدمين على تجربة موثوقة وسريعة وتفاعلية.

تقدّم Firebase العديد من الخدمات التي يمكن أن تساعدك في إضافة ميزات تطبيقات الويب التقدّمية بكفاءة إلى تطبيقك لتلبية العديد من أفضل ممارسات تطبيقات الويب التقدّمية، بما في ذلك:

تقدّم هذه الصفحة نظرة عامة على كيفية مساعدة منصة Firebase في إنشاء تطبيق ويب تقدّمي حديث وعالي الأداء باستخدام Firebase JavaScript SDK المتوافق مع جميع المتصفحات.

يمكنك الانتقال إلى دليل البدء لإضافة Firebase إلى تطبيق الويب.

الأمان والسلامة

من عرض موقعك الإلكتروني إلى تنفيذ عملية مصادقة، من المهم أن يوفّر تطبيق الويب التقدّمي سير عمل آمنًا وموثوقًا.

عرض تطبيق الويب التقدّمي عبر 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 عرض المحتوى الخاص بك عبر شبكة توصيل محتوى عالمية، وهي متوافقة مع بروتوكول 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 ...
});

مرونة الشبكة

قد لا يتوفّر للمستخدمين اتصال موثوق بالإنترنت. يجب أن تتشابه تطبيقات الويب التقدّمية في طريقة عملها مع تطبيقات الأجهزة الجوّالة الأصلية، وأن تعمل بلا اتصال بالإنترنت كلما أمكن ذلك.

الوصول إلى بيانات تطبيقك بلا إنترنت

تتيح 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);
    });