Entornos compatibles
El SDK de Firebase JavaScript es compatible oficialmente con los siguientes entornos.
Navegadores
| Producto de Firebase | Edge | Firefox | Chrome | Safari iOS | Safari |
|---|---|---|---|---|---|
| Firebase AI Logic 1 | |||||
| Analytics | |||||
| App Check | |||||
| Authentication | |||||
| Cloud Firestore | (excepto persistencia) |
(excepto persistencia en versiones anteriores a iOS 10) |
|||
| Cloud Functions | |||||
| Instalaciones de Firebase | |||||
| Cloud Messaging | (Edge 17 y versiones posteriores, excepto para dispositivos móviles) |
||||
| Cloud Storage | |||||
| Data Connect | |||||
| Performance Monitoring | |||||
| Realtime Database | |||||
| Remote Config |
1 Firebase AI Logic antes se llamaba "Vertex AI in Firebase".
Otros entornos
| Producto de Firebase | React Native | Node.js (18+) | Extensiones de Chrome |
Cordova |
|---|---|---|---|---|
| Firebase AI Logic 1 | ||||
| App Check | (con un proveedor personalizado para certificar dispositivos nativos) |
(con un proveedor personalizado) |
||
| Analytics | ||||
| Authentication | (consulta la nota) |
(consulta la nota) |
(consulta la nota) |
(consulta la nota) |
| Cloud Firestore | (excepto persistencia) |
(excepto persistencia) |
||
| Cloud Functions | ||||
| Data Connect | ||||
| Instalaciones de Firebase | ||||
| Cloud Messaging | ||||
| Cloud Storage | (excepto cargas) |
|||
| Performance Monitoring | ||||
| Realtime Database | ||||
| Remote Config |
1 Firebase AI Logic antes se llamaba "Vertex AI in Firebase".
Polyfills
El SDK de Firebase JavaScript se compiló según los estándares más recientes de la plataforma web. Algunos entornos de JavaScript y navegadores más antiguos no son compatibles con todas las funciones que requiere Firebase. Tendrás que cargar polyfills según corresponda si necesitas admitir estos entornos o navegadores.
En las siguientes secciones, se identifica la mayoría de los polyfills que podrías necesitar.
Polyfills necesarios
| Entornos | Polyfills |
|---|---|
| Safari 7, 8 y 9 | ES Stable |
| Versiones anteriores a Node 10 | ES Stable |
Polyfills opcionales
| Entornos | Polyfills | Productos de Firebase |
|---|---|---|
|
fetch |
|
|
fetch |
|
|
base-64 |
|
Polyfills recomendados
| Polyfills | Licencia |
|---|---|
| ES Stable | MIT |
| fetch: "cross-fetch", mejor para navegadores más antiguos | MIT |
| fetch: "undici", mejor para Node.js | MIT |
| base-64 | MIT |
Configuración de Polyfill necesaria para React Native y Expo
Para React Native y Expo, si subes una string codificada en base-64, debes hacer lo siguiente:
Instala base-64 desde npm:
npm install base-64
Importa decode desde base-64 y adjúntalo al permiso global como atob para
que Cloud Storage pueda acceder a él.
import { decode } from 'base-64';
if(typeof atob === 'undefined') {
global.atob = decode;
}
Agrega polyfills en tu aplicación
Opción 1: Usa un agrupador integrado en Babel (recomendado)
Si usas un agrupador, intégralo en Babel y @babel/preset-env para obtener polyfills.
Para obtener información sobre cómo integrar Babel en tu integrador, usa la guía de configuración interactiva de Babel.
Con Babel, no tienes que preocuparte de los polyfills exactos que debes incluir. Basta con que especifiques los entornos de navegador mínimos que quieres admitir, y Babel agregará los polyfills necesarios. Además, la herramienta garantiza que siempre se cumplan los requisitos de compatibilidad con navegadores, incluso si Firebase o tu propio código comienza a usar funciones de ES nuevas.
@babel/preset-env ofrece información detallada sobre las opciones de configuración disponibles para especificar objetivos de entorno (opción targets) y agregar polyfills (opción useBuiltIns).
Opción 2: Agrega polyfills manualmente (no recomendado)
Puedes agregar polyfills manualmente con tus bibliotecas de polyfill favoritas (por ejemplo, core-js).
import 'core-js/stable'
import 'cross-fetch/polyfill';
core-js también ofrece un archivo de polyfills todo en uno que puedes incluir directamente en la página HTML.
Si no usas Babel, esta es una opción conveniente para administrar polyfills. Sin embargo, no recomendamos esta opción de todo en uno para las apps de producción, ya que podrían incluirse polyfills innecesarios y aumentar el peso y el tiempo de carga de la página.