O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Codelab da web do Firebase

Neste codelab, você vai aprender como usar Firebase para criar facilmente aplicações web através da implementação e implantação de um cliente de chat usando produtos e serviços Firebase.

3b1284f5144b54f6.png

O que você aprenderá

  • Sincronize dados usando o Cloud Firestore e o Cloud Storage para Firebase.
  • Autentique seus usuários usando o Firebase Authentication.
  • Implante seu aplicativo da web no Firebase Hosting.
  • Envie notificações com o Firebase Cloud Messaging.
  • Colete os dados de desempenho do seu aplicativo da web.

O que você precisará

  • O editor IDE / texto de sua escolha, como WebStorm , Atom , Sublime , ou Código VS
  • O gerenciador de pacotes npm , que normalmente vem com Node.js
  • Um terminal / console
  • Um navegador de sua escolha, como o Chrome
  • O código de amostra do codelab (consulte a próxima etapa do codelab para saber como obter o código).

Clone do codelab repositório GitHub a partir da linha de comando:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternativamente, se você não tem git instalado, você pode baixar o repositório como um arquivo ZIP .

Importe o aplicativo inicial

Usando seu IDE, abra ou importe o 📁 web-start diretório do repositório clonado. Este 📁 web-start diretório contém o código de partida para a codelab, que será um aplicativo de bate-papo na web totalmente funcional.

Crie um projeto Firebase

  1. Entrar no Firebase .
  2. No console Firebase, clique em Adicionar Project, e em seguida, nomeie o seu FriendlyChat projeto Firebase. Lembre-se do ID do projeto do seu projeto Firebase.
  3. Desmarque a opção Ativar o Google Analytics para este projecto
  4. Clique em Criar Projeto.

O aplicativo que vamos construir usa produtos Firebase que estão disponíveis para aplicativos da web:

  • Autenticação Firebase para permitir facilmente os seus usuários a assinar em seu aplicativo.
  • Nuvem Firestore para salvar dados estruturados na nuvem e obter notificação instantânea quando alterações de dados.
  • Cloud Storage para Firebase para salvar arquivos na nuvem.
  • Firebase hospedagem para hospedar e servir seus ativos.
  • Firebase Cloud Messaging para enviar notificações push e notificações pop-up do navegador display.
  • Firebase Monitoramento de desempenho para os dados de desempenho do usuário a cobrar para o seu aplicativo.

Alguns desses produtos precisam de configuração especial ou precisam ser ativados usando o console do Firebase.

Adicionar um aplicativo da web do Firebase ao projeto

  1. Clique no ícone da web 58d6543a156e56f9.png para criar um novo aplicativo da web do Firebase.
  2. Registrar o aplicativo com o apelido de bate-papo amigável, marque a caixa ao lado também configurar Firebase hospedagem para esta aplicação. Clique Register aplicativo.
  3. Na próxima etapa, você verá um objeto de configuração. Copie apenas o objeto JS (não torno HTML) em Firebase-config.js

Captura de tela do registro do aplicativo da web

Ativar Google sign-in para autenticação Firebase

Para permitir que os usuários assinem na aplicação web com suas contas do Google, usaremos o sign-in método Google.

Você precisa ativar o login do Google:

  1. No console Firebase, localize a seção Desenvolver no painel esquerdo.
  2. Clique em Autenticação, clique no sinal-in guia método (ou clique aqui para ir diretamente lá).
  3. Ativar o sign-in provedor Google, clique em Salvar.
  4. Defina o nome voltados para o público de seu aplicativo para bate-papo amigável e escolher um suporte de e-mail Project a partir do menu suspenso.
  5. Configure sua tela consentimento OAuth no Google Cloud Console e adicionar um logotipo:

d89fb3873b5d36ae.png

Ativar Cloud Firestore

O aplicativo da Web usa Nuvem Firestore para guardar as mensagens de bate-papo e receber novas mensagens de chat.

