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 znajdziesz odpowiedzi na te pytania lub linki do materiałów, z których dowiesz się więcej.

Jeśli masz pytania dotyczące tematu, którego nie ma na tej stronie, odwiedź jedną z naszych społeczności online. Od czasu do czasu będziemy też dodawać na tej stronie nowe tematy, więc sprawdzaj, czy nie pojawił się ten, który Cię interesuje.

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

Firebase udostępnia 2 interfejsy API dla aplikacji internetowych:

  • JavaScript – z przestrzenią nazw Jest to interfejs JavaScript, który Firebase utrzymywał przez wiele lat i który jest znany deweloperom aplikacji internetowych ze starszymi aplikacjami Firebase. Interfejs API z przestrzenią nazw nie korzysta z bieżącej obsługi nowych funkcji, dlatego większość nowych aplikacji powinna zamiast niego używać interfejsu API modułowego.
  • JavaScript – modułowy. Ten pakiet SDK jest oparty na podejściu modułowym, które zapewnia mniejszy rozmiar SDK i większą wydajność w przypadku nowoczesnych narzędzi do tworzenia JavaScriptu, takich jak webpack czy 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 utworzone za pomocą tego pakietu SDK mają znacznie mniejszy rozmiar. Interfejs API z przestrzenią nazw, choć jest dostępny jako moduł, nie ma ściśle modułowej struktury i nie zapewnia takiego samego stopnia zmniejszenia rozmiaru.

Chociaż większość modułowego interfejsu API jest zgodna z tymi samymi wzorcami co interfejs API z przestrzenią nazw, organizacja kodu jest inna. Interfejs API z przestrzenią nazw jest zwykle zorientowany na przestrzeń nazw i wzorzec usługi, a interfejs API z modułami – 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 przez pojedynczą funkcję getAuth(), która przyjmuje firebaseApp i zwraca instancję Authentication.

Oznacza to, że aplikacje internetowe utworzone za pomocą interfejsu API z przestrzenią nazw wymagają refaktoryzacji, aby można było korzystać z modułowej struktury aplikacji. Więcej informacji znajdziesz w przewodniku po uaktualnianiu.

JavaScript – modułowy interfejs API dla nowych aplikacji

Jeśli rozpoczynasz nową integrację z Firebase, możesz włączyć modułowy interfejs API, gdy dodasz i zainicjujesz pakiet SDK.

Podczas tworzenia aplikacji pamiętaj, że kod będzie zorganizowany głównie wokół funkcji. W modułowym interfejsie API usługi są przekazywane 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 pakietów SDK do klienta internetowego 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 SDK Firebase do aplikacji internetowej zależy od narzędzi, których używasz w aplikacji (np. narzędzia do łączenia modułów).

Do aplikacji możesz dodać dowolną z dostępnych bibliotek za pomocą 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ć jedną z dostępnych opcji.

npm

Pobranie pakietu Firebase npm (który zawiera 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. Pobieranie obejmuje pakiety Node.js i React Native jako opcję dla niektórych pakietów. Pakiety Node.js są niezbędne w procesie renderowania po stronie serwera w przypadku platform 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 obejmują Angular, React, Vue, Next i inne.

W skrócie:

  • Zapewnia wartościową optymalizację rozmiaru aplikacji
  • Dostępne są zaawansowane narzędzia do zarządzania modułami.
  • Wymagane w przypadku renderowania po stronie serwera w 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 modułowymi narzędziami do łączenia. 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:

  • Znany 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 do usług udostępniają oddzielne warianty dla przeglądarki i Node.js, z których każdy jest dostępny w formatach ESM i CJS. Niektóre pakiety SDK do usług udostępniają nawet warianty dla platformy Cordova lub 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, z których mogą korzystać użytkownicy, 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ą obie wersje: JavaScript 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 Node.js require, pakiet SDK znajdzie pakiet specyficzny dla Node. W przeciwnym razie ustawienia narzędzia do tworzenia pakietów muszą być prawidłowo skonfigurowane, aby 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ź, czy narzędzie do tworzenia pakietów jest skonfigurowane tak, aby priorytetowo traktować odpowiedni typ pakietu w Twoim środowisku.

Więcej informacji o obiekcie konfiguracji Firebase

Aby zainicjować Firebase w aplikacji, musisz podać jej konfigurację Firebase. Obiekt konfigurujący Firebase możesz uzyskać w każdej chwili.

  • Nie zalecamy ręcznego edytowania obiektu konfiguracji, zwłaszcza tych wymaganych „opcji Firebase”: apiKey, projectId i appID. Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami tych wymaganych „opcji Firebase”, użytkownicy aplikacji mogą napotkać poważne problemy. Wyjątkiem jest authDomain, który można zaktualizować zgodnie ze sprawdzonymi metodami używania signInWithRedirect.

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

  • 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 uzyskać 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óźnianie wczytywania pakietów SDK Firebase (z CDN)

Możesz opóźnić włączenie pakietów SDK Firebase do momentu, aż cała strona zostanie załadowana. 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 pakietów SDK Firebase, 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 i dodaj do niego tę treść:

    // TODO: Replace the following with your app's Firebase 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 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 mieć dostęp do kilku 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ż uwierzytelnić jeden projekt, a drugi pozostawić bez uwierzytelnienia.

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

Uruchamianie lokalnego serwera WWW na potrzeby programowania

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. Do uruchomienia serwera lokalnego możesz użyć interfejsu wiersza poleceń Firebase.

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 lokalny serwer na potrzeby programowania. Uruchom to polecenie w katalogu głównym aplikacji lokalnej:

    firebase serve

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

Firebase obsługuje rozwój oprogramowania typu open source i zachęcamy społeczność do przesyłania opinii i współtworzenia projektów.

Pakiety Firebase JavaScript SDK

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

Przykłady krótkich wprowadzeń

Firebase udostępnia kolekcję przykładowych projektów, które pomagają szybko zacząć korzystać z większości interfejsów API Firebase w internecie. Te krótkie przewodniki znajdziesz w naszym publicznym repozytorium GitHub z krótkimi przewodnikami po Firebase. Te przewodniki możesz wykorzystać jako przykładowy kod do używania pakietów SDK Firebase.