Informacje o Firebase dla aplikacji internetowych

Podczas tworzenia aplikacji internetowej za pomocą Firebase możesz napotkać nieznane pojęcia lub obszary, w których przypadku potrzebujesz więcej informacji, aby podejmować właściwe decyzje dotyczące projektu. Na tej stronie znajdziesz odpowiedzi na te pytania lub informacje o miejscach, w których możesz dowiedzieć się więcej.

Jeśli masz pytania na tematy, których nie ma na tej stronie, odwiedź jedną z naszych społeczności online. Będziemy też regularnie aktualizować tę stronę o nowe tematy, więc zaglądaj na nią, aby sprawdzić, czy dodaliśmy temat, który Cię interesuje.

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

Firebase udostępnia 2 interfejsy API do aplikacji internetowych:

  • JavaScript – w przestrzeni nazw. Jest to interfejs JavaScript, który Firebase utrzymuje od wielu lat i jest znany deweloperom stron internetowych korzystającym ze starszych aplikacji Firebase. Interfejs API z przestrzenią nazw nie jest stale aktualizowany o nowe funkcje, dlatego większość nowych aplikacji powinna korzystać z interfejsu API w wersji modułowej.
  • JavaScript – modularny. Ten pakiet SDK opiera się na podejściu modułowym, które zmniejsza jego rozmiar i zwiększa wydajność dzięki nowoczesnym narzędziom do kompilacji JavaScript, takim jak webpack czy Rollup.

Interfejs API w wersji modułowej dobrze integruje się z narzędziami do kompilacji, które usuwają kod, którego nie używasz w aplikacji. Proces ten nazywa się „tree-shaking”. Aplikacje utworzone za pomocą tego pakietu SDK mają znacznie mniejszy rozmiar. Interfejs API w przestrzeni nazw, choć dostępny jest jako moduł, nie ma ściśle modułowej struktury i nie zapewnia takiego samego stopnia zmniejszenia rozmiaru.

Chociaż większość interfejsów API w formie modułów opiera się na tych samych wzorach co interfejsy API w ramach przestrzeni nazw, organizacja kodu jest inna. Ogólnie interfejs API z przestrzenią nazw jest zorientowany na przestrzeń nazw i schemat usługi, a interfejs API z modułami – na funkcje dyskretne. Na przykład w modularnym interfejsie API zastępuje się łańcuch kropek w interfejsie z nazwą przestrzeni nazw, np. firebaseApp.auth(), pojedynczą funkcją getAuth(), która przyjmuje firebaseApp i zwraca instancję Authentication.

Oznacza to, że aplikacje internetowe utworzone przy użyciu interfejsu API z przestrzenią nazw wymagają przebudowy, aby można było z nich korzystać w ramach modułowego projektu aplikacji. Więcej informacji znajdziesz w przewodniku po uaktualnieniu.

JavaScript – modułowy interfejs API dla nowych aplikacji

Jeśli zaczynasz nową integrację z Firebase, możesz włączyć modularne API, gdy dodasz i inicjalizujesz pakiet SDK.

Podczas tworzenia aplikacji pamiętaj, że kod będzie zorganizowany głównie wokół funkcji. W interfejsie API modułowym usługi są przekazywane jako pierwszy argument, a funkcja wykorzystuje szczegóły usługi do wykonania reszty. 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 szczegółowych informacji znajdziesz w przewodnikach dotyczących poszczególnych obszarów usług oraz w dokumentacji referencyjnej interfejsu API.

Sposoby dodawania pakietów SDK do klienta internetowego do aplikacji

Firebase udostępnia biblioteki JavaScripta dla większości usług Firebase, m.in. Remote Config i FCM. Sposób dodawania pakietów SDK Firebase do aplikacji internetowej zależy od narzędzi, których używasz w przypadku aplikacji (np. modułu pakietu).

Do swojej aplikacji możesz dodać dowolną z dostępnych bibliotek, korzystając z jednej z tych metod:

  • npm (do tworzenia pakietów modułów)
  • Sieć dostarczania treści (CDN)

Szczegółowe instrukcje konfiguracji znajdziesz w artykule Dodawanie Firebase do aplikacji JavaScript. Pozostała część tej sekcji zawiera informacje, które pomogą Ci wybrać spośród dostępnych opcji.

npm

