Carregar SDKs do Firebase de URLs reservados

O Firebase Hosting reserva URLs no seu site que começam com /__ . Esse namespace reservado facilita o uso de outros produtos Firebase junto com o Firebase Hosting.

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

Adicione scripts para URLs reservados

Como o Firebase Hosting é veiculado por HTTP/2 quando implantado, você pode aumentar o desempenho carregando arquivos da mesma origem. O Firebase Hosting oferece a versão 8 do SDK JavaScript do Firebase 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 aplicativo. Por exemplo, para incluir apenas o Authentication e o Cloud Firestore, adicione os seguintes scripts na parte inferior da tag <body> , mas antes de usar qualquer serviço 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

A configuração automática do SDK facilita o gerenciamento de vários ambientes (como desenvolvimento, preparação e produção) a partir de uma única base de código. Contando com o URL de hospedagem reservado, você pode implantar o mesmo código em vários projetos do Firebase.

Além de hospedar os próprios SDKs, o namespace reservado também fornece toda a configuração necessária para inicializar o SDK do projeto Firebase associado ao site de hospedagem. Essa configuração do Firebase e inicialização do SDK são fornecidas por um script que você pode incluir diretamente:

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

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

Se você preferir controlar a inicialização sozinho, 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 Firebase JS disponíveis (de URLs de hospedagem reservados)

Produto Firebase Referência da biblioteca (URL reservado)
Núcleo do Firebase
(obrigatório)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Análise
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
Verificação de aplicativo
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Autenticação
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
SDK do 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>
Mensagens na nuvem
<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 Analytics.

Armazenamento na núvem
<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>
Banco de dados em tempo real
<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 o Configuração remota, adicione também o SDK do Firebase para Analytics.

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

Ajudantes de autenticação

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

Além disso, isso permite que você use 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á especificar esse domínio personalizado (em vez do 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), poderá criar um service worker que tenha um "fallback de navegação" e renderize uma URL específica por padrão se ela não corresponder a uma lista de itens pré-armazenados em cache.

Se você estiver usando a biblioteca sw-precache , poderá adicionar uma configuração de lista de permissões de fallback de navegação que exclui o namespace reservado:

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

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