Ir para o console

Usar o Firebase em Progressive Web Apps

Progressive Web Apps (PWAs) são apps da Web que seguem um conjunto de diretrizes para garantir que os usuários tenham uma experiência confiável, rápida e de longo prazo.

O Firebase oferece vários serviços que podem ajudar você a adicionar de maneira eficiente recursos progressivos ao seu app para atender a muitas práticas recomendadas do PWA, incluindo:

Prática recomendada do PWA Como os serviços do Firebase podem ajudar
Proteção e segurança
  • O Firebase Hosting oferece certificados SSL gratuitos para seu domínio personalizado e o subdomínio padrão do Firebase.
  • O Firebase Authentication permite que seus usuários façam login em vários dispositivos com segurança.
  • A FirebaseUI implementa as práticas recomendadas para fluxos de autenticação.
Tempo de carregamento rápido
  • O Firebase Hosting oferece suporte a HTTP/2 e pode armazenar em cache seu conteúdo estático e dinâmico em uma CDN global.
  • O SDK para JavaScript do Firebase é modular e você pode importar dinamicamente as bibliotecas quando precisar delas.
Resiliência da rede
  • Com o Cloud Firestore, é possível armazenar e acessar dados em tempo real e off-line.
  • O Firebase Authentication mantém o estado de autenticação do usuário, mesmo off-line.
Engajamento dos usuários
  • O Firebase Cloud Messaging permite que você envie mensagens push para os dispositivos dos seus usuários.
  • Com o Cloud Functions para Firebase, é possível automatizar as mensagens de reengajamento com base em eventos de nuvem.

Nesta página, oferecemos uma visão geral de como a plataforma do Firebase pode ajudar você a criar um PWA moderno e de alto desempenho usando o SDK para JavaScript do Firebase entre navegadores.

Para ver um exemplo de uso do Firebase na criação de um PWA, consulte nosso aplicativo de amostra de código aberto FriendlyPix. Acesse nosso guia de primeiros passos para adicionar o Firebase ao seu app da Web.

Proteção e segurança

Desde exibir seu site até implementar um fluxo de autenticação, é essencial que seu PWA ofereça um fluxo de trabalho seguro e confiável.

Exibir seu PWA por HTTPS

Serviço de hospedagem de alto desempenho

O HTTPS protege a integridade do seu site e a privacidade e segurança dos seus usuários. Os PWAs precisam ser exibidos por HTTPS.

Por padrão, o Firebase Hosting exibe o conteúdo do app por HTTPS. É possível veicular seu conteúdo em um subdomínio gratuito do Firebase ou no seu próprio domínio personalizado. Nosso serviço de hospedagem fornece um certificado SSL para seu domínio personalizado de maneira automática e gratuita.

Acesse o guia de primeiros passos do Firebase Hosting para saber como hospedar seu PWA na plataforma do Firebase.

Oferecer um fluxo de autenticação seguro

A FirebaseUI (em inglês) oferece um fluxo de autenticação responsivo com base no Firebase Authentication, permitindo que seu app use um fluxo de login sofisticado e seguro com pouco esforço. A FirebaseUI se adapta automaticamente ao tamanho da tela do dispositivos do usuário e segue as práticas recomendadas para fluxos de autenticação.

Fluxo de autenticação responsivo com drop-in

A FirebaseUI é compatível com provedores de login múltiplo. Adicione o fluxo de autenticação da FirebaseUI ao seu app com apenas algumas linhas de código configuradas para provedores de login:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-success',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
};

// Initialize the FirebaseUI widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

Acesse nossa documentação no GitHub para saber mais sobre as várias opções de configuração oferecidas pela FirebaseUI.

Aceitar o login dos usuários em todos os dispositivos

Login em dispositivos diferentes

Ao usar a FirebaseUI para integrar o login com um toque (em inglês), o app pode conectar usuários automaticamente, mesmo em dispositivos diferentes dos que eles usaram para configurar as credenciais de login.

Ative o login com um toque usando a FirebaseUI alterando uma linha de configuração:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-success',
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
};

Acesse nossa documentação no GitHub para saber mais sobre as várias opções de configuração oferecidas pela FirebaseUI.

Tempo de carregamento rápido

Um desempenho excelente melhora a experiência do usuário, ajuda a reter usuários e aumenta a conversão. Um tempo baixo até a primeira exibição significativa é um exemplo de ótimo desempenho. Além disso, o tempo para interação da página é um requisito importante para os PWAs.

