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 nieobjętym na tej stronie, należy odwiedzić jedną z naszych społecznościach 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 że Firebase utrzymuje przez kilka lat i jest znany developerzy z istniejącymi aplikacjami Firebase. Ponieważ Firebase usunie obsługę tej wersji po jednym głównym cyklu wydawniczym, nowe aplikacje powinny zamiast tego przyjąć wersję 9.
  • Modułowa wersja 9. Ten SDK wprowadza się podejście modułowe, który zapewnia zmniejszony rozmiar SDK i większą wydajność z nowoczesnych narzędzi budowania JavaScript, takich jak WebPack lub pakietu zbiorczego .

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 wersja 8 'kropka łączenia, jak firebaseApp.auth() otrzymuje się w wersji 9 pojedynczym getAuth() funkcji, które ma firebaseApp i zwraca wystąpienia uwierzytelniania.

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; zobacz uaktualniania instrukcji dla dalszych szczegółów.

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 dodać SDK do aplikacji internetowych i Firebase Web SDK warianty później na tej stronie.

Wersja 9 dla nowych aplikacji

Jeśli zaczynasz na nowym integracji z Firebase, można zdecydować się na wersję 9 SDK podczas dodawania i zainicjować SDK .

Jak rozwijać swoją aplikację, należy pamiętać, że kod zostanie zorganizowana 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, patrz prowadnice dla każdej grupy produktów, jak również dokumentację referencyjną wersja 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żna dodać dowolny z dostępnych bibliotek do aplikacji za pośrednictwem jednego z obsługiwanych metod:

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

Aby uzyskać szczegółowe instrukcje instalacji można znaleźć Dodaj 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.

Korzystanie z modułu NPM Bundler takich jak WebPack lub zbiorczy zawiera opcje optymalizacji „drzewo-shake” niewykorzystany kod i zastosowanie ukierunkowanych polyfills, które mogą znacznie zmniejszyć emisję dwutlenku wielkości 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ą kątowe , 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 środowiskach .

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, aby skonfigurować dostęp administracyjny ze środowisk uprzywilejowanych (takich jak serwery) używać Firebase Admin SDK zamiast.

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 wykorzystuje node.js require oświadczenia, SDK znajdzie pakiet Node-specyficzny. W przeciwnym razie ustawieniach Bundler musi być prawidłowo zorientowali do wykrywania pola punkt wejścia bezpośrednio w package.json pliku (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. Można uzyskać swój obiekt Firebase config w dowolnym momencie.

  • Nie zaleca się ręcznego edytowania obiektu config, zwłaszcza następujące obowiązkowe „Firebase opcje”: 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łączono Google Analytics w projekcie Firebase Twój obiekt config zawiera pole measurementId . Dowiedz się więcej o tej dziedzinie w Analytics PRZYGOTOWANIA stronę .

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 wersji 9 skryptów CDN 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 defer flagę każdego script tagu dla Firebase SDK, a następnie odroczenie inicjalizacji Firebase wykorzystaniem drugiego scenariusza, 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. Załóż init-firebase.js plik, a następnie zawierać następujące informacje w pliku:

    // 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żna użyć Firebase CLI 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 aktualizacji do najnowszej wersji .

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

    firebase init

  3. Uruchomić lokalny serwer 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ść Firebase JavaScript SDK są opracowywane 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. Znajdź te quickstarts w naszym publicznym Firebase GitHub szybkiego startu repozytorium . Możesz użyć tych przewodników Szybki start jako przykładowego kodu do korzystania z pakietów SDK Firebase.