Informacje o Firebase dla aplikacji internetowych

Podczas tworzenia aplikacji internetowej za pomocą Firebase możesz napotkać nieznane koncepcje lub obszary, w których potrzebujesz więcej informacji, aby podjąć właściwe decyzje dotyczące projektu. Ta strona zawiera odpowiedzi na te pytania lub wskaże Ci zasoby, z których możesz dowiedzieć się więcej.

Jeśli masz pytania na temat, który nie został omówiony na tej stronie, odwiedź jedną z naszych społeczności online. Co jakiś czas będziemy też aktualizować tę stronę o nowe tematy, więc zaglądaj tu regularnie, aby sprawdzać, czy nie pojawiły się tu nowe tematy, które Cię interesują.

Wersje pakietu SDK: przestrzeni nazw i modułowy

Firebase udostępnia 2 platformy API dla aplikacji internetowych:

  • JavaScript – przestrzeń nazw. Jest to interfejs JavaScript używany przez Firebase przez wiele lat i znany dla programistów stron internetowych korzystających ze starszych aplikacji Firebase. Interfejs Namespaced API nie korzysta z ciągłej obsługi nowych funkcji, dlatego większość nowych aplikacji powinna korzystać z modułowego interfejsu API.
  • JavaScript – modułowy. Ten pakiet SDK opiera się na podejściu modułowym, który zapewnia mniejszy rozmiar pakietu 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 tworzenia, które usuwają kod nieużywany w aplikacji. Jest to proces nazywany „trzęsieniem drzew”. Aplikacje utworzone za pomocą tego pakietu SDK mają znacznie mniejszy rozmiar. Interfejs API przestrzeni nazw, chociaż jest dostępny jako moduł, nie ma ściśle modułowej struktury i nie zapewnia takiego samego stopnia zmniejszenia rozmiaru.

Choć większość modułowych interfejsów API ma te same wzorce co przestrzeń nazw API, struktura kodu jest inna. Ogólnie interfejs API z przestrzenią nazw jest zorientowany na przestrzeń nazw i wzorzec usługi, a modułowy interfejs API – do funkcji dyskretnych. Na przykład łańcuch kropek w interfejsie API z przestrzeni nazw, taki jak firebaseApp.auth(), został zastąpiony w modułowym interfejsie API pojedynczą funkcją getAuth(), która pobiera firebaseApp i zwraca instancję uwierzytelniania.

Oznacza to, że aplikacje internetowe tworzone za pomocą interfejsu API przestrzeni nazw wymagają refaktoryzacji, aby mogły korzystać z modułowego projektowania. Więcej informacji znajdziesz w przewodniku po uaktualnieniu.

JavaScript – modułowy interfejs API do 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 uporządkowany 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. 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 kategorii usług oraz w dokumentacji referencyjnej interfejsu API modułu modułowego.

Sposoby dodawania internetowych pakietów SDK do aplikacji

Firebase udostępnia biblioteki JavaScript dla większości usług Firebase, w tym Zdalnej konfiguracji, FCM i innych usług. Sposób dodawania pakietów SDK Firebase do aplikacji internetowej zależy od używanego w niej narzędzia (np. narzędzia do łączenia modułów).

Do aplikacji możesz dodać dowolne dostępne biblioteki, korzystając z jednej z obsługiwanych metod:

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

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

npm

Pobranie pakietu npm Firebase (zawierającego pakiety przeglądarki i Node.js) powoduje utworzenie lokalnej kopii pakietu SDK Firebase, która może być potrzebna w przypadku aplikacji innych niż przeglądarki, takich jak aplikacje Node.js, aplikacje React Native lub Electron. W przypadku niektórych pakietów pobieranie obejmuje pakiety Node.js i React Native jako opcję. Pakiety Node.js są niezbędne na etapie renderowania po stronie serwera (SSR) platform SSR.

Używanie npm z pakietem modułów, takim jak webpack lub Rollup, daje możliwość optymalizacji nieużywanego kodu „tree-shake” i stosowanie kierowanych tagów polyfill, co może znacznie zmniejszyć rozmiar aplikacji. Implementacja tych funkcji może komplikować konfigurację i łańcuch kompilacji, ale różne narzędzia interfejsu wiersza poleceń głównego strumienia mogą temu zaradzić. Są to m.in. Angular, React, Vue i Next.

W skrócie:

  • Pozwala zoptymalizować rozmiar aplikacji.
  • Dostępne są zaawansowane narzędzia do zarządzania modułami
  • Wymagany w przypadku SSR z Node.js

CDN (sieć dostarczania treści)

Dodanie bibliotek przechowywanych w sieci CDN Firebase to prosta metoda konfiguracji pakietu SDK, którą wielu programistów może znać. Dodawanie pakietów SDK za pomocą CDN nie wymaga narzędzia do tworzenia, a praca na łańcuchu kompilacji może być prostsza niż w przypadku pakietów modułów. Jeśli nie zależy Ci na rozmiarze zainstalowanej aplikacji ani nie masz specjalnych wymagań, takich jak transpilacja z TypeScriptu, CDN to dobry wybór.

W skrócie:

  • Znane i proste
  • Odpowiedni, gdy rozmiar aplikacji nie jest poważnym problemem
  • Jest odpowiedni, gdy w witrynie nie ma narzędzi do tworzenia.

Wersje pakietu SDK Firebase Web

Pakietu SDK internetowego Firebase można używać zarówno w przeglądarce, jak i w aplikacjach Node. Jednak niektóre usługi nie są dostępne w środowiskach węzłów. Zobacz listę obsługiwanych środowisk.

