Informacje o Firebase dla aplikacji internetowych

Tworząc aplikację internetową za pomocą Firebase, możesz napotkać nieznane koncepcje, czyli obszary, w których potrzebujesz więcej informacji, aby podjąć właściwe decyzje. do swojego projektu. Ta strona zawiera odpowiedzi na te pytania i wskazuje znajdziesz więcej informacji.

Jeśli masz pytania dotyczące tematu, który nie został omówiony na tej stronie, odwiedź jedno z naszych społeczności online. Na tej stronie regularnie publikujemy także nowe tematy, aby zajrzyj tu co jakiś czas, by sprawdzić, czy dodaliśmy temat, który Cię interesuje.

Wersje pakietu SDK: z przestrzenią nazw i modułowa

Firebase udostępnia 2 platformy API dla aplikacji internetowych:

  • JavaScript – z przestrzenią nazw. To interfejs JavaScript, jest rentowny od wielu lat i zna dla programistów stron internetowych aplikacji Firebase. Ponieważ interfejs API z przestrzenią nazw nie korzysta z ciągłych działań, obsługi nowych funkcji, większość nowych aplikacji powinna zamiast tego korzystać z modułowego interfejsu API.
  • JavaScript – modułowy. Ten pakiet SDK opiera się na modułowym podejściu, zmniejsza rozmiar pakietu SDK i zwiększa wydajność dzięki nowoczesnemu JavaScriptowi narzędzia do tworzenia, takie jak webpack lub Podsumowanie.

Modułowy interfejs API dobrze integruje się z narzędziami do kompilacji, które wyodrębniają kod, który nie jest jest używany w aplikacji – czyli tzw. „trząsanie drzewa”. Aplikacje utworzone za pomocą tego pakietu SDK znacznie mniejsze ślady użytkowania. Interfejs API z przestrzeni nazw, chociaż dostępny jako nie ma ściśle modułowej struktury i nie zapewnia o takim samym stopniu zmniejszania rozmiaru.

Chociaż większość modułowego interfejsu API przestrzega tych samych wzorców co interfejs API z przestrzenią nazw, sposób organizacji kodu. Ogólnie interfejs API z przestrzenią nazw jest z myślą o przestrzeni nazw i wzorcu usługi, a modułowy interfejs API – w kierunku funkcji dyskretnych. Na przykład łańcuch punktów interfejsu API w przestrzeni nazw, taki jak Funkcja firebaseApp.auth() została zastąpiona w modularnym interfejsie API pojedynczą funkcją getAuth(). które pobiera firebaseApp i zwraca instancję Authentication.

Oznacza to, że aplikacje internetowe utworzone przy użyciu interfejsu API z przestrzenią nazw wymagają refaktoryzacji w celu wykorzystania modułowego projektowania aplikacji; Zobacz przewodnika po uaktualnieniu.

JavaScript – modułowy interfejs API dla nowych aplikacji

Jeśli rozpoczynasz nową integrację z Firebase, możesz zaakceptować modular API, dodaj i zainicjuj pakiet SDK.

Podczas tworzenia aplikacji pamiętaj, że kod jest uporządkowany głównie na temat funkcji. W modularnym interfejsie API usługi są przekazywane jako pierwsze , a funkcja wykorzysta szczegóły usługi do wykonania pozostałych czynności. Przykład:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Więcej przykładów i informacji znajdziesz też w przewodnikach dotyczących poszczególnych kategorii usług znajdziesz w dokumentacji modułowej interfejsu API.

Sposoby dodawania do aplikacji internetowych pakietów SDK

Firebase udostępnia biblioteki JavaScript dla większości usług Firebase, w tym Remote Config, FCM i inne. Jak dodać pakiety SDK Firebase do Aplikacja internetowa zależy od używanego w niej narzędzia (np. modułu podmiot tworzący pakiety).

Możesz dodać dowolną z tych wartości dostępnych bibliotek do aplikacji za pomocą jednej z obsługiwane metody:

  • npm (dla grup pakietów modułów)
  • CDN (sieć dostarczania treści)

Szczegółowe instrukcje konfiguracji znajdziesz w sekcji Dodaj Firebase do aplikacji JavaScript. Pozostała część tej sekcji zawiera informacje ułatwiające wybranie spośród dostępnych opcji.

npm

