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

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

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

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

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

آمن ومضمون

بدءًا من خدمة موقعك وحتى تنفيذ تدفق المصادقة، من المهم أن توفر PWA لديك سير عمل آمنًا وموثوقًا.

خدمة PWA الخاصة بك عبر HTTPS

يحمي HTTPS سلامة موقع الويب الخاص بك ويحمي خصوصية المستخدمين وأمانهم. يجب تقديم خدمات PWA عبر HTTPS.

تقدم استضافة Firebase ، افتراضيًا، محتوى تطبيقك عبر HTTPS. يمكنك تقديم المحتوى الخاص بك على نطاق فرعي مجاني لـ Firebase أو على نطاقك المخصص . توفر خدمة الاستضافة لدينا شهادة SSL لنطاقك المخصص تلقائيًا وبدون أي تكلفة.

تفضل بزيارة دليل البدء لاستضافة Firebase للتعرف على كيفية استضافة PWA على منصة Firebase.

تقديم تدفق مصادقة آمن

يوفر FirebaseUI تدفق مصادقة سريع الاستجابة يعتمد على مصادقة Firebase ، مما يسمح لتطبيقك بدمج تدفق تسجيل دخول متطور وآمن بجهد منخفض. يتكيف 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.

وقت تحميل سريع

يؤدي الحصول على أداء رائع إلى تحسين تجربة المستخدم، ويساعد في الاحتفاظ بالمستخدمين، ويزيد من التحويلات. يعد الأداء الرائع، مثل "الوقت المنخفض لأول طلاء ذي معنى " و" الوقت التفاعلي "، متطلبًا مهمًا لـ PWAs.

خدمة الأصول الثابتة الخاصة بك بكفاءة

تخدم استضافة Firebase المحتوى الخاص بك عبر شبكة CDN عالمية وهي متوافقة مع HTTP/2. عند استضافة أصولك الثابتة باستخدام Firebase، نقوم بتهيئة كل هذا نيابةً عنك - ليس هناك أي شيء إضافي يتعين عليك القيام به للاستفادة من هذه الخدمة.

قم بتخزين المحتوى الديناميكي الخاص بك مؤقتًا

باستخدام استضافة Firebase، يمكن لتطبيق الويب الخاص بك أيضًا تقديم محتوى ديناميكي تم إنشاؤه من جانب الخادم بواسطة Cloud Functions أو تطبيق Cloud Run المعبأ في حاوية . باستخدام هذه الخدمة، يمكنك تخزين المحتوى الديناميكي الخاص بك مؤقتًا على شبكة CDN عالمية قوية باستخدام سطر واحد من التعليمات البرمجية:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

تتيح لك هذه الخدمة تجنب المكالمات الإضافية إلى الواجهة الخلفية لديك، وتسريع الاستجابات، وخفض التكاليف.

قم بزيارة وثائقنا لمعرفة كيف يمكنك تقديم المحتوى الديناميكي (المدعوم بواسطة Cloud Functions أو Cloud Run) وتمكين التخزين المؤقت لـ CDN باستخدام استضافة Firebase.

قم بتحميل الخدمات فقط عند الحاجة إليها

يمكن استيراد Firebase JavaScript SDK جزئيًا للحفاظ على الحد الأدنى لحجم التنزيل الأولي. استفد من حزمة SDK المعيارية هذه لاستيراد خدمات Firebase التي يحتاجها تطبيقك فقط عند الحاجة إليها.

على سبيل المثال، لزيادة سرعة الطلاء الأولية لتطبيقك، يمكن لتطبيقك أولاً تحميل Firebase Authentication . بعد ذلك، عندما يحتاج تطبيقك إليها، يمكنك تحميل خدمات Firebase الأخرى، مثل Cloud Firestore .

باستخدام مدير الحزم مثل حزمة الويب، يمكنك أولاً تحميل مصادقة Firebase:

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 بذاكرة تخزين مؤقت محلية لبيانات تسجيل الدخول، مما يسمح للمستخدم الذي قام بتسجيل الدخول مسبقًا بالبقاء مصادقًا عليه حتى عندما يكون غير متصل بالإنترنت. سيعمل مراقب حالة تسجيل الدخول بشكل طبيعي ويتم تشغيله حتى إذا قام المستخدم بإعادة تحميل التطبيق أثناء عدم الاتصال بالإنترنت:

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 أو حذف حساب المستخدم . يمكنك أيضًا إرسال إشعار دفع إلى المستخدم عندما يحصل هذا المستخدم على متابع جديد :

// 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);
    });