Niektóre pakiety SDK usług mają osobne wersje przeglądarki i węzła, z których każdy jest dostępny zarówno w formatach ESM, jak i CJS. Niektóre pakiety SDK usług zawierają nawet wersje Cordova lub Natywnej React. Web SDK jest skonfigurowany tak, aby udostępniać odpowiednią wersję na podstawie konfiguracji narzędzia lub środowiska i w większości przypadków nie powinien wymagać ręcznego wyboru. Wszystkie warianty pakietu SDK pomagają w tworzeniu aplikacji internetowych lub klienckich z myślą o dostępie użytkownikom, np. w środowisku Node.js na komputerze bądź w aplikacji IoT. Jeśli chcesz skonfigurować dostęp administracyjny ze środowisk z podwyższonymi uprawnieniami (np. serwerów), użyj pakietu SDK Firebase Admin.

Wykrywanie środowiska za pomocą pakietów i platform

Gdy zainstalujesz pakiet SDK Firebase Web API przy użyciu npm, zainstalowane będą obie wersje: JavaScript i Node.js. Pakiet udostępnia szczegółowe informacje o środowisku, które pozwalają włączyć odpowiednie pakiety dla aplikacji.

Jeśli w Twoim kodzie używane są instrukcje require Node.js, pakiet SDK znajduje pakiet właściwy dla węzła. W przeciwnym razie ustawienia pakietu SDK muszą umożliwiać wykrywanie właściwego pola punktu wejścia w pliku package.json (np. main, browser lub module). Jeśli pakiet SDK napotyka błędy w czasie działania, sprawdź, czy pakiet ten jest skonfigurowany tak, aby nadawać priorytet typowi pakietu odpowiedniemu w Twoim środowisku.

Więcej informacji o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać jej konfigurację w Firebase. W każdej chwili możesz uzyskać swój obiekt konfiguracyjny Firebase.

  • Nie zalecamy ręcznej edycji obiektu konfiguracji, zwłaszcza tych wymaganych „opcji Firebase”: apiKey, projectId i appID. Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami dla tych wymaganych opcji Firebase, użytkownicy aplikacji mogą mieć poważne problemy. Wyjątkiem jest właściwość authDomain, którą można zaktualizować zgodnie ze sprawdzonymi metodami korzystania z logInWithRedirect.

  • 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 stronie Pierwsze kroki z Analytics.

  • Jeśli włączysz Google Analytics lub Bazę danych czasu rzeczywistego po utworzeniu aplikacji internetowej Firebase, sprawdź, czy obiekt konfiguracyjny Firebase, którego używasz w aplikacji, został zaktualizowany o powiązane wartości konfiguracyjne (odpowiednio measurementId i databaseURL). Obiekt konfiguracyjny Firebase możesz uzyskać w każdej chwili.

Obiekt konfiguracji z włączonymi wszystkimi usługami ma taki format (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óźnij wczytywanie pakietów SDK Firebase (z CDN)

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

  1. Dodaj flagę defer do każdego tagu script pakietu SDK Firebase, a następnie opóźnij 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 umieść w nim następujące elementy:

    // TODO: Replace the following with your app's Firebase project 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 tylko w jednej domyślnej aplikacji. Dostęp do Firebase z tej aplikacji możesz uzyskać na 2 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

Interfejs API Web Namespaced

// 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 jednocześnie. Możesz np. odczytywać dane z bazy danych jednego projektu Firebase, ale przechowywać pliki w innym projekcie Firebase. Możesz też uwierzytelnić jeden projekt, pozostawiając drugi projekt nieuwierzytelniony.

Pakiet Firebase JavaScript SDK umożliwia inicjowanie i używanie wielu projektów Firebase w jednej aplikacji jednocześnie, przy czym każdy projekt używa 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

Interfejs API Web Namespaced

// 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 elementy pakietu Firebase JavaScript SDK wymagają udostępniania jej z serwera, a nie z lokalnego systemu plików. Aby uruchomić serwer lokalny, możesz użyć interfejsu wiersza poleceń Firebase.

Jeśli Hosting Firebase dla Twojej aplikacji został już skonfigurowany, możliwe, że część poniższych czynności została już wykonana.

Do udostępniania swojej aplikacji internetowej użyjesz interfejsu wiersza poleceń Firebase, narzędzia wiersza poleceń.

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

  2. Zainicjuj projekt Firebase. Uruchom to polecenie z poziomu katalogu głównego lokalnego katalogu aplikacji:

    firebase init

  3. Uruchom lokalny serwer na potrzeby programowania. Uruchom to polecenie z poziomu głównego katalogu aplikacji:

    firebase serve

Zasoby open source dla pakietów SDK Firebase JavaScript

Firebase umożliwia programowanie na zasadach open source. Zachęcamy do dodawania treści i przekazywania opinii przez społeczność.

Pakiety SDK Firebase JavaScript

Większość pakietów SDK Firebase JavaScript została opracowana jako biblioteki open source w naszym publicznym repozytorium Firebase na GitHubie.

Przykłady w ramach krótkiego wprowadzenia

Firebase udostępnia kolekcję przykładowych krótkich wprowadzenia dla większości interfejsów API Firebase w wersji internetowej. Znajdziesz je w naszym publicznym repozytorium Firebase GitHub krótkie wprowadzenie. Te krótkie wprowadzenia możesz wykorzystać jako przykładowy kod do korzystania z pakietów SDK Firebase.