โหลด Firebase SDK จาก URL ที่สงวนไว้

Firebase Hosting จะจอง URL ในเว็บไซต์ของคุณที่ขึ้นต้นด้วย /__ เนมสเปซที่จองไว้นี้ช่วยให้คุณใช้ผลิตภัณฑ์อื่นๆ ของ Firebase ร่วมกับ Firebase Hostingได้ง่ายขึ้น

URL ที่จองไว้เหล่านี้จะใช้งานได้ทั้งเมื่อคุณติดตั้งใช้งานกับ Firebase (firebase deploy) หรือเมื่อคุณเรียกใช้แอปในเซิร์ฟเวอร์ในเครื่อง (firebase serve)

เพิ่มสคริปต์สำหรับ URL ที่จองไว้

เนื่องจาก Firebase Hosting ให้บริการผ่าน HTTP/2 เมื่อติดตั้งใช้งาน คุณจึงเพิ่ม ประสิทธิภาพได้ด้วยการโหลดไฟล์จากต้นทางเดียวกัน Firebase Hosting ให้บริการ เวอร์ชัน 8 ของ Firebase JavaScript SDK จาก URL พิเศษที่มีรูปแบบดังนี้

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

เราขอแนะนำอย่างยิ่งให้โหลดเฉพาะ ไลบรารี ที่ คุณใช้ในแอปเท่านั้น เช่น หากต้องการรวมเฉพาะ Authentication และ Cloud Firestore ให้เพิ่มสคริปต์ต่อไปนี้ที่ด้านล่างของแท็ก <body> แต่ก่อนที่จะใช้บริการใดๆ ของ Firebase:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
</body>

การกำหนดค่า SDK อัตโนมัติ

การกำหนดค่า SDK อัตโนมัติช่วยให้จัดการสภาพแวดล้อมหลายรายการ (เช่น การพัฒนา การทดสอบ และเวอร์ชันที่ใช้งานจริง) จากฐานของโค้ดเดียวได้ง่าย การใช้ URL ที่ จองไว้ช่วยให้คุณติดตั้งใช้งานโค้ดเดียวกันกับโปรเจ็กต์ Firebase หลายรายการได้Hosting

นอกจากจะโฮสต์ SDK เองแล้ว เนมสเปซที่จองไว้ยังมีการกำหนดค่าทั้งหมดที่จำเป็นต่อการเริ่มต้น SDK สำหรับโปรเจ็กต์ Firebase ที่เชื่อมโยงกับเว็บไซต์ Hosting ด้วย การกำหนดค่า Firebase และการเริ่มต้น SDK นี้มีให้โดยสคริปต์ที่คุณสามารถรวมได้โดยตรงดังนี้

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

เมื่อคุณติดตั้งใช้งานกับ Firebase หรือทดสอบแอปในเครื่อง สคริปต์นี้จะกำหนดค่า Firebase JavaScript SDK สำหรับ โปรเจ็กต์ Firebase ที่ใช้งานอยู่และเริ่มต้น SDK โดยอัตโนมัติ

หากต้องการควบคุมการเริ่มต้นด้วยตนเอง ค่าการกำหนดค่า Firebase จะอยู่ในรูปแบบ JSON ด้วย

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});

Firebase JS SDK ที่พร้อมใช้งาน (จาก Hosting URL ที่จองไว้)

ผลิตภัณฑ์ Firebase การอ้างอิงไลบรารี (URL ที่จองไว้)
Firebase Core
(จำเป็น)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analytics
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
App Check
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Authentication
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Firebase การติดตั้งใช้งาน
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

หากต้องการรับประสบการณ์การใช้งาน Cloud Messaging ที่ดีที่สุด ให้เพิ่ม Firebase SDK for Analytics ด้วย

Cloud Storage
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring
(เวอร์ชันเบต้า)
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Realtime Database
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Remote Config
(เวอร์ชันเบต้า)
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

หากต้องการรับประสบการณ์การใช้งาน Remote Config ที่ดีที่สุด ให้เพิ่ม Firebase SDK for Analytics ด้วย

Firebase JavaScript SDK
(SDK ทั้งหมด)
<script src="/__/firebase/8.10.1/firebase.js"></script>

ผู้ช่วยการตรวจสอบสิทธิ์

Firebase Authentication ใช้เนมสเปซที่จองไว้ เพื่อจัดหา JavaScript และ HTML พิเศษสำหรับการตรวจสอบสิทธิ์กับ ผู้ให้บริการผ่าน OAuth ซึ่งช่วยให้โปรเจ็กต์ Firebase แต่ละรายการมีโดเมนย่อย Firebase ที่ไม่ซ้ำกัน ซึ่งจะเพิ่มความปลอดภัยของ Firebase Authentication

นอกจากนี้ ยังช่วยให้คุณใช้โดเมนที่กำหนดเองสำหรับตัวเลือก authDomain ของ firebase.initializeApp() ได้ด้วย หากคุณ กำหนดค่าโดเมนที่กำหนดเอง สำหรับ Firebase Hosting คุณยังระบุโดเมนที่กำหนดเองนั้น (แทน โดเมนย่อย web.app หรือ firebaseapp.com) เมื่อเริ่มต้น Firebase SDK ได้ด้วย ดูรายละเอียดเพิ่มเติมเกี่ยวกับการใช้โดเมนที่กำหนดเองได้ที่ แนวทางปฏิบัติแนะนำสำหรับการใช้ signInWithRedirect

URL ที่จองไว้และ Service Worker

หากคุณกำลังสร้าง Progressive Web App (PWA) คุณอาจสร้าง Service Worker ที่มี "การกลับไปใช้การนำทาง" และแสดง URL ที่เฉพาะเจาะจงโดยค่าเริ่มต้นหากไม่ตรงกับรายการรายการที่แคชไว้ล่วงหน้า

หากใช้ไลบรารี sw-precache คุณสามารถเพิ่มการตั้งค่ารายการที่อนุญาตการกลับไปใช้การนำทางซึ่งไม่รวมเนมสเปซที่จองไว้ได้ดังนี้

{
  navigateFallbackWhitelist: [/^(?!\/__).*/]
}

โดยทั่วไป โปรดทราบว่าเนมสเปซที่มีขีดล่าง 2 ขีดจองไว้สำหรับการใช้งาน Firebase และคุณไม่ควรดักจับคำขอเหล่านี้ใน Service Worker