Informacje o Firebase dla aplikacji internetowych

Podczas tworzenia aplikacji internetowej za pomocą Firebase możesz napotkać nieznane Ci koncepcje lub obszary, w których potrzebujesz więcej informacji, aby podjąć właściwe decyzje dotyczące projektu. Na tej stronie postaramy się odpowiedzieć na te pytania i wskazać źródła, z których możesz dowiedzieć się więcej.

Jeśli masz pytania dotyczące tematu, który nie został omówiony na tej stronie, odwiedź jedną z naszych społeczności internetowych. Będziemy okresowo aktualizować tę stronę, dodając nowe tematy, dlatego zaglądaj tu regularnie, aby sprawdzić, czy dodaliśmy temat, o którym chcesz się dowiedzieć więcej.

Wersje SDK: z przestrzeniami nazw i modułowe

Firebase udostępnia 2 interfejsy API dla aplikacji internetowych:

  • JavaScript — przestrzeń nazw. Jest to interfejs JavaScript, który Firebase utrzymywał przez wiele lat i jest znany programistom internetowym korzystającym ze starszych aplikacji Firebase. Ponieważ interfejs API z przestrzenią nazw nie korzysta z bieżącego wsparcia nowych funkcji, większość nowych aplikacji powinna zamiast tego przyjąć modułowy interfejs API.
  • JavaScript — modułowy. Ten zestaw SDK opiera się na modułowym podejściu, które zapewnia mniejszy rozmiar zestawu SDK i większą wydajność dzięki nowoczesnym narzędziom do tworzenia kodu JavaScript, takim jak webpack lub Rollup.

Modułowy interfejs API dobrze integruje się z narzędziami do kompilacji, które usuwają kod nieużywany w aplikacji. Ten proces jest znany jako „tree-shaking”. Aplikacje stworzone przy użyciu tego zestawu SDK charakteryzują się znacznie mniejszym rozmiarem. Mimo że interfejs API z przestrzenią nazw jest dostępny jako moduł, nie ma on ściśle modułowej struktury i nie zapewnia takiego samego stopnia redukcji rozmiaru.

Chociaż większość modułowego API opiera się na tych samych schematach co API przestrzeni nazw, organizacja kodu jest inna. Interfejs API z przestrzenią nazw jest zwykle zorientowany na przestrzeń nazw i wzorzec usługi, a interfejs API modułowy jest zorientowany na odrębne funkcje. Na przykład łańcuchy kropek w przestrzeni nazw interfejsu API, takie jak firebaseApp.auth(), są zastępowane w modułowym interfejsie API pojedynczą funkcją getAuth(), która przyjmuje firebaseApp i zwraca instancję Authentication.

Oznacza to, że aplikacje internetowe utworzone za pomocą interfejsu API przestrzeni nazw wymagają refaktoryzacji, aby móc w pełni wykorzystać zalety modułowej konstrukcji aplikacji. Więcej informacji znajdziesz w przewodniku po uaktualnianiu.

JavaScript – modułowe API dla nowych aplikacji

Jeśli rozpoczynasz nową integrację z Firebase, możesz włączyć modułowy interfejs API podczas dodawania i inicjowania pakietu SDK.

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

Sposoby dodawania zestawów SDK internetowych do aplikacji

Firebase udostępnia biblioteki JavaScript dla większości usług Firebase, w tym Remote Config, FCM i innych. Sposób dodawania pakietów Firebase SDK do aplikacji internetowej zależy od narzędzi używanych w aplikacji (np. narzędzia do pakowania modułów).

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

  • npm (w przypadku narzędzi do łączenia modułów)
  • CDN (sieć dostarczania treści)

Szczegółowe instrukcje konfiguracji znajdziesz w artykule Dodawanie Firebase do aplikacji JavaScript. W pozostałej części tej sekcji znajdziesz informacje, które pomogą Ci wybrać odpowiednie opcje.

npm