Pobieranie pakietu npm Firebase (zawierającego pakiety przeglądarki i Node.js) zapewnia lokalną kopię pakietu SDK Firebase, która może być potrzebna w przypadku aplikacji innych niż przeglądarkowe, takich jak aplikacje Node.js, React Native czy Electron. W przypadku niektórych pakietów w pakietach do pobrania dostępne są opcjonalne pakiety Node.js i React Native. Pakiety Node.js są potrzebne do renderowania po stronie serwera (SSR) w ramach ramek SSR.

Korzystanie z npm w połączeniu z pakietem modułów takim jak webpack lub Rollup zapewnia opcje optymalizacji, które pozwalają na „odchudzanie” nieużywanego kodu i stosowanie ukierunkowanych polyfilli, co może znacznie zmniejszyć rozmiar aplikacji. Wdrożenie tych funkcji może nieco skomplikować konfigurację i łańcuch kompilacji, ale można to zminimalizować, korzystając z popularnych narzędzi wiersza poleceń. Do takich narzędzi należą m.in. Angular, React, Vue, Next.

W skrócie:

  • zapewniają optymalizację rozmiaru aplikacji,
  • Dostępne są solidne narzędzia do zarządzania modułami
  • Wymagany do korzystania z SSR w Node.js

Sieć dostarczania treści (CDN)

Dodawanie bibliotek przechowywanych w sieci CDN Firebase to prosta metoda konfiguracji pakietu SDK, która może być znana wielu deweloperom. Jeśli chcesz dodać SDK-i za pomocą CDN, nie będziesz potrzebować narzędzia do kompilacji, a łańcuch kompilacji może być prostszy i łatwiejszy w użyciu niż w przypadku pakietów modułów. Jeśli nie zależy Ci na rozmiarze zainstalowanej aplikacji i nie masz specjalnych wymagań, takich jak transpilacja z TypeScript, sieć CDN może być dobrym wyborem.

W skrócie:

  • Znajome i proste
  • Odpowiednie, gdy rozmiar aplikacji nie jest głównym problemem
  • Odpowiednia, gdy witryna nie korzysta z narzędzi kompilacji.

Warianty pakietu Firebase Web SDK

Pakiet SDK Firebase Web można używać zarówno w aplikacjach przeglądarkowych, jak i w aplikacjach Node. Niektóre produkty są jednak niedostępne w środowiskach węzłowych. Zobacz listę obsługiwanych środowisk.

Niektóre zestawy SDK usług udostępniają osobne wersje dla przeglądarki i Node.com. Każda z nich jest dostępna w formacie ESM i CJS. Niektóre zestawy SDK usług udostępniają nawet wersje na Cordova lub React Native. Pakiet SDK dla klienta internetowego jest skonfigurowany tak, aby zapewniać odpowiedni wariant na podstawie konfiguracji narzędzi lub środowiska. W większości przypadków nie wymaga ręcznego wyboru. Wszystkie warianty pakietu SDK zostały zaprojektowane w celu ułatwienia tworzenia aplikacji internetowych lub aplikacji klienckich, które będą dostępne dla użytkowników końcowych, np. w postaci aplikacji na komputer z systemem Node.js lub aplikacji IoT. Jeśli chcesz skonfigurować dostęp administracyjny z otoczeń z uprawnieniami (np. serwerów), użyj zamiast tego Firebase Admin SDK.

Wykrywanie środowiska za pomocą pakietów i ramek

Gdy instalujesz pakiet SDK Firebase Web za pomocą npm, są instalowane wersje JavaScript i Node.js. Pakiet zapewnia szczegółowe wykrywanie środowiska, aby włączyć odpowiednie pakiety dla Twojej aplikacji.

Jeśli Twój kod używa instrukcji require w Node.js, pakiet SDK znajdzie pakiet konkretny dla Node. W przeciwnym razie ustawienia pakietu muszą być prawidłowo skonfigurowane, aby wykryć właściwe pole punktu wejścia w pliku package.json (na przykład main, browser lub module). Jeśli wystąpią błędy pakietu SDK w czasie działania, sprawdź, czy pakiet jest skonfigurowany tak, aby nadawać priorytety odpowiedniego typu pakietu w Twoim środowisku.

Więcej informacji o obiekcie konfiguracji Firebase

