وابستگی های Auth خود را سفارشی کنید

طراحی ماژولار Firebase JS SDK به شما کنترل بسیار بیشتری بر نحوه ساخت اپلیکیشن شما می دهد. این انعطاف‌پذیری به شما امکان می‌دهد وابستگی‌های خود را برای پلتفرم خود تنظیم کنید و با حذف ویژگی‌هایی که به آن‌ها نیاز ندارید، اندازه بسته خود را بهینه کنید.

دو راه برای مقداردهی اولیه کتابخانه Auth وجود دارد: تابع getAuth() و تابع initializeAuth() . اولین مورد، getAuth() همه چیزهایی را که برنامه شما به آن نیاز دارد را فراهم می کند تا از تمام ویژگی هایی که کتابخانه Auth ارائه می دهد استفاده کند. نکته منفی این است که کدهای زیادی را وارد می کند که به طور بالقوه توسط برنامه شما استفاده نمی شود. همچنین ممکن است کدی را وارد کند که به سادگی در پلتفرم مورد نظر شما پشتیبانی نمی شود و منجر به خطا می شود. برای جلوگیری از این مشکلات، می توانید از initializeAuth() استفاده کنید که نقشه ای از وابستگی ها را می گیرد. تابع getAuth() به سادگی با تمام وابستگی‌های مشخص‌شده initializeAuth() فراخوانی می‌کند. برای نشان دادن، در اینجا معادل getAuth() در محیط های مرورگر است:

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, browserSessionPersistence, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence, browserSessionPersistence],
  popupRedirectResolver: browserPopupRedirectResolver,
});

خیاطی وابستگی های شما

همه برنامه ها از خانواده توابع signInWithPopup یا signInWithRedirect استفاده نمی کنند. بسیاری از برنامه‌ها به انعطاف‌پذیری که indexedDB ارائه می‌دهد نیازی ندارند، یا به توانایی پشتیبانی از indexedDB و localStorage در صورت در دسترس نبودن نیازی ندارند. در این موارد، getAuth() پیش‌فرض شامل تعداد زیادی کد استفاده نشده است که اندازه باندل را بدون دلیل افزایش می‌دهد. در عوض، این برنامه ها می توانند وابستگی های خود را تنظیم کنند. برای مثال، اگر برنامه شما فقط از احراز هویت پیوند ایمیل استفاده می‌کند و محل ذخیره‌سازی محلی کافی است (به دلیل اینکه از اسکریپت‌های وب یا سرویس‌کار استفاده نمی‌کنید)، می‌توانید با مقداردهی اولیه Auth به این صورت، مقدار زیادی از کد را حذف کنید:

import {initializeAuth, browserLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: browserLocalPersistence,
  // No popupRedirectResolver defined
});

با استفاده از این کد، سه وابستگی بزرگ را که برنامه شما به آن نیازی ندارد، حذف کرده اید، و به طور قابل توجهی میزان پهنای باندی را که کاربران در زمان بازدید از سایت شما استفاده می کنند، کاهش می دهید.

ملاحظات خاص پلت فرم

در بسیاری از موارد، برای جلوگیری از خطا در مقداردهی اولیه، باید وابستگی های Auth را به صورت دستی تعریف کنید. تابع getAuth() یک پلتفرم خاص را فرض می کند. برای نقطه ورودی پیش‌فرض، این یک محیط مرورگر و برای نقطه ورودی Cordova، یک محیط Cordova است. اما گاهی اوقات نیازهای برنامه خاص شما با این مفروضات در تضاد است. برای مثال، برای اسکریپت‌های وب و سرویس‌کار، پیاده‌سازی getAuth() پیش‌فرض کدی را می‌کشد که از شی window می‌خواند، که باعث خطا می‌شود. در این موارد، لازم است وابستگی های خود را تنظیم کنید. کد زیر برای مقداردهی اولیه کتابخانه Auth در زمینه Service Worker مناسب است:

import {initializeAuth, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: indexedDBLocalPersistence,
  // No popupRedirectResolver defined
});

این کد به Auth دستور می دهد تا با پایداری indexedDB (که در زمینه های کارگر موجود است) مقداردهی اولیه کند و وابستگی popupRedirectResolver را حذف می کند، که فرض می کند یک زمینه DOM در دسترس است.

دلایل دیگری وجود دارد که می‌توانید به صورت دستی وابستگی‌ها را بر روی پلتفرم‌های خاصی تعریف کنید. با تعریف فیلد popupRedirectResolver در مقداردهی اولیه Auth، در برخی موارد کتابخانه کارهای اضافی بر روی مقداردهی اولیه انجام می دهد. در مرورگرهای تلفن همراه، کتابخانه به طور خودکار یک iframe را به صورت پیشگیرانه در دامنه Auth شما باز می کند. این کار برای بی‌نظمی کردن تجربه برای اکثر کاربران انجام می‌شود، اما می‌تواند با بارگیری کد اضافی درست هنگام شروع برنامه، بر عملکرد تأثیر بگذارد. این رفتار را می توان با استفاده از initializeAuth() و انتقال دستی وابستگی browserPopupRedirectResolver به توابعی که به آن نیاز دارند اجتناب کرد:

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});

// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);

اگر browserPopupRedirectResolver در وابستگی‌ها برای initializeAuth() ارائه کرده بودیم، پارامتر سوم در فراخوانی signInWithRedirect() مورد نیاز نبود. اما با انتقال مستقیم این وابستگی به فراخوانی signInWithRedirect() ، ضربه عملکرد اولیه در هنگام مقداردهی اولیه حذف می‌شود. معاوضه هایی وجود دارد که با جابجایی وابستگی همراه می شود، اما بخش مهم این است که شما می توانید با مقداردهی اولیه کتابخانه به صورت دستی در مورد آن معاوضه تصمیم گیری کنید.

زمان استفاده از مقداردهی اولیه سفارشی

به طور خلاصه، مقدار دهی اولیه سفارشی به شما کنترل بسیار بیشتری بر استفاده برنامه شما از Auth SDK می دهد. تابع استاندارد getAuth() برای شروع خوب است و بیشتر موارد استفاده را ارائه می دهد. برای اکثر برنامه ها، getAuth() ممکن است تنها چیزی باشد که نیاز دارید. اما دلایل زیادی وجود دارد که ممکن است بخواهید (یا نیاز داشته باشید) به مدیریت وابستگی دستی بروید:

• برای برنامه هایی که اندازه بسته و زمان بارگذاری بسیار مهم است، مقداردهی اولیه Auth سفارشی به طور بالقوه می تواند تعداد زیادی کیلوبایت داده را کاهش دهد. همچنین می تواند زمان بارگذاری اولیه را با انتقال وابستگی ها به زمان استفاده به جای زمان اولیه سازی کاهش دهد.
• برای کدهایی که در زمینه‌های غیر DOM اجرا می‌شوند (مانند وب و سرویس‌دهندگان)، برای جلوگیری از خطا باید initializeAuth() استفاده شود.