Você precisará habilitar o Cloud Firestore:

  1. Na seção de construção do o Firebase console, clique Firestore banco de dados.
  2. Clique em Criar banco de dados no painel de Nuvem Firestore.

729991a081e7cd5.png

  1. Selecione a opção Iniciar o modo de teste em, em seguida, clique em Avançar depois de ler o aviso sobre as regras de segurança.

O modo de teste garante que possamos gravar livremente no banco de dados durante o desenvolvimento. Tornaremos nosso banco de dados mais seguro posteriormente neste codelab.

77e4986cbeaf9dee.png

  1. Defina o local onde seus dados do Cloud Firestore são armazenados. Você pode deixar isso como o padrão ou escolher uma região perto de você. Clique em Concluído para fornecimento Firestore.

9f2bb0d4e7ca49c7.png

Habilitar Cloud Storage

O aplicativo da web usa Cloud Storage para Firebase para armazenar, fazer upload e compartilhar fotos.

Você precisará habilitar o Cloud Storage:

  1. Na seção de construção do o Firebase console, clique em Armazenamento.
  2. Se não há nenhum botão Primeiros passos, isso significa que o armazenamento em nuvem já está ativado, e você não precisa seguir os passos abaixo.
  3. Clique Get Started.
  4. Leia o aviso sobre regras de segurança para o seu projecto Firebase, clique em Avançar.

Com as regras de segurança padrão, qualquer usuário autenticado pode gravar qualquer coisa no Cloud Storage. Vamos tornar nosso armazenamento mais seguro posteriormente neste codelab.

62f1afdcd1260127.png

  1. O local do Cloud Storage é pré-selecionado com a mesma região que você escolheu para seu banco de dados Cloud Firestore. Clique em Concluído para concluir a configuração.

1d7f49ebaddb32fc.png

A interface de linha de comando (CLI) do Firebase permite que você use o Firebase Hosting para servir seu aplicativo da web localmente, bem como para implantar seu aplicativo da web em seu projeto do Firebase.

  1. Instale a CLI executando o seguinte comando npm:
npm -g install firebase-tools
  1. Verifique se a CLI foi instalada corretamente executando o seguinte comando:
firebase --version

Certifique-se de que a versão da Firebase CLI é v4.1.0 ou posterior.

  1. Autorize a Firebase CLI executando o seguinte comando:
firebase login

Configuramos o modelo de aplicativo da web para extrair a configuração do seu aplicativo para Firebase Hosting do diretório local do seu aplicativo (o repositório que você clonou anteriormente no codelab). Mas para obter a configuração, precisamos associar seu aplicativo ao projeto Firebase.

  1. Certifique-se de que a sua linha de comando está acessando local do seu aplicativo web-start diretório.
  2. Associe seu aplicativo ao projeto do Firebase executando o seguinte comando:
firebase use --add
  1. Quando solicitado, selecione o ID do projeto, em seguida, dar o seu projeto Firebase um alias.

Um alias é útil se você tiver vários ambientes (produção, teste, etc). No entanto, para este codelab, vamos apenas usar o alias default .

  1. Siga as instruções restantes em sua linha de comando.

Agora que importou e configurou seu projeto, você está pronto para executar o aplicativo da web pela primeira vez.

  1. Em um console da web-start diretório, execute o seguinte comando Firebase CLI:
firebase serve --only hosting
  1. Sua linha de comando deve exibir a seguinte resposta:
✔  hosting: Local server: http://localhost:5000

Estamos usando o hosting Firebase emulador para servir nosso aplicativo localmente. O aplicativo web agora deve estar disponível a partir de http: // localhost: 5000 . Todos os arquivos que estão localizados sob o public subdiretório são servidos.

  1. Usando seu navegador, abra o aplicativo em http: // localhost: 5000 .

Você deverá ver a IU do aplicativo FriendlyChat, que (ainda!) Não está funcionando:

4c23f9475228cef4.png

O aplicativo não pode fazer nada agora, mas com a sua ajuda fará em breve! Até agora, apenas apresentamos a IU para você.

