If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

เพิ่มสคริปต์สําหรับ URL ที่สงวนไว้

เนื่องจาก Firebase Hosting จะแสดงผ่าน HTTP/2 เมื่อติดตั้งใช้งาน คุณจึงเพิ่มประสิทธิภาพได้ด้วยการโหลดไฟล์จากต้นทางเดียวกัน Firebase Hosting จะแสดง SDK เวอร์ชัน 8 ของ Firebase JavaScript จาก 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 Hosting ที่สงวนไว้ คุณจะติดตั้งใช้งานโค้ดเดียวกันในโปรเจ็กต์ Firebase หลายโปรเจ็กต์ได้

นอกจากโฮสต์ 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 ที่พร้อมใช้งาน (จาก URL 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> เพิ่ม Firebase SDK สำหรับ Analytics ด้วยเพื่อประสบการณ์การใช้งาน Cloud Messaging ที่ดีที่สุด
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> เพิ่ม Firebase SDK สําหรับ Remote Config ด้วยเพื่อให้ได้รับประสบการณ์การใช้งาน Remote Config ที่ดีที่สุด
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 ที่เฉพาะเจาะจงโดยค่าเริ่มต้น หาก URL นั้นไม่ตรงกับรายการที่แคชไว้ล่วงหน้า

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

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

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