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:

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

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 primeiras etapas do Firebase Hosting para saber como hospedar seu PWA na plataforma do Firebase.

Oferecer um fluxo de autenticação seguro

O FirebaseUI oferece um fluxo de autenticação responsivo com base em Firebase Authentication, permitindo que seu app integre 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.

FirebaseUI é compatível com vários 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

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

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 app conteinerizado Cloud Run. Com esse serviço, é possível armazenar o conteúdo dinâmico em cache em uma CDN global com uma linha de código:

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.

Acesse 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 JavaScript pode ser parcialmente importado para manter o tamanho inicial do download 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 de gravação inicial do app, ele pode carregar primeiro Firebase Authentication Depois, quando seu app precisar, você poderá carregar outros serviços do Firebase, como o Cloud Firestore.

Usando um gerenciador de pacotes, como o webpack, é possível carregar primeiro 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 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 persistência de dados off-line, permitindo que a camada de dados do app funcione 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 Cloud Firestore e 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 for Firebase, envie 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 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);
    });