Dowiedz się więcej o sieci i Firebase

Podczas tworzenia aplikacji internetowej przy użyciu Firebase możesz napotkać nieznane koncepcje lub obszary, w których potrzebujesz więcej informacji, aby podjąć właściwe decyzje w swoim projekcie. Ta strona ma na celu odpowiedzieć na te pytania lub wskazać zasoby, aby dowiedzieć się więcej.

Jeśli masz pytania dotyczące tematu nieomówionego na tej stronie, odwiedź jedną z naszych społeczności internetowych . Będziemy również okresowo aktualizować tę stronę o nowe tematy, więc sprawdzaj ponownie, czy dodaliśmy temat, o którym chcesz się dowiedzieć.

Wersje SDK: z przestrzeniami nazw i modułowe

Firebase zapewnia dwie powierzchnie API dla aplikacji internetowych:

  • JavaScript — z przestrzenią nazw. Jest to interfejs JavaScript, który Firebase utrzymywał przez wiele lat i jest znany programistom internetowym ze starszymi aplikacjami Firebase. Ponieważ interfejs API z przestrzenią nazw nie korzysta z ciągłej obsługi nowych funkcji, większość nowych aplikacji powinna zamiast tego przyjąć modułowy interfejs API.
  • JavaScript — modułowy . Ten zestaw SDK jest oparty na podejściu modułowym, które zapewnia mniejszy rozmiar zestawu SDK i większą wydajność dzięki nowoczesnym narzędziom do budowania JavaScript, takim jak webpack lub Rollup .

Modułowy interfejs API dobrze integruje się z narzędziami do kompilacji, które usuwają kod, który nie jest używany w Twojej aplikacji, co jest procesem znanym jako „wstrząsanie drzewem”. Aplikacje zbudowane za pomocą tego zestawu SDK korzystają ze znacznie mniejszych rozmiarów. Interfejs API z przestrzenią nazw, choć dostępny jako moduł, nie ma ściśle modułowej struktury i nie zapewnia takiego samego stopnia redukcji rozmiaru.

Chociaż większość modułowego interfejsu API ma te same wzorce, co interfejs API z przestrzenią nazw, organizacja kodu jest inna. Zasadniczo interfejs API z przestrzenią nazw jest zorientowany na przestrzeń nazw i wzorzec usługi, podczas gdy modułowy interfejs API jest zorientowany na funkcje dyskretne. Na przykład łączenie kropek interfejsu API z przestrzenią nazw, takie jak firebaseApp.auth() , jest zastępowane w modułowym interfejsie API pojedynczą funkcją getAuth() , która pobiera firebaseApp i zwraca instancję Authentication.

Oznacza to, że aplikacje sieci Web utworzone za pomocą interfejsu API z przestrzenią nazw wymagają refaktoryzacji w celu skorzystania z modułowego projektu aplikacji. Więcej informacji można znaleźć w przewodniku aktualizacji .

Co jest obsługiwane?

Chociaż interfejs API z przestrzenią nazw i modułowy interfejs API mają różne style kodu, zapewniają bardzo podobną obsługę funkcji i opcji Firebase. Jak szczegółowo opiszemy w tym przewodniku, obie wersje SDK obsługują warianty JavaScript i Node.js wraz z kilkoma opcjami dodawania/instalowania zestawów SDK.

Dodaj zestawy SDK za pomocą z przestrzenią nazw Modułowy
np
  • Dla JavaScriptu
  • Dla Node.js
  • Dla JavaScriptu
  • Dla Node.js
CDN (sieć dostarczania treści)
  • Dla JavaScriptu
  • Dla JavaScriptu
Adresy URL hostingu
  • Dla JavaScriptu
  • Dla Node.js

Aby uzyskać więcej informacji, zobacz Sposoby dodawania zestawów Web SDK do aplikacji oraz warianty Firebase Web SDK w dalszej części tej strony.

JavaScript - modułowe API dla nowych aplikacji

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

Tworząc aplikację, pamiętaj, że kod będzie zorganizowany głównie wokół funkcji . W modułowym interfejsie API usługi są przekazywane jako pierwszy argument, a następnie funkcja wykorzystuje szczegóły usługi do wykonania reszty. Na 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 można znaleźć w przewodnikach dla poszczególnych obszarów produktów, a także w dokumentacji dotyczącej modułowego interfejsu API .

Sposoby dodawania zestawów Web SDK do aplikacji

Firebase udostępnia biblioteki JavaScript dla większości produktów Firebase, w tym Remote Config, FCM i innych. Sposób dodawania pakietów Firebase SDK do aplikacji internetowej zależy od tego, jakich narzędzi używasz w swojej aplikacji (takich jak pakiet modułów) lub od tego, czy aplikacja działa w środowisku innym niż przeglądarka, takim jak Node.js.

Możesz dodać dowolną z dostępnych bibliotek do swojej aplikacji za pomocą jednej z obsługiwanych metod:

  • npm (dla pakietów modułów i Node.js)
  • CDN (sieć dostarczania treści)

Szczegółowe instrukcje dotyczące konfiguracji znajdziesz w artykule Dodawanie Firebase do aplikacji JavaScript . Pozostała część tej sekcji zawiera informacje pomocne przy wyborze spośród dostępnych opcji.

np

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

Używanie npm z pakietem modułów, takim jak webpack lub Rollup , zapewnia opcje optymalizacji w celu „potrząsania” nieużywanym kodem i stosowania ukierunkowanych wypełnień, co może znacznie zmniejszyć rozmiar aplikacji. Wdrożenie tych funkcji może nieco skomplikować konfigurację i łańcuch kompilacji, ale różne popularne narzędzia CLI mogą pomóc to złagodzić. Narzędzia te obejmują Angular , React , Vue , Next i inne.