Pobieram pakiet npm Firebase (obejmuje zarówno przeglądarkę, jak i środowisko Node.js) pakiety) zapewnia lokalną kopię pakietu SDK Firebase, co może być konieczne, w przypadku aplikacji innych niż przeglądarki, np. Node.js, React Native czy Electron. W przypadku niektórych pakietów Node.js i React Native możesz pobrać pakiety Node.js. przesyłek. Pakiety Node.js są niezbędne do renderowania po stronie serwera (SSR) w strukturze SSR.

Używanie npm z modułem tworzenia pakietów modułów takim jak webpack lub Podsumowanie zapewnia optymalizację opcje „tree-shake” i stosuj kierowane kod polyfill, który może znacznie zmniejsza rozmiar aplikacji. Wdrożenie tych funkcji może i zwiększają złożoność konfiguracji i łańcucha tworzenia, ale różne popularne narzędzia wiersza poleceń mogą im pomóc zniwelować ten problem. Narzędzia te to: Angular, Reaguj, Vue, Next i inne.

W skrócie:

  • Zapewnia cenną optymalizację rozmiaru aplikacji
  • Dostępne są zaawansowane narzędzia do zarządzania modułami
  • Wymagane w przypadku SSR z Node.js

CDN (sieć dostarczania treści)

Dodawanie bibliotek przechowywanych w sieci CDN Firebase to prosta metoda konfiguracji pakietu SDK, która może być znana wielu deweloperom. Korzystanie z CDN dodaje pakiety SDK. Nie potrzebujesz narzędzia do tworzenia kompilacji, a łańcuch kompilacji może aby były prostsze i łatwiejsze w pracy w porównaniu z narzędziami do tworzenia pakietów. Jeśli nie martwisz się szczególnie rozmiar zainstalowanej aplikacji i nie mają specjalnych wymagań, takich jak jako transpilacji z TypeScript, warto wybrać CDN.

W skrócie:

  • Znane i proste
  • Odpowiednie, gdy rozmiar aplikacji nie jest poważnym problemem
  • Przydaje się, gdy w Twojej witrynie nie są używane narzędzia do tworzenia kompilacji.

Warianty pakietu SDK Firebase Web SDK

Internetowego pakietu SDK Firebase można używać zarówno w przeglądarkach, jak i aplikacjach węzłów. Jednak niektóre usługi są niedostępne w środowiskach węzłów. Zobacz listę obsługiwanych środowisk.

Niektóre pakiety SDK usług udostępniają osobne wersje przeglądarki i węzła, z których każdy są udostępniane zarówno w formatach ESM, jak i CJS, a niektóre pakiety SDK Wersje natywne Cordova lub React. Pakiet Web SDK jest skonfigurowany tak, aby dostarczać poprawny wariant na podstawie konfiguracji narzędzi lub środowiska i nie powinien wymagają wyboru ręcznego w większości przypadków. Wszystkie warianty pakietu SDK są zaprojektowane do tworzenia aplikacji internetowych lub klienckich na przykład w aplikacji komputerowej Node.js lub aplikacji IoT. Jeśli celem jest skonfigurowanie dostępu administracyjnego ze środowisk o podwyższonym standardzie (takich jak ) za pomocą funkcji Firebase Admin SDK.

Wykrywanie środowiska za pomocą pakietów i platform

Gdy zainstalujesz pakiet Web SDK Firebase przy użyciu npm, JavaScript i Node.js są zainstalowane obie wersje. Pakiet zapewnia szczegółowe wykrywanie środowiska aby włączyć odpowiednie pakiety dla swojej aplikacji.

Jeśli w Twoim kodzie są używane instrukcje require Node.js, pakiet SDK znajdzie w pakiecie. W przeciwnym razie ustawienia dostawcy usług muszą być poprawnie skonfigurowane, aby mogły wykrywać odpowiednie pole punktu wejścia w pliku package.json (np. main, browser lub module). Jeśli podczas działania pakietu SDK wystąpią błędy, sprawdź sprawdź, czy usługa tworząca pakiet jest skonfigurowana tak, aby nadawać priorytet odpowiedniemu typowi pakietu dla Twojego środowiska.

