สภาพแวดล้อมที่รองรับ Firebase JavaScript SDK

สภาพแวดล้อมที่รองรับ

SDK Firebase JavaScript ได้รับการสนับสนุนอย่างเป็นทางการในสภาพแวดล้อมต่อไปนี้

เบราว์เซอร์

ผลิตภัณฑ์ Firebase Edge Firefox Chrome Safari ใน iOS Safari
App Check
Analytics
Authentication
Cloud Firestore
(ยกเว้น
ความต่อเนื่อง)
(ยกเว้น
ความต่อเนื่อง
หาก iOS < 10)
Cloud Functions
การติดตั้ง Firebase
Cloud Messaging
(Edge 17 ขึ้นไป ยกเว้นอุปกรณ์เคลื่อนที่)
Cloud Storage
Performance Monitoring
Realtime Database
Remote Config
Vertex AI in Firebase

สภาพแวดล้อมอื่นๆ

ผลิตภัณฑ์ Firebase React Native Node.js (18 ขึ้นไป)
ส่วนขยาย Chrome		 Cordova
App Check
(การใช้ผู้ให้บริการที่กำหนดเองเพื่อสร้างเอกสารรับรองอุปกรณ์เนทีฟ)
(ใช้ผู้ให้บริการที่กำหนดเอง)
Analytics
Authentication
(ดูหมายเหตุ)
(ดูหมายเหตุ)
(ดูหมายเหตุ)
(ดูหมายเหตุ)
Cloud Firestore
(ยกเว้น
การคงอยู่)
(ยกเว้น
ความต่อเนื่อง)
Cloud Functions
การติดตั้ง Firebase
Cloud Messaging
Cloud Storage
(ยกเว้น
การอัปโหลด)
Performance Monitoring
Realtime Database
Remote Config
Vertex AI in Firebase

โพลีฟิลล์

SDK ของ Firebase JavaScript สร้างขึ้นตามมาตรฐานล่าสุดของแพลตฟอร์มเว็บ เบราว์เซอร์รุ่นเก่าและสภาพแวดล้อม JavaScript บางรุ่นไม่รองรับฟีเจอร์ทั้งหมดที่จําเป็นสําหรับ Firebase หากต้องรองรับเบราว์เซอร์/สภาพแวดล้อมเหล่านี้ คุณจะต้องโหลดโพลีฟิลล์ตามความเหมาะสม

ส่วนด้านล่างจะระบุ polyfill ส่วนใหญ่ที่คุณอาจต้องใช้

โพลีฟิลล์ที่จำเป็น

สภาพแวดล้อม การทดแทน
Safari 7, 8 และ 9 เสถียรสเปน
โหนดน้อยกว่า 10 สเปน (เวอร์ชันเสถียร)

โพลีฟิลล์ที่ไม่บังคับ

สภาพแวดล้อม การทดแทน ผลิตภัณฑ์ Firebase
  • Safari < 10.1
  • iOS < 10.3
 fetch
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Performance Monitoring
  • โหนด < 18
 ดึงข้อมูล
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Cloud Storage
  • รีแอ็กกับโฆษณาเนทีฟและเอ็กซ์โป
 base-64
  • Cloud Storage

โพลีฟิลล์ที่แนะนำ

การทดแทน ใบอนุญาต
สเปน เวอร์ชันเสถียร MIT
ดึงข้อมูล - "ข้ามการดึงข้อมูล" - เหมาะสำหรับเบราว์เซอร์เวอร์ชันเก่า MIT
fetch - `undici` - เหมาะสําหรับ Node.js มากที่สุด MIT
base-64 MIT

การตั้งค่า Polyfill ที่จำเป็นสำหรับ React Native และ Expo

สําหรับ React Native และ Expo หากอัปโหลดสตริงที่เข้ารหัสแบบ Base64 คุณจะต้องทําดังนี้

ติดตั้ง base-64 จาก npm โดยทำดังนี้

npm install base-64

นำเข้า decode จาก base-64 และแนบกับขอบเขตส่วนกลางเป็น atob เพื่อให้ Cloud Storage เข้าถึงได้ 

import { decode } from 'base-64';

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

เพิ่ม polyfill ในแอปพลิเคชัน

ตัวเลือกที่ 1: (แนะนำ) ใช้เครื่องมือรวมที่ผสานรวมกับ Babel

หากคุณใช้เครื่องมือรวม ให้ผสานรวมกับ Babel และ @babel/preset-env เพื่อรับ polyfill

ใช้คู่มือการตั้งค่าแบบอินเทอร์แอกทีฟของ Babel เพื่อดูวิธีผสานรวม Babel กับเครื่องมือจัดกลุ่ม

เมื่อใช้ Babel คุณไม่จำเป็นต้องกังวลว่าจะต้องใช้ polyfill ใดบ้าง แต่ให้ระบุสภาพแวดล้อมเบราว์เซอร์ขั้นต่ำที่คุณต้องรองรับแทน จากนั้น Babel จะเพิ่มโพลีฟิลที่จำเป็นสำหรับคุณ Babel จะช่วยให้ข้อกำหนดในการรองรับเบราว์เซอร์ของคุณได้รับการปฏิบัติตามข้อกำหนดเสมอ แม้ว่า Firebase หรือโค้ดของคุณเองจะเริ่มใช้ฟีเจอร์ใหม่ของ ES ก็ตาม

@babel/preset-env มีรายละเอียดเกี่ยวกับตัวเลือกการกำหนดค่าที่ใช้ได้สำหรับการระบุเป้าหมายสภาพแวดล้อม (ตัวเลือก targets) และการเพิ่ม polyfill (ตัวเลือก useBuiltIns)

ตัวเลือกที่ 2: (ไม่แนะนํา) เพิ่ม polyfill ด้วยตนเอง

คุณเพิ่ม polyfill ด้วยตนเองได้โดยใช้ไลบรารี polyfill ที่ต้องการ (เช่น core-js)

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

core-js ยังมีไฟล์ polyfill แบบรวมทั้งหมดที่คุณสามารถรวมไว้ในหน้า HTML ได้โดยตรง

ตัวเลือกนี้อาจเป็นวิธีที่สะดวกในการจัดการ polyfill หากคุณไม่ได้ใช้ Babel อย่างไรก็ตาม เราไม่แนะนำให้มีตัวเลือกครบวงจรนี้สำหรับแอปเวอร์ชันที่ใช้งานจริง เนื่องจากมักมี Polyfill ที่ไม่จำเป็น ซึ่งจะเพิ่มน้ำหนักหน้าเว็บ และส่งผลให้หน้าเว็บโหลดเร็วขึ้น