Vamos agora construir um chat em tempo real!

Importar o Firebase SDK

Precisamos importar o Firebase SDK para o aplicativo. Existem várias maneiras de fazer isso, como descrito em nossa documentação . Por exemplo, você pode importar a biblioteca de nosso CDN. Ou você pode instalá-lo localmente usando npm e empacotá-lo em seu aplicativo se estiver usando o Browserify.

Nós estamos indo para obter o Firebase SDK do NPM e usar Webpack para agrupar o nosso código. Estamos fazendo isso para que o Webpack possa remover qualquer código desnecessário, mantendo nosso tamanho de pacote JS pequeno para garantir que nosso aplicativo carregue o mais rápido possível. Por esta codelab, que já criou um web-start/package.json arquivo que inclui o SDK Firebase como uma dependência, bem como importados as funções necessárias no topo da web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

Durante este codelab, usaremos Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging e Monitoramento de desempenho, portanto, estamos importando todas as suas bibliotecas. Em seus aplicativos futuros, certifique-se de importar apenas as partes do Firebase que você precisa, para encurtar o tempo de carregamento do seu aplicativo.

Instale o Firebase SDK e inicie a compilação do Webpack

Precisamos executar alguns comandos para iniciar a construção do nosso aplicativo.

  1. Abra uma nova janela de terminal
  2. Certifique-se de que você está no web-start diretório
  3. Execute npm install para baixar o SDK Firebase
  4. Execute npm run start para iniciar Webpack. O Webpack agora reconstruirá continuamente nosso código cource para o resto do codelab.

Configure o Firebase

Também precisamos configurar o SDK do Firebase para informar qual projeto do Firebase estamos usando.

  1. Vá para suas configurações de projeto no console Firebase
  2. No cartão "Seus aplicativos", selecione o apelido do aplicativo para o qual você precisa de um objeto de configuração.
  3. Selecione "Config" no painel de snippet do Firebase SDK.
  4. Copie a configuração do objeto trecho, em seguida, adicioná-lo à web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Agora, vá para o fundo do web-start/src/index.js e inicializar Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

O Firebase SDK agora deve estar pronto para uso, uma vez que é importado e inicializado em index.html . Estamos indo para implementar login de usuário usando autenticação Firebase .

Autentique seus usuários com o Login do Google

No aplicativo, quando um usuário clica no Entrar com o botão Google, o signIn função é acionado. (Já configuramos isso para você!) Para este codelab, queremos autorizar o Firebase a usar o Google como provedor de identidade. Vamos usar um pop-up, mas vários outros métodos estão disponíveis a partir Firebase.

  1. Na web-start diretório, no subdiretório src/ , abertos index.js .
  2. Encontre a função signIn .
  3. Substitua a função inteira com o código a seguir.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

O signOut função é acionado quando o usuário clica no botão Sair.

  1. Volte para o arquivo src/index.js .
  2. Encontre a função signOutUser .
  3. Substitua a função inteira com o código a seguir.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Rastreie o estado de autenticação

Para atualizar nossa IU de acordo, precisamos verificar se o usuário está conectado ou desconectado. Com o Firebase Authentication, você pode registrar um observador no estado de autenticação que será acionado sempre que o estado de autenticação mudar.

  1. Volte para o arquivo src/index.js .
  2. Encontre a função initFirebaseAuth .
  3. Substitua toda a função pelo código a seguir.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

O código acima registra a função authStateObserver como o observador de estado de autenticação. Ele será acionado sempre que o estado de autenticação for alterado (quando o usuário fizer login ou logout). É neste ponto que atualizaremos a IU para exibir ou ocultar o botão de login, o botão de logout, a imagem de perfil do usuário conectado e assim por diante. Todas essas partes da IU já foram implementadas.

Exibir as informações do usuário conectado

