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 . Będziemy również okresowo 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 kompilacji 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 pakietu 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, które ułatwiają 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 zaczynasz 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 swojej 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ądarkę, 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 do etapu renderowania po stronie serwera (SSR) w ramach 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 docelowych wypełniaczy, co może znacznie zmniejszyć rozmiar Twojej 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 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 jest głównym problemem
  • 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 zaprojektowano z myślą o tworzeniu 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ą 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 , 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 konfiguracyjnego, 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 .

Oto format obiektu konfiguracyjnego z włączonymi wszystkimi usługami (te wartości są wypełniane automatycznie):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  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.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/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:

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

Wersja internetowa 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ć czytać 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.

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

Wersja internetowa 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ć swoją aplikację internetową, użyj interfejsu wiersza poleceń Firebase.

  1. Odwiedź dokumentację Firebase CLI, aby dowiedzieć się, jak zainstalować CLI lub zaktualizować 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 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.