Pobranie pakietu Firebase npm (który zawiera pakiety przeglądarki i Node.js) zapewnia lokalną kopię pakietu Firebase SDK, która może być potrzebna w przypadku aplikacji innych niż przeglądarkowe, takich jak aplikacje Node.js, React Native czy Electron. Pobieranie obejmuje pakiety Node.js i React Native jako opcję dla niektórych pakietów. Pakiety Node.js są niezbędne do realizacji etapu renderowania po stronie serwera (SSR) w ramach struktur SSR.

Korzystanie z npm z usługą tworzącą pakiety modułów, taką jak webpack lub Rollup, zapewnia opcje optymalizacji, które umożliwiają „usuwanie” nieużywanego kodu i stosowanie ukierunkowanych polyfilli, co może znacznie zmniejszyć rozmiar aplikacji. Wdrożenie tych funkcji może nieco skomplikować konfigurację i proces kompilacji, ale różne popularne narzędzia CLI mogą pomóc w tym zakresie. Te narzędzia to m.in. Angular, React, Vue i Next.

W skrócie:

  • Zapewnia cenną optymalizację rozmiaru aplikacji
  • Dostępne są solidne narzędzia do zarządzania modułami
  • Wymagane dla 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. Korzystając z CDN do dodawania pakietów SDK, nie potrzebujesz narzędzia do kompilacji, a Twój łańcuch kompilacji może być prostszy i łatwiejszy w obsłudze w porównaniu z pakietami modułów. Jeśli nie zależy Ci szczególnie na rozmiarze zainstalowanej aplikacji i nie masz specjalnych wymagań, takich jak transpilacja z TypeScriptu, CDN może być dobrym wyborem.

W skrócie:

  • Znajomy i prosty
  • Odpowiednie, gdy rozmiar aplikacji nie jest głównym problemem
  • Odpowiednie, gdy witryna nie korzysta z narzędzi do kompilacji.

Warianty pakietu Firebase Web SDK

Pakiet SDK Firebase na potrzeby internetu może być używany zarówno w aplikacjach przeglądarkowych, jak i w aplikacjach Node. Jednak w środowiskach Node nie są dostępne niektóre usługi. Zobacz listę obsługiwanych środowisk.

Niektóre pakiety SDK usług udostępniają osobne wersje dla przeglądarek i Node.js, z których każda jest dostępna w formatach ESM i CJS. Niektóre pakiety SDK usług udostępniają nawet wersje dla platform Cordova i React Native. Pakiet SDK dla klienta internetowego jest skonfigurowany tak, aby udostępniać prawidłowy 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 z myślą o pomocy w tworzeniu aplikacji internetowych lub aplikacji klienckich, do których użytkownicy mają dostęp, np. w aplikacji na komputery stacjonarne lub w aplikacji IoT w Node.js. Jeśli chcesz skonfigurować dostęp administracyjny z uprzywilejowanych środowisk (np. serwerów), użyj Firebase Admin SDK.

Wykrywanie środowiska za pomocą pakietów i platform

Gdy instalujesz pakiet Firebase Web SDK za pomocą npm, instalowane są zarówno wersja JavaScript, jak i Node.js. Pakiet zapewnia szczegółowe wykrywanie środowiska, aby umożliwić odpowiednie pakiety dla Twojej aplikacji.

Jeśli Twój kod używa instrukcji require Node.js, pakiet SDK znajdzie pakiet specyficzny dla Node. W przeciwnym razie musisz prawidłowo skonfigurować ustawienia narzędzia do tworzenia pakietów, aby wykrywało 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ź, czy narzędzie do tworzenia pakietów jest skonfigurowane tak, aby priorytetowo traktowało odpowiedni typ pakietu w Twoim środowisku.

Więcej informacji o obiekcie konfiguracji Firebase

