Environnements compatibles
Le Firebase JavaScript SDK est officiellement compatible avec les environnements suivants.
Navigateurs
| Produit Firebase | Edge | Firefox | Chrome | iOS Safari | Safari |
|---|---|---|---|---|---|
| Firebase AI Logic 1 | |||||
| Analytics | |||||
| App Check | |||||
| Authentication | |||||
| Cloud Firestore | (sauf persistance) |
(sauf persistance si iOS < 10) |
|||
| Cloud Functions | |||||
| Firebase installations | |||||
| Cloud Messaging | (Edge 17 ou version ultérieure, sauf mobile) |
||||
| Cloud Storage | |||||
| Data Connect | |||||
| Performance Monitoring | |||||
| Realtime Database | |||||
| Remote Config |
1 Firebase AI Logic s'appelait auparavant "Vertex AI in Firebase".
Autres environnements
| Produit Firebase | React Native | Node.js (18 ou version ultérieure) | Extensions Chrome |
Cordova |
|---|---|---|---|---|
| Firebase AI Logic 1 | ||||
| App Check | (à l'aide d'un fournisseur personnalisé pour effectuer l'attestation d'appareil natif) |
(à l'aide d'un fournisseur personnalisé) |
||
| Analytics | ||||
| Authentication | (voir Remarque) |
(voir Remarque) |
(voir Remarque) |
(voir Remarque) |
| Cloud Firestore | (sauf persistance) |
(sauf persistance) |
||
| Cloud Functions | ||||
| Data Connect | ||||
| Firebase installations | ||||
| Cloud Messaging | ||||
| Cloud Storage | (sauf importations) |
|||
| Performance Monitoring | ||||
| Realtime Database | ||||
| Remote Config |
1 Firebase AI Logic s'appelait auparavant "Vertex AI in Firebase".
Polyfills
Le SDK Firebase JavaScript repose sur les dernières normes de la plate-forme Web. Certains navigateurs et environnements JavaScript plus anciens ne sont pas compatibles avec toutes les fonctionnalités requises par Firebase. Si vous devez prendre en charge ces navigateurs/environnements, vous devez charger les polyfills en conséquence.
Les sections ci-dessous identifient la plupart des polyfills dont vous pourriez avoir besoin.
Polyfills obligatoires
| Environnements | Polyfills |
|---|---|
| Safari 7, 8 et 9 | ES Stable |
| Node < 10 | ES Stable |
Polyfills facultatifs
| Environnements | Polyfills | Produits Firebase |
|---|---|---|
|
fetch |
|
|
fetch |
|
|
base-64 |
|
Polyfills suggérés
| Polyfills | Licence |
|---|---|
| ES Stable | MIT |
| fetch \- `cross-fetch` - idéal pour les navigateurs plus anciens | MIT |
| fetch \- `undici` - idéal pour Node.js | MIT |
| base-64 | MIT |
Configuration requise des polyfills pour React Native et Expo
Pour React Native et Expo, si vous importez une chaîne encodée en base64, vous devez procéder comme suit :
Installez base-64 à partir de npm :
npm install base-64
Importez decode à partir de base-64 et associez-le à la portée globale en tant que atob afin que
Cloud Storage puisse y accéder.
import { decode } from 'base-64';
if(typeof atob === 'undefined') {
global.atob = decode;
}
Ajouter des polyfills dans votre application
Option 1 : (recommandée) Utiliser un bundler intégré à Babel
Si vous utilisez un bundler, intégrez-le à Babel et @babel/preset-env pour obtenir des polyfills.
Consultez le guide de configuration interactif de Babel pour découvrir comment intégrer Babel à votre bundler.
Avec Babel, vous n'avez pas à vous soucier des polyfills exacts à inclure. Au lieu de cela, vous spécifiez les environnements de navigateur minimaux que vous devez prendre en charge. Babel ajoute ensuite les polyfills nécessaires. Babel s'assure que vos exigences en matière de compatibilité avec les navigateurs sont toujours respectées, même si Firebase ou votre propre code commence à utiliser de nouvelles fonctionnalités ES.
@babel/preset-env fournit des informations détaillées sur les options de configuration disponibles pour spécifier les cibles d'environnement (option targets) et ajouter des polyfills (option useBuiltIns).
Option 2: (non recommandée) Ajouter des polyfills manuellement
Vous pouvez ajouter des polyfills manuellement à l'aide de vos bibliothèques de polyfills préférées (par
exemple, core-js).
import 'core-js/stable'
import 'cross-fetch/polyfill';
core-js fournit également un
fichier de polyfill tout-en-un
que vous pouvez inclure directement dans la page HTML.
Cette option peut être un moyen pratique de gérer les polyfills si vous n'utilisez pas Babel. Toutefois, nous vous déconseillons d'utiliser cette option tout-en-un pour les applications de production apps car elle inclura probablement des polyfills inutiles, ce qui augmentera le poids de la page et, par conséquent, le temps de chargement de la page.