Catch up on everthing we announced at this year's Firebase Summit. Learn more

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 com o carregamento de arquivos da mesma origem. Todas as versões do SDK do Firebase para JavaScript são disponibilizadas pelo Firebase Hosting a partir de URLs especiais formatados da seguinte forma:

/__/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 inferior 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.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.10.0/firebase-auth.js"></script>
  <script src="/__/firebase/8.10.0/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.0/firebase-app.js"></script>
Analytics

<script src="/__/firebase/8.10.0/firebase-analytics.js"></script>
App Check

<script src="/__/firebase/8.10.0/firebase-app-check.js"></script>
Authentication

<script src="/__/firebase/8.10.0/firebase-auth.js"></script>
Cloud Firestore

<script src="/__/firebase/8.10.0/firebase-firestore.js"></script>
SDK de cliente do Cloud Functions para Firebase

<script src="/__/firebase/8.10.0/firebase-functions.js"></script>
Cloud Messaging

<script src="/__/firebase/8.10.0/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.0/firebase-storage.js"></script>
Monitoramento de desempenho
(versão Beta)

<script src="/__/firebase/8.10.0/firebase-performance.js"></script>
Realtime Database

<script src="/__/firebase/8.10.0/firebase-database.js"></script>
Configuração remota
(versão Beta)

<script src="/__/firebase/8.10.0/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.0/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.

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.