Queremos exibir a imagem do perfil do usuário conectado e o nome do usuário na barra superior de nosso aplicativo. Em Firebase, o assinaram-in de dados do usuário está sempre disponível no currentUser objeto. Mais cedo, montamos a authStateObserver função para gatilho quando o usuário se para que nossas atualizações de interface do usuário em conformidade. Ele vai chamar getProfilePicUrl e getUserName quando acionado.

  1. Volte para o arquivo src/index.js .
  2. Encontrar as funções getProfilePicUrl e getUserName .
  3. Substitua ambas as funções pelo código a seguir.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

Exibimos uma mensagem de erro se o usuário tentar enviar mensagens quando o usuário não está conectado. (Você pode tentar, no entanto!) Portanto, precisamos detectar se o usuário está realmente conectado.

  1. Volte para o arquivo src/index.js .
  2. Encontre a função isUserSignedIn .
  3. Substitua a função inteira com o código a seguir.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Teste o login no aplicativo

  1. Se seu aplicativo ainda estiver sendo servido, atualize-o no navegador. Caso contrário, execute firebase serve --only hosting na linha de comando para começar a servir o aplicativo a partir de http: // localhost: 5000 , e, em seguida, abri-lo no seu browser.
  2. Faça login no aplicativo usando o botão de login e sua conta do Google. Se você ver uma mensagem de erro informando auth/operation-not-allowed , verificação para certificar-se de que você ativou o Google Sign-in como um provedor de autenticação no console Firebase.
  3. Após o login, sua foto de perfil e nome de usuário devem ser exibidos: c7401b3d44d0d78b.png

Nesta seção, escreveremos alguns dados no Cloud Firestore para que possamos preencher a IU do aplicativo. Isso pode ser feito manualmente com o console de Firebase , mas vamos fazê-lo no próprio aplicativo para demonstrar uma gravação básica Nuvem Firestore.

Modelo de dados

Os dados do Cloud Firestore são divididos em coleções, documentos, campos e subcoleções. Nós iremos guardar cada mensagem do chat como um documento em uma coleção de nível superior chamada messages .

688d7bc5fb662b57.png

Adicionar mensagens ao Cloud Firestore

Para armazenar as mensagens de bate-papo que são escritos por usuários, usaremos Nuvem Firestore .

Nesta seção, você adicionará a funcionalidade para que os usuários gravem novas mensagens em seu banco de dados. Um usuário clicar no botão ENVIAR irá acionar o trecho de código abaixo. Ele adiciona um objeto de mensagem com o conteúdo dos campos de mensagem para sua instância do Cloud Firestore na messages coleção. O add() método adiciona um novo documento com um ID gerado automaticamente à coleção.

  1. Volte para o arquivo src/index.js .
  2. Encontre a função saveMessage .
  3. Substitua a função inteira com o código a seguir.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Teste o envio de mensagens

  1. Se seu aplicativo ainda estiver sendo servido, atualize-o no navegador. Caso contrário, execute firebase serve --only hosting na linha de comando para começar a servir o aplicativo a partir de http: // localhost: 5000 , e, em seguida, abri-lo no seu browser.
  2. Depois de entrar, digite uma mensagem como "Hey lá!", E clique em Enviar. Isso gravará a mensagem no Cloud Firestore. No entanto, você não vai ainda ver os dados em seu aplicativo web real, porque ainda precisamos implementar recuperando os dados (a próxima seção do codelab).
  3. Você pode ver a mensagem recém-adicionada no console do Firebase. Abra seu Firebase console. Sob a seção Desenvolver clique Firestore banco de dados (ou clique aqui e selecione seu projeto) e você deve ver a coleção de mensagens com a sua mensagem recém-adicionado:

6812efe7da395692.png

mensagens Sincronizar

Para ler mensagens no aplicativo, precisaremos adicionar ouvintes que disparam quando os dados mudam e, em seguida, criar um elemento de IU que mostra novas mensagens.

