Carregar os SDKs do Firebase usando URLs reservados

Os URLs são reservados pelo Firebase Hosting no seu site começando com /__. O uso de outros produtos do Firebase junto com o Firebase Hosting é facilitado por esse namespace reservado.

Esses URLs reservados estão disponíveis quando você implanta no Firebase (firebase deploy) ou quando executa o app em um servidor local (firebase serve).

Adicionar scripts a URLs reservados

Como o Firebase Hosting é disponibilizado por HTTP/2 quando implantado, é possível melhorar o desempenho ao carregar arquivos da mesma origem. O Firebase Hosting disponibiliza a versão 8 do SDK do Firebase para JavaScript de URLs especiais formatados da seguinte maneira:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

É altamente recomendável carregar apenas as bibliotecas que você usa no seu app. Por exemplo, para incluir somente o Authentication e o Cloud Firestore, adicione os seguintes scripts à parte de baixo da sua tag <body> antes de usar os serviços do 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>

Configuração automática do SDK

O gerenciamento de vários ambientes (como desenvolvimento, preparo e produção) é facilitado pela configuração automática do SDK a partir de uma única base de código. Ao contar com o URL reservado do Hosting, você implanta o mesmo código em vários projetos do Firebase.

Além da hospedagem dos próprios SDKs, o namespace reservado também fornece a configuração necessária para inicializar o SDK para o projeto do Firebase associado ao site do Hosting. Essa configuração do Firebase e a inicialização do SDK são fornecidas por um script que pode ser incluído diretamente:

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

Quando você implanta no Firebase ou testa seu app localmente, esse script configura automaticamente o SDK do Firebase para JavaScript para o projeto ativo do Firebase e inicializa o SDK.

Se você preferir controlar a inicialização, os valores de configuração do Firebase também estão disponíveis no formato JSON:

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

SDKs do Firebase para JS disponíveis (de URLs reservados do Hosting)

Produto do Firebase Referência de biblioteca (URL reservado)
Firebase básico
(obrigatório)
<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>
SDK de cliente do Cloud Functions para Firebase
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Instalações do Firebase
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Para uma experiência ideal com o Cloud Messaging, adicione também o SDK do Firebase para Google Analytics.

Cloud Storage
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Monitoramento de desempenho
(versão Beta)
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Realtime Database
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Configuração remota
(versão Beta)
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

Para uma experiência ideal com a Configuração remota, adicione também o SDK do Firebase para Google Analytics.

SDK do Firebase para JavaScript
(SDK completo)
<script src="/__/firebase/8.10.1/firebase.js"></script>

Auxiliares do Auth

O Firebase Authentication usa o namespace reservado para fornecer JavaScript e HTML especiais a fim de concluir a autenticação com provedores por meio do OAuth. Isso permite que cada projeto do Firebase tenha um subdomínio exclusivo, o que aumenta a segurança do Firebase Authentication.

Além disso, você pode usar seu próprio domínio personalizado para a opção authDomain de firebase.initializeApp(). Se você configurar um domínio personalizado para o Firebase Hosting, também poderá especificá-lo em vez de fazer isso com o subdomínio web.app ou firebaseapp.com ao inicializar os SDKs do Firebase. Consulte Práticas recomendadas para usar o signInWithRedirect para mais detalhes sobre como usar um domínio personalizado.

URLs reservados e service workers

Se você estiver criando um Progressive Web App (PWA), gere um service worker que tenha um fallback de navegação e renderize um URL específico por padrão, caso ele não corresponda a uma lista de itens armazenados previamente em cache.

Se você estiver usando a biblioteca sw-precache, adicione uma configuração de lista de permissões do fallback de navegação que exclua o namespace reservado:

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

Em geral, lembre-se de que o namespace com sublinhado duplo é reservado para uso pelo Firebase e você não deve interceptar essas solicitações no seu service worker.