Exibir seus recursos estáticos com eficiência

Serviço de hospedagem de alto desempenho

O Firebase Hosting exibe seu conteúdo em uma CDN global e é compatível com HTTP/2. Quando você hospeda seus recursos estáticos com o Firebase, configuramos tudo isso para você. Não é preciso fazer mais nada para aproveitar esse serviço.

Armazenar seu conteúdo dinâmico em cache

Com o Firebase Hosting, o app da Web também pode exibir conteúdo dinâmico gerado no servidor pelo Cloud Functions ou por um aplicativo em contêiner do Cloud Run. Com esse serviço, é possível armazenar seu conteúdo dinâmico em cache com uma linha de código em uma poderosa CDN global:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

Esse serviço permite que você evite chamadas adicionais para o back-end, acelere as respostas e diminua os custos.

Consulte nossa documentação para saber como exibir conteúdo dinâmico (com o Cloud Functions ou o Cloud Run) e ativar o armazenamento em cache da CDN com o Firebase Hosting.

Carregar serviços somente quando eles forem necessários

O SDK para JavaScript do Firebase pode ser parcialmente importado para que se consiga o menor tamanho possível de download inicial. Aproveite esse SDK modular para importar os serviços do Firebase de que seu app precisa apenas quando forem necessários.

Por exemplo, para aumentar a velocidade inicial de exibição do app, ele pode primeiro carregar o Firebase Authentication. Depois, quando seu app precisar, você poderá carregar outros serviços do Firebase, como o Cloud Firestore.

Com um gerenciador de pacotes, como o webpack, é possível carregar primeiro o Firebase Authentication:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

Depois, quando você precisar acessar sua camada de dados, carregue a biblioteca do Cloud Firestore usando importações dinâmicas:

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Para ver um exemplo de importações parciais e dinâmicas com o Firebase, consulte nosso aplicativo de amostra de código aberto FriendlyPix (em inglês) que demonstra essa técnica (em inglês).

Resiliência da rede

Seus usuários podem não ter acesso confiável à Internet. Os PWAs precisam se comportar de maneira semelhante aos apps para dispositivos móveis nativos e precisam funcionar off-line sempre que possível.

Acessar os dados do app off-line

O Cloud Firestore é compatível com a persistência de dados off-line, permitindo que a camada de dados do app trabalhe de maneira transparente quando estiver off-line. Combinado com os Service Workers para armazenar seus recursos estáticos em cache, seu PWA pode funcionar totalmente off-line. É possível ativar a persistência de dados off-line com uma linha de código:

firebase.firestore().enablePersistance().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Manter o estado de autenticação off-line

O Firebase Authentication mantém um cache local de dados de login, permitindo que um usuário conectado anteriormente permaneça autenticado mesmo quando está off-line. O observador de estado de login funcionará normalmente e será acionado mesmo se o usuário recarregar o app enquanto estiver off-line:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Acesse nossa documentação para ver como usar com o Cloud Firestore e o Firebase Authentication.

Engajamento dos usuários

Seus usuários querem saber quando você lança novos recursos para seu app, e você quer manter o engajamento dos usuários alto. Configure seu PWA para alcançar seus usuários de maneira proativa e responsável.

Exibir notificações push para seus usuários

Com o Firebase Cloud Messaging, é possível enviar notificações relevantes do seu servidor para os dispositivos dos usuários. Esse serviço permite exibir notificações oportunas para seus usuários, mesmo quando o app está fechado.

Automatizar o reengajamento dos usuários

Com o Cloud Functions para Firebase, é possível enviar mensagens de reengajamento aos seus usuários com base em eventos de nuvem, como uma gravação de dados no Cloud Firestore ou uma exclusão de conta do usuário. Também é possível enviar uma notificação push para um usuário quando ele conseguir um novo seguidor:

// Send push notification when user gets a new follower.
exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}')
    .onWrite((change, context) => {
      const userUID = context.params.userUID;
      const followerUID = context.params.followerUID;

      const tokens = getUserDeviceTokens(userUID);
      const name = getUserDisplayName(followerUID);

      // Notification details.
      const payload = {
        notification: {
          title: 'You have a new follower!',
          body: `${name} is now following you.`
        }
      };
      return admin.messaging().sendToDevice(tokens, payload);
    });