Więcej informacji o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać jej dane Firebase konfiguracji projektu. Konfigurację Firebase możesz uzyskać, .

  • Nie zalecamy ręcznego edytowania obiektu konfiguracyjnego, a zwłaszcza te wymagane „opcje Firebase”: apiKey, projectId i appID. Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami „Opcje Firebase”, użytkownicy Twojej aplikacji mogą napotkać poważne problemy. Wyjątkiem jest authDomain, który można zaktualizować po Sprawdzone metody korzystania z logowania signInWithRedirect

  • Jeśli w projekcie Firebase włączono Google Analytics, konfiguracja obiekt zawiera pole measurementId. Więcej informacji o tym polu znajdziesz w Analytics – pierwsze kroki.

  • Jeśli włączysz usługę Google Analytics lub Realtime Database po utworzeniu w aplikacji internetowej Firebase, sprawdź, czy obiekt konfiguracyjny Firebase, którego używasz w aplikacja zostanie zaktualizowana o powiązane wartości konfiguracyjne (measurementId i databaseURL). Konfigurację Firebase możesz uzyskać, obiektu w w dowolnym momencie.

.

Oto format obiektu konfiguracji z włączonymi wszystkimi usługami (te wartości są wypełniane automatycznie):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Dostępne biblioteki

Dodatkowe opcje konfiguracji

Opóźnienie wczytywania pakietów SDK Firebase (z CDN)

Możesz opóźnić uwzględnienie pakietów SDK Firebase, dopóki na całej stronie wczytano. Jeśli używasz modułowych skryptów CDN w interfejsie <script type="module">, jest to zachowanie domyślne. Jeśli używasz skryptów CDN z przestrzenią nazw jako wykonaj te czynności, by opóźnić wczytywanie:

  1. Dodaj flagę defer do każdego tagu script w przypadku pakietów SDK Firebase, a następnie opóźnij zainicjowanie Firebase za pomocą drugiego skryptu, np.:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Utwórz plik init-firebase.js, a potem umieść w nim te elementy:

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Korzystanie z wielu projektów Firebase w jednej aplikacji

W większości przypadków wystarczy zainicjować Firebase tylko w jednej, domyślnej aplikacji. Dostęp do Firebase możesz uzyskać z tej aplikacji na 2 równoważne sposoby:

Web

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

Czasami trzeba jednak mieć dostęp do wielu projektów Firebase jednocześnie. obecnie się znajdujesz. Możesz np. chcieć odczytać dane z bazy danych jednej Firebase, ale przechowywać pliki w innym projekcie Firebase. Możesz też uwierzytelniać 1 projekt, a drugi pozostawić bez uwierzytelnienia.

Pakiet SDK Firebase JavaScript umożliwia inicjowanie i używanie wielu projektów Firebase w jednej aplikacji jednocześnie, a każdy projekt używa własnej platformy Firebase. informacje o konfiguracji.

Web

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

Uruchamianie lokalnego serwera WWW na potrzeby programowania

Jeśli tworzysz aplikację internetową, niektóre części pakietu SDK Firebase JavaScript wymagają gdy udostępniasz aplikację internetową z serwera, a nie z lokalnego systemu plików. Ty może użyć interfejsu wiersza poleceń Firebase do uruchomienia serwera lokalnego.

Jeśli masz już skonfigurowaną funkcję Firebase Hosting w swojej aplikacji, wykonanie kilku poniższych czynności.

Do udostępniania swojej aplikacji internetowej użyj interfejsu wiersza poleceń Firebase, który jest narzędziem wiersza poleceń.

  1. Zapoznaj się z dokumentacją interfejsu wiersza poleceń Firebase, aby dowiedzieć się, jak zainstaluj interfejs wiersza poleceń lub zaktualizować ją do najnowszej wersji.

  2. Zainicjuj projekt Firebase. Uruchom to polecenie w katalogu głównym lokalnego katalogu aplikacji:

    firebase init

  3. Uruchom serwer lokalny na potrzeby programowania. Użycie to polecenie w katalogu głównym lokalnego katalogu aplikacji:

    firebase serve

Zasoby open source dotyczące pakietów SDK Firebase JavaScript

Firebase wspiera programowanie open source swoje treści i opinie.

Pakiety SDK Firebase JavaScript

Większość pakietów Firebase JavaScript SDK jest opracowywanych jako biblioteki open source dostępne publicznie repozytorium Firebase na GitHubie.

Przykłady krótkiego wprowadzenia

Firebase przechowuje zbiór przykładowych krótkich startów dla większości interfejsów API Firebase w Sieć. Te krótkie wprowadzenia są dostępne publicznie Repozytorium krótkiego wprowadzenia Firebase na GitHubie. Możesz użyć tych krótkich wprowadzeń jako przykładowego kodu do używania pakietów SDK Firebase.