Aby zainicjować Firebase w aplikacji, musisz podać jej konfigurację Firebase. W każdej chwili możesz uzyskać obiekt konfiguracji Firebase.

  • Nie zalecamy ręcznej edycji obiektu konfiguracji, zwłaszcza następujących wymaganych „opcji Firebase”: apiKey, projectId i appID. Jeśli zainicjujesz swoją aplikację, podając nieprawidłowe lub brakujące wartości dla wymaganych „opcji Firebase”, użytkownicy Twojej aplikacji mogą napotkać poważne problemy. Wyjątkiem jest authDomain, który można zaktualizować, postępując zgodnie z najlepszymi praktykami korzystania z signInWithRedirect.

  • Jeśli w projekcie Firebase włączono opcję Google Analytics, obiekt konfiguracji zawiera pole measurementId. Więcej informacji o tym polu znajdziesz na stronie wprowadzającej Analytics.

  • Jeśli włączysz Google Analytics lub Realtime Database po utworzeniu aplikacji internetowej Firebase, upewnij się, że obiekt konfiguracji Firebase używany w aplikacji został zaktualizowany o odpowiednie wartości konfiguracji (measurementId i databaseURL). Obiekt konfiguracji Firebase możesz pobrać w dowolnym momencie.

Oto format obiektu konfiguracyjnego z włączonymi wszystkimi usługami (wartości te 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óźnienie ładowania pakietów Firebase SDK (z CDN)

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

  1. Dodaj flagę defer do każdego tagu script dla pakietów Firebase SDK, a następnie odłóż inicjalizację Firebase za pomocą drugiego skryptu, na przykład:

    <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 następnie uwzględnij w nim następujące elementy:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Używaj wielu projektów Firebase w jednej aplikacji

W większości przypadków wystarczy zainicjować Firebase w jednej domyślnej aplikacji. Dostęp do Firebase z tej aplikacji można uzyskać 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 jednak musisz uzyskać dostęp do wielu projektów Firebase jednocześnie. Możesz na przykład odczytywać dane z bazy danych jednego projektu Firebase, ale przechowywać pliki w innym projekcie Firebase. Możesz też zechcieć uwierzytelnić jeden projekt, a drugi pozostawić nieuwierzytelnionym.

Pakiet SDK Firebase JavaScript umożliwia inicjowanie i używanie w jednej aplikacji jednocześnie wielu projektów Firebase, z których każdy korzysta z własnych informacji o konfiguracji 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

Uruchom lokalny serwer WWW do celów programistycznych

Jeśli tworzysz aplikację internetową, niektóre części pakietu SDK Firebase JavaScript wymagają, aby aplikacja była obsługiwana przez serwer, a nie przez lokalny system plików. Za pomocą Firebase CLI możesz uruchomić serwer lokalny.

Jeśli Firebase Hosting zostało już skonfigurowane w aplikacji, być może część z tych czynności została już wykonana.

Do obsługi aplikacji internetowej użyjesz interfejsu wiersza poleceń Firebase.

  1. Więcej informacji o tym, jak zainstalować interfejs wiersza poleceń lub zaktualizować go do najnowszej wersji, znajdziesz w Firebasedokumentacji interfejsu wiersza poleceń.

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

    firebase init

  3. Uruchom serwer lokalny w celu uruchomienia. Uruchom to polecenie w katalogu głównym aplikacji lokalnej:

    firebase serve

Zasoby open source dla pakietów Firebase JavaScript SDK

Firebase wspiera rozwój oprogramowania typu open source i zachęcamy społeczność do współpracy oraz przesyłania opinii.

Pakiety Firebase JavaScript SDK

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

Przykłady krótkich wprowadzeń

Firebase utrzymuje zbiór przykładów szybkiego startu dla większości interfejsów API Firebase w Internecie. Znajdziesz te szybkie starty w naszym publicznym repozytorium szybkich startów Firebase GitHub. Te przewodniki możesz wykorzystać jako przykładowy kod do używania pakietów SDK Firebase.