Vamos adicionar um código que escuta as mensagens recém-adicionadas do aplicativo. Neste código, vamos registrar o ouvinte que escuta as alterações feitas nos dados. Exibiremos apenas as últimas 12 mensagens do bate-papo para evitar a exibição de um longo histórico ao carregar.

  1. Volte para o arquivo src/index.js .
  2. Encontrar a função loadMessages .
  3. Substitua a função inteira com o código a seguir.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Para ouvir as mensagens no banco de dados, nós criamos uma consulta em uma coleção usando a collection função para especificar qual a coleta dos dados que queremos ouvir é. No código acima, nós está ouvindo as mudanças dentro das messages coleção, que é onde as mensagens de bate-papo são armazenadas. Também estamos aplicando um limite de apenas ouvir as últimas 12 mensagens usando .limit(12) e ordenar as mensagens por data usando orderBy('timestamp', 'desc') para obter as 12 mensagens mais recentes.

O onSnapshot função recebe uma consulta como seu primeiro parâmetro, e uma função de retorno de chamada como seu segundo. A função de retorno de chamada será acionada quando houver alguma alteração nos documentos que correspondam à consulta. Isso pode acontecer se uma mensagem for excluída, modificada ou adicionada. Você pode ler mais sobre isso na documentação Nuvem Firestore .

Testar mensagens de sincronização

  1. Se seu aplicativo ainda estiver sendo servido, atualize-o no navegador. Caso contrário, execute firebase serve --only hosting na linha de comando para começar a servir o aplicativo a partir de http: // localhost: 5000 , e, em seguida, abri-lo no seu browser.
  2. As mensagens que você criou anteriormente no banco de dados devem ser exibidas na UI do FriendlyChat (veja abaixo). Sinta-se à vontade para escrever novas mensagens; eles devem aparecer instantaneamente.
  3. (Opcional) Você pode tentar manualmente apagar, modificar ou adicionar novas mensagens diretamente na seção Banco de Dados do console Firebase; quaisquer alterações devem ser refletidas na IU.

Parabéns! Você está lendo documentos do Cloud Firestore em seu aplicativo!

2168dec79b573d07.png

Agora vamos adicionar um recurso que compartilha imagens.

Embora o Cloud Firestore seja bom para armazenar dados estruturados, o Cloud Storage é mais adequado para armazenar arquivos. Cloud Storage para Firebase é um serviço de armazenamento de arquivos / blob, e vamos usá-lo para armazenar todas as imagens que um usuário compartilhar usando nosso aplicativo.

Salvar imagens no Cloud Storage

Para este codelab, já adicionamos para você um botão que aciona uma caixa de diálogo de seleção de arquivo. Depois de selecionar um arquivo, o saveImageMessage função é chamada, e você pode obter uma referência para o arquivo selecionado. O saveImageMessage função realiza o seguinte:

  1. Cria uma mensagem de bate-papo de "espaço reservado" no feed de bate-papo, para que os usuários vejam uma animação de "Carregando" enquanto carregamos a imagem.
  2. Uploads o arquivo de imagem para Cloud Storage para este caminho: /<uid>/<messageId>/<file_name>
  3. Gera um URL publicamente legível para o arquivo de imagem.
  4. Atualiza a mensagem de bate-papo com o URL do arquivo de imagem recém-carregado em vez da imagem de carregamento temporária.

Agora você adicionará a funcionalidade para enviar uma imagem:

  1. Volte para o arquivo src/index.js .
  2. Encontre a função saveImageMessage .
  3. Substitua a função inteira com o código a seguir.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Teste o envio de imagens

  1. Se seu aplicativo ainda estiver sendo servido, atualize-o no navegador. Caso contrário, execute firebase serve --only hosting na linha de comando para começar a servir o aplicativo a partir de http: // localhost: 5000 , e, em seguida, abri-lo no seu browser.
  2. Depois de entrar, clique no botão de upload de imagem 13734cb66773e5a3.png e selecione um arquivo de imagem usando o seletor de arquivos. Se você está procurando uma imagem, não hesite em usar esta bela imagem de um copo de café .
  3. Uma nova mensagem deve aparecer na IU do aplicativo com a imagem selecionada: 3b1284f5144b54f6.png

