Dowiedz się więcej o sieci i Firebase

Podczas tworzenia aplikacji internetowej przy użyciu Firebase możesz napotkać nieznane pojęcia lub obszary, w których potrzebujesz więcej informacji, aby podjąć właściwe decyzje dotyczące projektu. 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 . Od czasu do czasu będziemy również aktualizować tę stronę o nowe tematy, więc sprawdź ponownie, czy nie dodaliśmy tematu, o którym chcesz się dowiedzieć.

Wersje SDK 8 i 9

Firebase udostępnia dwie wersje SDK dla aplikacji internetowych:

  • Wersja 8. Jest to interfejs JavaScript, który Firebase utrzymuje od kilku lat i jest znany programistom internetowym korzystającym z istniejących aplikacji Firebase. Ponieważ Firebase usunie obsługę tej wersji po jednym głównym cyklu wydawniczym, nowe aplikacje powinny zamiast tego przyjąć wersję 9.
  • Wersja modułowa 9 . Ten pakiet SDK wprowadza podejście modułowe, które zapewnia mniejszy rozmiar pakietu SDK i większą wydajność dzięki nowoczesnym narzędziom do budowania JavaScript, takim jak pakiet webpack lub Rollup .

Wersja 9 dobrze integruje się z narzędziami do kompilacji, które usuwają kod, który nie jest używany w Twojej aplikacji, w procesie znanym jako „wstrząsanie drzewami”. Aplikacje utworzone za pomocą tego zestawu SDK mają znacznie mniejsze rozmiary. Wersja 8, choć dostępna jako moduł, nie ma ściśle modułowej struktury i nie zapewnia tego samego stopnia redukcji rozmiaru.

Chociaż większość pakietu SDK w wersji 9 jest zgodna z tymi samymi wzorcami, co wersja 8, organizacja kodu jest inna. Ogólnie rzecz biorąc, wersja 8 jest zorientowana na przestrzeń nazw i wzorzec usług, podczas gdy wersja 9 jest zorientowana na funkcje dyskretne. Na przykład łączenie kropek w wersji 8, takie jak firebaseApp.auth() , zostało zastąpione w wersji 9 przez pojedynczą getAuth() , która pobiera firebaseApp i zwraca instancję Authentication.

Oznacza to, że aplikacje internetowe utworzone w wersji 8 lub wcześniejszej wymagają refaktoryzacji w celu skorzystania z modułowego podejścia wersji 9. Firebase udostępnia zgodne biblioteki ułatwiające to przejście; więcej szczegółów znajdziesz w przewodniku aktualizacji .

Co jest obsługiwane?

Chociaż wersje 8 i 9 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 SDK.

Dodaj pakiety SDK za pomocą 8.0 (w przestrzeni nazw) 9.0 (modułowy)
npm
  • Dla JavaScript
  • Dla Node.js
  • Dla JavaScript
  • Dla Node.js
CDN (sieć dostarczania treści)
  • Dla JavaScript
  • Dla JavaScript
Hostingowe adresy URL
  • Dla JavaScript
  • Dla Node.js

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

Wersja 9 dla nowych aplikacji

Jeśli rozpoczynasz nową integrację z Firebase, możesz włączyć pakiet SDK w wersji 9 podczas dodawania i inicjowania pakietu SDK .

Podczas tworzenia aplikacji pamiętaj, że Twój kod będzie zorganizowany głównie wokół funkcji . W wersji 9 usługi są przekazywane jako pierwszy argument, a 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ółów można znaleźć w przewodnikach dla każdego obszaru produktów oraz w dokumentacji referencyjnej wersji 9 .

