Usar o Firebase em um Progressive Web App (PWA)

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 provisiona certificados SSL sem custos financeiros 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 do Firebase para JavaScript é 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 para atrair novamente os usuários através de eventos na nuvem.

Nesta página, oferecemos uma visão geral de como a plataforma do Firebase pode ajudar a criar um PWA moderno e de alto desempenho usando o SDK do Firebase para JavaScript compatível com vários navegadores.

Acesse nosso guia de iniciação 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 seu app por HTTPS. É possível exibir seu conteúdo em um subdomínio sem custo financeiro do Firebase ou no seu próprio domínio personalizado. Nosso serviço de hospedagem provisiona um certificado SSL para seu domínio personalizado de maneira automática e sem custo financeiro.

Acesse o guia de iniciação do Firebase Hosting para ver como hospedar seu PWA na plataforma do Firebase.

Oferecer um fluxo de autenticação seguro

Fluxo de autenticação ágil e direto

A FirebaseUI oferece um fluxo de autenticação responsivo e direto baseado 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 dos dispositivos do usuário e segue as práticas recomendadas para fluxos de autenticação.

A FirebaseUI é compatível com diversos provedores de login. 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',  // the URL to direct to upon 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, o app pode conectar usuários de forma automática, mesmo em dispositivos diferentes em que eles já colocaram as credenciais de login.

Para ativar o login com um toque usando a FirebaseUI, altere uma linha de configuração (como neste exemplo):

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon 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 curto 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, seu app da Web também pode exibir conteúdo dinâmico gerado no lado do servidor pelo Cloud Functions ou por um app conteinerizado do Cloud Run. Com esse serviço, é possível armazenar em cache o conteúdo dinâmico em uma CDN global avançada com uma linha de código, como esta:

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 do Firebase para JavaScript pode ser parcialmente importado para manter o tamanho do download inicial como mínimo. 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 ...
});

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, como mostrado a seguir:

firebase.firestore().enablePersistence().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 vai 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 começar a usar 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. Por outro lado, você quer manter o nível de participação deles alto. Configure seu PWA para se comunicar com seus usuários de maneira ágil e proativa.

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, envie mensagens de reengajamento para os usuários em eventos na nuvem, como a gravação de dados no Cloud Firestore ou a exclusão da conta de um usuário. Também é possível enviar uma notificação push quando os usuários conseguem 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);
    });