Ambientes compatíveis com o SDK do Firebase para JavaScript

Ambientes compatíveis

O SDK Firebase JavaScript tem compatibilidade oficial com os seguintes ambientes:

Importante: você ainda precisa incluir polyfills em ambientes que não têm suporte aos recursos exigidos pelo Firebase.

Navegadores

Produto do Firebase	Edge	Firefox	Chrome	Safari para iOS	Safari
Firebase AI Logic ^1
Analytics
App Check
Authentication
Cloud Firestore	(exceto persistência)			(exceto persistência se o iOS for anterior à versão 10)
Cloud Functions
Firebase Instalações
Cloud Messaging	(a partir da versão 17 do Edge, exceto para dispositivos móveis)
Cloud Storage
Data Connect
Performance Monitoring
Realtime Database
Remote Config

^{1 Firebase AI Logic era chamado de "Vertex AI in Firebase".}

Outros ambientes

Produto do Firebase	React Native	Node.js (18+)	Extensões do Chrome	Cordova
Firebase AI Logic ^1
App Check	(usando um provedor personalizado para fazer o atestado dos dispositivos nativos)	(usando um provedor personalizado)
Analytics
Authentication	(consulte a observação)	(consulte a observação)	(consulte a observação)	(consulte a observação)
Cloud Firestore	(exceto persistência)	(exceto persistência)
Cloud Functions
Data Connect
Firebase Instalações
Cloud Messaging
Cloud Storage	(exceto uploads)
Performance Monitoring
Realtime Database
Remote Config

^{1 Firebase AI Logic era chamado de "Vertex AI in Firebase".}

Observação: todos os recursos do Authentication são compatíveis, exceto a autenticação por smartphone e as operações de pop-up/redirecionamento do OAuth.

Polyfills

O SDK Firebase JavaScript foi criado com base nos padrões mais recentes da plataforma da Web. Alguns navegadores e ambientes JavaScript mais antigos não são compatíveis com todos os recursos exigidos pelo Firebase. Se a compatibilidade com esses navegadores/ambientes for necessária, será preciso carregar os polyfills adequadamente.

As seções abaixo identificam a maioria dos polyfills que podem ser necessários.

Polyfills obrigatórios

Ambientes	Polyfills
Safari 7, 8 e 9	ES Stable
Nó anterior à versão 10	ES Stable

Polyfills opcionais

Ambientes	Polyfills	Produtos do Firebase
Safari anterior à versão 10.1 iOS anterior à versão 10.3	fetch	Authentication Cloud Firestore Cloud Functions Performance Monitoring
Nó anterior à versão 18	fetch	Authentication Cloud Firestore Cloud Functions Cloud Storage
React Native e Expo	base-64	Cloud Storage

Polyfills sugeridos

Polyfills	Licença
ES Stable	MIT
fetch: "cross-fetch", melhor para navegadores mais antigos	MIT
fetch: `undici`, a melhor opção para Node.js	MIT
base-64	MIT

Configuração necessária dos polyfills para React Native e Expo

Para React Native e Expo, se você estiver fazendo upload de uma string codificada em base64, faça o seguinte:

Instale base-64 a partir do npm:

npm install base-64

Importe decode de base-64 e anexe-o ao escopo global como atob para que Cloud Storage possa acessá-lo.

import { decode } from 'base-64';

if(typeof atob === 'undefined') {
  global.atob = decode;
}

Adicione polyfills ao seu aplicativo

Opção 1: (recomendado) usar o bundler integrado ao Babel

Se você estiver usando um bundler, integre-o ao Babel e ao @babel/preset-env para receber os polyfills.

Use o guia de configuração interativo do Babel para aprender como integrar o Babel ao seu bundler.

Com o Babel, você não precisa se preocupar com os polyfills exatos que serão incluídos. Em vez disso, você especifica os ambientes de navegador mínimos que precisam de suporte. O Babel então adiciona os polyfills necessários para você e garante que os requisitos para suporte ao navegador sejam sempre cumpridos, mesmo que o Firebase ou seu próprio código comecem a usar novos recursos de ES.

Na página @babel/preset-env, há informações detalhadas sobre as opções de configuração disponíveis para especificar objetivos de ambiente (opção targets) e adicionar polyfills (opção useBuiltIns).

Observação: se você estiver usando um framework, o serviço de configuração do Babel e a adição de polyfills serão diferentes ou já terão sido feitos para você. Consulte o guia de configuração interativo do Babel para mais informações.

Opção 2: (Não recomendado) adicionar polyfills manualmente

É possível adicionar polyfills manualmente usando suas bibliotecas favoritas de polyfills (por exemplo, core-js).

import 'core-js/stable'
import 'cross-fetch/polyfill';

O core-js também fornece um arquivo de polyfill único que pode ser incluído diretamente na página HTML.

Essa opção pode ser uma maneira conveniente de gerenciar os polyfills se você não usa o Babel. No entanto, não recomendamos essa opção para aplicativos de produção, porque ela provavelmente incluirá polyfills desnecessários, o que aumentará o peso da página e, consequentemente, o tempo de carregamento dela.