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

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

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

เบราว์เซอร์

ผลิตภัณฑ์ Firebase ขอบ ไฟร์ฟอกซ์ โครเมียม ไอโอเอสซาฟารี ซาฟารี
ตรวจสอบแอป
การวิเคราะห์
การรับรองความถูกต้อง
คลาวด์ไฟร์สโตร์
(ยกเว้น
วิริยะ)

(ยกเว้น
วิริยะ
ถ้า iOS < 10)
ฟังก์ชั่นคลาวด์
การติดตั้ง Firebase
การส่งข้อความบนคลาวด์
(Edge 17+ ยกเว้นมือถือ)
การจัดเก็บเมฆ
การตรวจสอบประสิทธิภาพ
ฐานข้อมูลเรียลไทม์
การกำหนดค่าระยะไกล

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

ผลิตภัณฑ์ Firebase ตอบสนองพื้นเมือง โหนด js โครเมียม
ส่วนขยาย
คอร์โดวา
ตรวจสอบแอป
(ใช้ ผู้ให้บริการที่กำหนดเอง เพื่อทำการรับรองอุปกรณ์ดั้งเดิม)

(ใช้ ผู้ให้บริการที่กำหนดเอง )
การวิเคราะห์
การรับรองความถูกต้อง
(เห็น โน๊ต )

(เห็น โน๊ต )

(เห็น โน๊ต )

(เห็น โน๊ต )
คลาวด์ไฟร์สโตร์
(ยกเว้น
วิริยะ)

(ยกเว้น
วิริยะ)
ฟังก์ชั่นคลาวด์
การติดตั้ง Firebase
การส่งข้อความบนคลาวด์
การจัดเก็บเมฆ
(ยกเว้น
อัปโหลด)
การตรวจสอบประสิทธิภาพ
ฐานข้อมูลเรียลไทม์
การกำหนดค่าระยะไกล

โพลีฟิล

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

ส่วนด้านล่างระบุโพลีฟิลส่วนใหญ่ที่คุณอาจต้องการ

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

สภาพแวดล้อม โพลีฟิล
ซาฟารี 7 & 8 & 9 อีเอส สเตเบิล
โหนด < 6.5 อีเอส สเตเบิล

โพลีฟิลเสริม

สภาพแวดล้อม โพลีฟิล ผลิตภัณฑ์ Firebase
  • โหนด
  • ซาฟารี < 10.1
  • ไอโอเอส <10.3
ดึง
  • ฟังก์ชั่นคลาวด์
  • การตรวจสอบประสิทธิภาพ
  • ตอบสนอง Native และ Expo
ฐาน-64
  • การจัดเก็บเมฆ

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

โพลีฟิล ใบอนุญาต
อีเอส สเตเบิล เอ็มไอที
ดึง เอ็มไอที
ฐาน-64 เอ็มไอที

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

สำหรับ React Native และ Expo หากคุณกำลังอัปโหลดสตริงที่เข้ารหัส base-64 คุณต้องดำเนินการดังต่อไปนี้:

ติดตั้ง 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;
}

เพิ่มโพลีฟิลในแอปพลิเคชันของคุณ

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

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

ใช้ คู่มือการตั้งค่า แบบโต้ตอบของ Babel เพื่อเรียนรู้วิธีผสานรวม Babel เข้ากับ Bundler ของคุณ

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

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

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

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

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

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

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