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 é compatível com HTTP/2 e armazena 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 elas forem necessárias.
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 seu app por HTTPS. É possível exibir 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 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, seu 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 bom desempenho, como um baixo "tempo até a primeira exibição significativa" e "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 servidor pelo Cloud Functions. Com esse serviço, é possível armazenar seu conteúdo dinâmico em cache em uma poderosa 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 você pode exibir conteúdo dinâmico (com tecnologia do Cloud Functions) e ativar o armazenamento em cache de 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 app de amostra de código aberto FriendlyPix, que demonstra essa técnica.

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, o que permite que a camada de dados do seu app trabalhe de maneira transparente 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 de primeiros passos do Cloud Firestore e do 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 esse usuário 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);
    });

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.