Se você tentar adicionar uma imagem sem estar conectado, verá uma notificação do Toast informando que é necessário fazer login para adicionar imagens.

Agora vamos adicionar suporte para notificações do navegador. O aplicativo notificará os usuários quando novas mensagens forem postadas no chat. Firebase Cloud Messaging (FCM) é uma solução de mensagens multi-plataforma que permite entregar de forma confiável mensagens e notificações, sem nenhum custo.

Adicionar o service worker FCM

O aplicativo web precisa de um trabalhador de serviço que irá receber e notificações de exibição da web.

  1. A partir do web-start diretório, no src diretório, aberta firebase-messaging-sw.js .
  2. Adicione o seguinte conteúdo a esse arquivo.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

O service worker precisa apenas carregar e inicializar o Firebase Cloud Messaging SDK, que se encarregará de exibir as notificações.

Obtenha tokens de dispositivo FCM

Quando notificações foram ativado em um dispositivo ou navegador, você será dado um dispositivo de token. Este token de dispositivo é o que usamos para enviar uma notificação a um determinado dispositivo ou navegador específico.

Quando o usuário se-nos, nós chamamos o saveMessagingDeviceToken função. É aí que nós vamos chegar o dispositivo FCM token do navegador e salve-o em nuvem Firestore.

  1. Volte para o arquivo src/index.js .
  2. Encontre a função saveMessagingDeviceToken .
  3. Substitua a função inteira com o código a seguir.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

No entanto, este código não funcionará inicialmente. Para que seu aplicativo possa recuperar o token do dispositivo, o usuário precisa conceder a seu aplicativo permissão para mostrar notificações (próxima etapa do codelab).

Solicite permissões para mostrar notificações

Quando o usuário ainda não concedeu permissão ao seu aplicativo para mostrar notificações, você não receberá um token de dispositivo. Neste caso, chamamos o firebase.messaging().requestPermission() método, que irá exibir um diálogo do navegador pedir essa permissão ( em navegadores suportados ).

8b9d0c66dc36153d.png

  1. Volte para o arquivo src/index.js .
  2. Encontrar a função requestNotificationsPermissions .
  3. Substitua a função inteira com o código a seguir.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Obtenha o token do seu dispositivo

  1. Se seu aplicativo ainda estiver sendo servido, atualize-o no navegador. Caso contrário, execute firebase serve --only hosting na linha de comando para começar a servir o aplicativo a partir de http: // localhost: 5000 , e, em seguida, abri-lo no seu browser.
  2. Depois de fazer login, a caixa de diálogo de permissão de notificações deve aparecer: bd3454e6dbfb6723.png
  3. Clique em Permitir.
  4. Abra o console JavaScript do seu navegador. Você deverá ver a seguinte mensagem: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Copie o token do seu dispositivo. Você precisará dele para a próxima etapa do codelab.

Envie uma notificação para o seu dispositivo

Agora que você tem o token do seu dispositivo, pode enviar uma notificação.

  1. Abra a guia Cloud Messaging do console Firebase .
  2. Clique em "Nova Notificação"
  3. Insira um título e um texto de notificação.
  4. No lado direito da tela, clique em "enviar uma mensagem de teste"
  5. Digite o token do dispositivo que você copiou do console JavaScript do seu navegador e clique no sinal de mais ("+")
  6. Clique em "teste"

Se o seu aplicativo estiver em primeiro plano, você verá a notificação no console JavaScript.

Se seu aplicativo estiver em segundo plano, uma notificação deve aparecer em seu navegador, como neste exemplo:

de79e8638a45864c.png

Regras de segurança de banco de dados Visualização

Nuvem Firestore usa uma específica linguagem regras para definir os direitos de acesso, segurança e validações de dados.

Ao configurar o projeto Firebase no início deste codelab, optamos por usar as regras de segurança padrão do "Modo de teste" para não restringir o acesso ao armazenamento de dados. Na consola Firebase , na guia Regras da seção Banco de Dados, você pode visualizar e modificar essas regras.