W podsumowaniu:

  • 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 CDN Firebase to prosta metoda konfiguracji SDK, która może być znana wielu programistom. Używając CDN do dodawania zestawów SDK, nie będziesz potrzebować 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 przejmujesz się zbytnio instalowanym rozmiarem swojej aplikacji i nie masz specjalnych wymagań, takich jak transpilacja z TypeScript, CDN może być dobrym wyborem.

W podsumowaniu:

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

Warianty Firebase Web SDK

Obecnie Firebase udostępnia dwa warianty Web SDK:

  • Pakiet JavaScript obsługujący wszystkie funkcje Firebase do użytku w przeglądarce.
  • Pakiet Node.js po stronie klienta, który obsługuje wiele — ale nie wszystkie — funkcje Firebase. Zobacz listę obsługiwanych środowisk .

Oba te warianty SDK zostały zaprojektowane, aby pomóc w tworzeniu aplikacji internetowych lub aplikacji klienckich do dostępu dla użytkowników końcowych, na przykład w aplikacjach stacjonarnych Node.js lub IoT. Jeśli Twoim celem jest skonfigurowanie dostępu administracyjnego z uprzywilejowanych środowisk (takich jak serwery), zamiast tego użyj Firebase Admin SDK .

Wykrywanie środowiska za pomocą pakietów i frameworków

Podczas instalowania Firebase Web SDK przy użyciu npm instalowane są zarówno wersje JavaScript, jak 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 Node.js require , zestaw SDK znajdzie pakiet specyficzny dla węzła. W przeciwnym razie ustawienia pakietu muszą być poprawnie skonfigurowane, aby wykryć właściwe pole punktu wejścia w pliku package.json (na przykład main , browser lub module ). Jeśli podczas korzystania z zestawu SDK wystąpią błędy w czasie wykonywania, sprawdź, czy program pakujący jest skonfigurowany tak, aby nadać priorytet odpowiedniemu typowi pakunku dla Twojego środowiska.

Dowiedz się więcej o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać konfigurację projektu Firebase. Możesz uzyskać swój obiekt konfiguracyjny Firebase w dowolnym momencie.

  • Nie zalecamy ręcznego edytowania obiektu konfiguracji, zwłaszcza następujących 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 Twojej aplikacji mogą napotkać poważne problemy.

  • Jeśli włączyłeś Google Analytics w swoim projekcie Firebase, Twój obiekt config zawiera pole measurementId . Więcej informacji na temat tego pola można znaleźć na stronie Wprowadzenie do Analytics .

  • Jeśli włączysz Google Analytics lub Bazę danych czasu rzeczywistego po utworzeniu aplikacji internetowej Firebase, upewnij się, że obiekt konfiguracji Firebase, którego używasz w swojej aplikacji, został zaktualizowany o powiązane wartości konfiguracji (odpowiednio measurementId i databaseURL ). Możesz uzyskać swój obiekt konfiguracyjny Firebase w dowolnym momencie.

Oto format obiektu konfiguracyjnego 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óźnianie ładowania pakietów SDK Firebase (z CDN)

Możesz opóźnić włączenie pakietów SDK Firebase do czasu załadowania całej strony. Jeśli używasz skryptów CDN w wersji 9 z <script type="module"> , jest to zachowanie domyślne. Jeśli używasz skryptów CDN w wersji 8 jako modułu, wykonaj następujące kroki, aby odroczyć ładowanie:

  1. Dodaj flagę defer do każdego tagu script dla pakietów SDK Firebase, 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 umieść w nim następujące informacje:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Korzystaj z wielu projektów Firebase w jednej aplikacji

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

Web modular API

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 namespaced API

// 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 potrzebny jest dostęp do wielu projektów Firebase w tym samym czasie. Na przykład możesz chcieć odczytać dane z bazy danych jednego projektu Firebase, ale przechowywać pliki w innym projekcie Firebase. Możesz też chcieć uwierzytelnić jeden projekt, pozostawiając drugi projekt bez uwierzytelnienia.

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

Web modular API

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 namespaced API

// 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 programowania

Jeśli tworzysz aplikację internetową, niektóre elementy Firebase JavaScript SDK wymagają udostępniania aplikacji internetowej z serwera, a nie z lokalnego systemu plików. Możesz użyć Firebase CLI do uruchomienia lokalnego serwera.

Jeśli masz już skonfigurowany Hosting Firebase dla swojej aplikacji, być może wykonałeś już kilka poniższych kroków.

Aby udostępnić swoją aplikację internetową, użyjesz Firebase CLI, narzędzia wiersza poleceń.

  1. Odwiedź dokumentację Firebase CLI, aby dowiedzieć się, jak zainstalować interfejs CLI lub zaktualizować go do najnowszej wersji .

  2. Zainicjuj swój projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:

    firebase init

  3. Uruchom lokalny serwer do programowania. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:

    firebase serve

Zasoby typu open source dla zestawów SDK Firebase JavaScript

Firebase wspiera rozwój open source i zachęcamy społeczność do wnoszenia wkładów i opinii.

Zestawy SDK JavaScript Firebase

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

Próbki szybkiego startu

Firebase przechowuje zbiór przykładów szybkiego startu dla większości interfejsów API Firebase w Internecie. Te krótkie wprowadzenie znajdziesz w naszym publicznym repozytorium szybkich startów Firebase GitHub . Możesz użyć tych przewodników Szybki start jako przykładowego kodu do korzystania z pakietów SDK Firebase.