Aby zainicjować Firebase w aplikacji, musisz podać konfigurację projektu Firebase. Obiekt konfiguracji Firebase możesz pobrać w dowolnym momencie.

  • Nie zalecamy ręcznej edycji obiektu konfiguracji, zwłaszcza tych wymaganych „opcji Firebase”: apiKey, projectId i appID. Jeśli inicjujesz aplikację z nieprawidłowymi wartościami lub bez wymaganych „opcji Firebase”, użytkownicy aplikacji mogą napotkać poważne problemy. Wyjątkiem jest parametr authDomain, który można aktualizować zgodnie ze sprawdzonymi metodami korzystania z funkcji signInWithRedirect.

  • Jeśli w projekcie Firebase masz włączoną funkcję Google Analytics, obiekt config zawiera pole measurementId. Więcej informacji o tym polu znajdziesz na Analyticsstronie z informacjami dla początkujących.

  • Jeśli włączysz opcję Google Analytics lub Realtime Database po utworzeniu aplikacji internetowej Firebase, pamiętaj, aby zaktualizować obiekt konfiguracji Firebase używany w aplikacji za pomocą powiązanych wartości konfiguracji (odpowiednio measurementId i databaseURL). Obiekt konfiguracji Firebase możesz pobrać w dowolnym momencie.

Oto format obiektu konfiguracji ze wszystkimi włączonymi 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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óźnione wczytywanie pakietów SDK Firebase (z CDN)

Możesz opóźnić uwzględnienie pakietów SDK Firebase do momentu załadowania całej strony. Jeśli używasz modułowych skryptów CDN interfejsu API z <script type="module">, jest to zachowanie domyślne. Jeśli używasz skryptów CDN z nazwą przestrzeni nazw jako modułu, wykonaj te czynności, aby opóźnić wczytywanie:

  1. Dodaj do każdego tagu script w pakiecie SDK Firebase flagę defer, a potem odłóż inicjowanie 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 dodaj do niego te informacje:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Korzystanie z kilku projektów Firebase w jednej aplikacji

W większości przypadków wystarczy zainicjować Firebase w jednej, domyślnej aplikacji. W tej aplikacji możesz uzyskać dostęp do Firebase na 2 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 jednak potrzebujesz dostępu do wielu projektów Firebase w tym samym czasie. Możesz na przykład odczytywać dane z bazy danych w jednym projekcie Firebase, ale przechowywać pliki w innym projekcie Firebase. Możesz też uwierzytelnić jeden projekt, a drugi pozostawić bez uwierzytelnienia.

Pakiet SDK Firebase JavaScript umożliwia inicjowanie i jednoczesne używanie wielu projektów Firebase w jednej aplikacji, przy czym każdy z nich korzysta ze swoich własnych informacji konfiguracyjnych Firebase.

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ą, aby aplikacja internetowa była obsługiwana z serwera, a nie z lokalnego systemu plików. Do uruchamiania serwera lokalnego możesz użyć interfejsu wiersza poleceń Firebase.

Jeśli Firebase Hosting została już skonfigurowana w Twojej aplikacji, być może niektóre z podanych niżej czynności zostały już przez Ciebie wykonane.

Aby obsługiwać aplikację internetową, użyjesz wiersza poleceń Firebase, czyli narzędzia wiersza poleceń.

  1. Więcej informacji o instalowaniu interfejsu wiersza poleceń i aktualizowaniu go do najnowszej wersji znajdziesz w dokumentacji Firebase.

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

    firebase init

  3. Uruchom serwer lokalny na potrzeby programowania. Uruchom to polecenie w katalogu głównym lokalnej aplikacji:

    firebase serve

Zasoby typu open source dla pakietów Firebase JavaScript SDK

Firebase obsługuje tworzenie oprogramowania typu open source i zachęcamy do korzystania z usług społeczności oraz do przesyłania opinii.

Pakiety Firebase JavaScript SDK

Większość pakietów SDK Firebase JavaScript jest opracowywana jako biblioteki open source w naszym publicznym repozytorium GitHub Firebase.

Przykłady krótkich wprowadzeń

Firebase udostępnia w sieci zbiór przykładów szybkiego startu dla większości interfejsów API Firebase. Te krótkie przewodniki znajdziesz w publicznym repozytorium GitHub z krótkimi przewodnikami Firebase. Możesz użyć tych samouczków jako przykładowego kodu do korzystania z pakietów SDK Firebase.