Sposoby dodawania internetowych 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 SDK Firebase do aplikacji internetowej zależy od narzędzi używanych w aplikacji (np. 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 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

Pobranie pakietu Firebase npm (obejmującego zarówno przeglądarki, jak i pakiety Node.js) zapewnia lokalną kopię pakietu SDK Firebase, która może być potrzebna w przypadku aplikacji innych niż przeglądarki, takich jak aplikacje Node.js, React Native lub Electron. Pobieranie zawiera pakiety Node.js i React Native jako opcję dla niektórych pakietów. Paczki Node.js są niezbędne na etapie renderowania po stronie serwera (SSR) w ramach SSR.

Korzystanie z npm z pakietem modułów, takim jak pakiet internetowy lub pakiet zbiorczy , zapewnia opcje optymalizacji w celu „potrząsania” nieużywanym kodem i stosowania docelowych wypełniaczy, co może znacznie zmniejszyć rozmiar aplikacji. Implementacja tych funkcji może zwiększyć złożoność konfiguracji i łańcucha kompilacji, ale różne popularne narzędzia CLI mogą pomóc w złagodzeniu tego. Narzędzia te obejmują Angular , React , Vue , Next i inne.

W podsumowaniu:

  • Zapewnia cenną optymalizację rozmiaru aplikacji
  • Dostępne jest solidne oprzyrządowanie 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 pakietu SDK, która może być znana wielu programistom. Używając CDN do dodawania pakietów SDK, nie potrzebujesz narzędzia do kompilacji, a ł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 zainstalowanym rozmiarze aplikacji i nie masz specjalnych wymagań, takich jak transpilacja z języka TypeScript, CDN może być dobrym wyborem.

W podsumowaniu:

  • Znajomy i prosty
  • Odpowiednie, gdy rozmiar aplikacji nie stanowi większego problemu
  • Odpowiednie, gdy Twoja 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 zestawu SDK zostały zaprojektowane w celu ułatwienia tworzenia aplikacji internetowych lub aplikacji klienckich dla użytkowników końcowych, na przykład w aplikacji klasycznej Node.js lub aplikacji IoT. Jeśli Twoim celem jest skonfigurowanie dostępu administracyjnego ze środowisk uprzywilejowanych (takich jak serwery), użyj pakietu Firebase Admin SDK .

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

Podczas instalowania pakietu Firebase Web SDK przy użyciu npm instalowane są zarówno wersje 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 Node.js require , SDK znajdzie pakiet specyficzny dla Node. W przeciwnym razie ustawienia programu pakującego 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 wystąpią błędy środowiska wykonawczego z pakietem SDK, upewnij się, że program pakujący jest skonfigurowany tak, aby priorytetowo traktować właściwy typ pakietu dla danego środowiska.

Dowiedz się więcej o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać konfigurację projektu Firebase swojej aplikacji. Obiekt konfiguracyjny Firebase możesz uzyskać 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 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 . Dowiedz się więcej o tym polu na stronie z wprowadzeniem do usługi 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, jest zaktualizowany przy użyciu powiązanych wartości konfiguracji (odpowiednio measurementId i databaseURL ). Obiekt konfiguracyjny Firebase możesz uzyskać 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óźnij ładowanie 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 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 odrocz inicjację 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 elementy:

    // 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 version 9

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();

Web version 8

// 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();

Czasami jednak potrzebujesz jednocześnie dostępu do wielu projektów Firebase. Na przykład możesz chcieć odczytywać dane z bazy danych jednego projektu Firebase, ale przechowywać pliki w innym projekcie Firebase. Lub możesz chcieć uwierzytelnić jeden projekt, zachowując nieuwierzytelniony drugi projekt.

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 version 9

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);

Web version 8

// 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();

Uruchom lokalny serwer WWW do rozwoju

Jeśli tworzysz aplikację internetową, niektóre części pakietu Firebase JavaScript SDK wymagają obsługi aplikacji internetowej z serwera, a nie z lokalnego systemu plików. Możesz użyć interfejsu wiersza polecenia Firebase , aby uruchomić serwer lokalny.

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

Aby obsługiwać aplikację internetową, użyj interfejsu wiersza poleceń Firebase.

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

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

    firebase init

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

    firebase serve

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

Firebase wspiera rozwój oprogramowania typu open source i zachęcamy do publikowania wkładów i opinii społeczności.

Pakiety SDK Firebase JavaScript

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

Próbki szybkiego startu

Firebase przechowuje zbiór przykładów szybkiego startu dla większości interfejsów API Firebase w internecie. Znajdź te przewodniki szybkiego startu w naszym publicznym repozytorium przewodników szybkiego startu Firebase na GitHub . Możesz użyć tych przewodników Szybki start jako przykładowego kodu do korzystania z pakietów SDK Firebase.