Agora, você deve ver as regras padrão, que não restringem o acesso ao armazenamento de dados. Isso significa que qualquer usuário pode ler e gravar em qualquer coleção de seu armazenamento de dados.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Atualizaremos as regras para restringir as coisas usando as seguintes regras:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Atualizar as regras de segurança do banco de dados

Existem duas maneiras de editar as regras de segurança do seu banco de dados, no Firebase console ou a partir de um arquivo de regras local implantado usando a Firebase CLI.

Para atualizar as regras de segurança no Firebase console:

  1. Vá para a seção de banco de dados no painel esquerdo, e depois clique na guia Regras.
  2. Substitua as regras padrão que já estão no console pelas regras mostradas acima.
  3. Clique em Publicar.

Para atualizar as regras de segurança de um arquivo local:

  1. A partir do web-start diretório, abra firestore.rules .
  2. Substitua as regras padrão que já estão no arquivo pelas regras mostradas acima.
  3. A partir do web-start diretório, aberta firebase.json .
  4. Adicionar os firestore.rules atributo apontando para firestore.rules , como mostrado abaixo. (A hosting atributo já deve estar no arquivo.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Implante as regras de segurança usando a Firebase CLI executando o seguinte comando:
firebase deploy --only firestore
  1. Sua linha de comando deve exibir a seguinte resposta:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Ver regras de segurança do Cloud Storage

Cloud Storage para Firebase usa uma específica linguagem regras para definir os direitos de acesso, segurança e validações de dados.

Ao configurar o projeto Firebase no início deste codelab, optamos por usar a regra de segurança padrão do Cloud Storage que permite que apenas usuários autenticados usem o Cloud Storage. Na consola Firebase , na guia Regras da seção de armazenamento, você pode visualizar e modificar as regras. Você deve ver a regra padrão que permite que qualquer usuário conectado leia e grave quaisquer arquivos em seu intervalo de armazenamento.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Atualizaremos as regras para fazer o seguinte:

  • Permitir que cada usuário grave apenas em suas próprias pastas específicas
  • Permitir que qualquer pessoa leia no Cloud Storage
  • Certifique-se de que os arquivos carregados são imagens
  • Restrinja o tamanho das imagens que podem ser carregadas em no máximo 5 MB

Isso pode ser implementado usando as seguintes regras:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Atualize as regras de segurança do Cloud Storage

Existem duas maneiras de editar suas regras de segurança de armazenamento: no Firebase console ou a partir de um arquivo de regras local implantado usando a Firebase CLI.

Para atualizar as regras de segurança no Firebase console:

  1. Vá para a seção de armazenamento no painel esquerdo, e depois clique na guia Regras.
  2. Substitua a regra padrão que já está no console pelas regras mostradas acima.
  3. Clique em Publicar.

Para atualizar as regras de segurança de um arquivo local:

  1. A partir do web-start diretório, abra storage.rules .
  2. Substitua as regras padrão que já estão no arquivo pelas regras mostradas acima.
  3. A partir do web-start diretório, aberta firebase.json .
  4. Adicione os storage.rules atribuir apontando para a storage.rules arquivo, como mostrado abaixo. (A hosting e database atributo já deve estar no arquivo.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Implante as regras de segurança usando a Firebase CLI executando o seguinte comando:
firebase deploy --only storage
  1. Sua linha de comando deve exibir a seguinte resposta:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Você pode usar o SDK do Monitoramento de Desempenho para coletar dados de desempenho do mundo real do seu aplicativo e, em seguida, revisar e analisar esses dados no console do Firebase. O Monitoramento de desempenho ajuda você a entender onde e quando o desempenho de seu aplicativo pode ser melhorado para que você possa usar essas informações para corrigir problemas de desempenho.

Existem várias maneiras de integração com o SDK do Firebase Performance Monitoring JavaScript. Neste codelab, nós treinamos Monitoramento de desempenho de URLs de hospedagem. Consulte a documentação para ver outros métodos que viabilizem o SDK.

Traços automáticos

Uma vez que já importar getPerformance no topo da web-start/src/index.js , só precisamos adicionar uma linha para dizer Monitoramento de desempenho de carregamento da página automaticamente coleta e métricas de solicitação de rede para você quando os usuários visitam seu site implantado!

  1. Na web-start/src/index.js , adicione a seguinte linha abaixo da existente TODO inicializar monitoramento de desempenho.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Meça o primeiro atraso de entrada (opcional)

Atraso primeira entrada é útil uma vez que o navegador respondendo a uma interação com o usuário dá a seus usuários as suas primeiras impressões sobre a capacidade de resposta do seu aplicativo.

O primeiro atraso de entrada começa quando o usuário interage pela primeira vez com um elemento na página, como clicar em um botão ou hiperlink. Ele para imediatamente depois que o navegador consegue responder à entrada, o que significa que o navegador não está ocupado carregando ou analisando o conteúdo da sua página.

Se quiser medir o primeiro atraso de entrada, você precisará incluir o código a seguir diretamente.

  1. Abrir public/index.html .
  2. Descomente o script tag na seguinte linha.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Para ler mais sobre o primeiro polyfill atraso de entrada, dê uma olhada na documentação .

Ver dados de desempenho

Como você ainda não implantou seu site (você o implantará na próxima etapa), aqui está uma captura de tela mostrando as métricas sobre o desempenho de carregamento de página que você verá no console do Firebase em 30 minutos após os usuários interagirem com seu site implantado :

29389131150f33d7.png

Ao integrar o SDK do Monitoramento de Desempenho em seu aplicativo, você não precisa escrever nenhum outro código antes que seu aplicativo comece a monitorar automaticamente vários aspectos críticos de desempenho. Para aplicativos da web, o SDK registra aspectos como a primeira pintura com conteúdo, capacidade dos usuários de interagir com seu aplicativo e muito mais.

Você também pode configurar rastreamentos, métricas e atributos personalizados para medir aspectos específicos do seu aplicativo. Visite a documentação para saber mais sobre traços personalizados e métricas e atributos personalizados .

Ofertas Firebase um serviço de hospedagem para servir os seus ativos e aplicações web. Você pode implantar seus arquivos no Firebase Hosting usando a Firebase CLI. Antes de implantar, você precisa especificar no seu firebase.json arquivo que arquivos locais devem ser implantados. Para este codelab, já fizemos isso para você porque esta etapa foi necessária para servir nossos arquivos durante este codelab. As configurações de hospedagem são especificadas sob a hosting atributo:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Estas definições dizer a CLI que queremos implantar todos os arquivos no ./public diretório ( "public": "./public" ).

  1. Certifique-se de que a sua linha de comando está acessando local do seu aplicativo web-start diretório.
  2. Implante seus arquivos no projeto do Firebase executando o seguinte comando:
firebase deploy --except functions
  1. O console deve exibir o seguinte:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Visite seu aplicativo da web que agora está totalmente hospedado em um CDN global usando Firebase Hosting em dois de seus próprios subdomínios do Firebase:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

Alternativamente, você pode executar firebase open hosting:site na linha de comando.

Visite a documentação para saber mais sobre como Firebase obras de hospedagem .

Vá à seção Hospedando consola Firebase do seu projeto para visualizar as informações de hospedagem útil e ferramentas, incluindo o histórico de suas implanta, a funcionalidade de reverter para versões anteriores do seu aplicativo, e o fluxo de trabalho para configurar um domínio personalizado.

Você usou o Firebase para criar um aplicativo da web de bate-papo em tempo real!

O que cobrimos

  • Firebase Authentication
  • Cloud Firestore
  • SDK do Firebase para Cloud Storage
  • Firebase Cloud Messaging
  • Monitoramento de desempenho do Firebase
  • Firebase Hosting

Próximos passos

Learn more