Ambientes compatíveis
O SDK Firebase JavaScript tem compatibilidade oficial com os seguintes ambientes:
Navegadores
| Produto do Firebase | Edge | Firefox | Chrome | Safari para iOS | Safari |
|---|---|---|---|---|---|
| App Check | |||||
| Analytics | |||||
| 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 | |||||
| Performance Monitoring | |||||
| Realtime Database | |||||
| Remote Config | |||||
| Vertex AI in Firebase |
Outros ambientes
| Produto do Firebase | React Native | Node.js 18 ou mais recente | Extensões do Chrome |
Cordova |
|---|---|---|---|---|
| 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 | ||||
| Firebase Instalações | ||||
| Cloud Messaging | ||||
| Cloud Storage | (exceto uploads) |
|||
| Performance Monitoring | ||||
| Realtime Database | ||||
| Remote Config | ||||
| Vertex AI in Firebase |
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 |
|---|---|---|
|
fetch |
|
|
fetch |
|
|
base-64 |
|
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).
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.