Progressive Web Apps (PWAs) são aplicativos da web que seguem um conjunto de diretrizes destinadas a garantir que seus usuários tenham uma experiência confiável, rápida e envolvente.
O Firebase oferece vários serviços que podem ajudar você a adicionar recursos progressivos ao seu aplicativo com eficiência para atender a muitas práticas recomendadas de PWA, incluindo:
| Melhores práticas de PWA | Como os serviços do Firebase podem ajudar |
|---|---|
| Seguro e protegido |
|
| Tempo de carregamento rápido |
|
| Resiliência de rede |
|
| Envolva os usuários |
|
Esta página oferece uma visão geral de como a plataforma Firebase pode ajudá-lo a criar um PWA moderno e de alto desempenho usando nosso Firebase JavaScript SDK para vários navegadores.
Visite nosso guia de primeiros passos para adicionar o Firebase ao seu aplicativo da web.
Seguro e protegido
Desde servir seu site até implementar um fluxo de autenticação, é fundamental que seu PWA forneça um fluxo de trabalho seguro e confiável.
Sirva seu PWA por HTTPS
HTTPS protege a integridade do seu site e protege a privacidade e a segurança dos seus usuários. Os PWAs devem ser servidos por HTTPS.
O Firebase Hosting , por padrão, veicula o conteúdo do seu aplicativo por HTTPS. Você pode veicular seu conteúdo em um subdomínio gratuito do Firebase ou em seu próprio domínio personalizado . Nosso serviço de hospedagem fornece um certificado SSL para seu domínio personalizado automaticamente e sem nenhum custo.
Visite o guia de primeiros passos do Firebase Hosting para saber como hospedar seu PWA na plataforma Firebase.
Ofereça um fluxo de autenticação seguro
O FirebaseUI fornece um fluxo de autenticação responsivo baseado no Firebase Authentication , permitindo que seu aplicativo integre um fluxo de login sofisticado e seguro com pouco esforço. O 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 oferece suporte a vários provedores de login. Adicione o fluxo de autenticação do FirebaseUI ao seu aplicativo 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);
Visite nossa documentação no GitHub para saber mais sobre as diversas opções de configuração oferecidas pelo FirebaseUI.
Faça login de usuários em vários dispositivos
Ao usar o FirebaseUI para integrar o login com um toque , seu aplicativo pode fazer login automaticamente nos usuários, mesmo em dispositivos diferentes que eles tenham configurado com suas credenciais de login.
Ative o login com um toque usando FirebaseUI alterando uma linha de configuração:
// 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
};
Visite nossa documentação no GitHub para saber mais sobre as diversas opções de configuração oferecidas pelo FirebaseUI.
Tempo de carregamento rápido
Ter um ótimo desempenho melhora a experiência do usuário, ajuda a reter usuários e aumenta a conversão. Ótimo desempenho, como baixo “tempo para a primeira pintura significativa ” e “ tempo para interação ”, é um requisito importante para PWAs.
Sirva seus ativos estáticos com eficiência
O Firebase Hosting veicula seu conteúdo por meio de um CDN global e é compatível com HTTP/2. Quando você hospeda seus ativos estáticos com o Firebase, configuramos tudo isso para você – não há nada extra que você precise fazer para aproveitar as vantagens desse serviço.
Armazene em cache seu conteúdo dinâmico
Com o Firebase Hosting, seu aplicativo da Web também pode veicular conteúdo dinâmico gerado no servidor pelo Cloud Functions ou por um aplicativo em contêiner do Cloud Run . Usando este serviço, você pode armazenar em cache seu conteúdo dinâmico em um poderoso CDN global com uma linha de código:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
Este serviço permite evitar chamadas adicionais para o seu back-end, agilizar as respostas e diminuir custos.
Acesse nossa documentação para saber como fornecer conteúdo dinâmico (com tecnologia Cloud Functions ou Cloud Run) e ativar o cache CDN com Firebase Hosting.
Carregar serviços somente quando eles forem necessários
O SDK JavaScript do Firebase pode ser parcialmente importado para manter o tamanho inicial do download mínimo. Aproveite este SDK modular para importar os serviços do Firebase que seu aplicativo precisa somente quando necessário.
Por exemplo, para aumentar a velocidade inicial de pintura do seu aplicativo, ele pode primeiro carregar o Firebase Authentication . Então, quando seu aplicativo precisar deles, você poderá carregar outros serviços do Firebase, como Cloud Firestore .
Usando um gerenciador de pacotes como o webpack, você pode primeiro carregar o Firebase Authentication:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
Então, quando 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 de rede
Seus usuários podem não ter acesso confiável à Internet. Os PWAs devem se comportar de maneira semelhante aos aplicativos móveis nativos e funcionar offline sempre que possível.
Acesse os dados do seu aplicativo off-line
O Cloud Firestore oferece suporte à persistência de dados offline , o que permite que a camada de dados do seu aplicativo funcione offline de forma transparente. Combinado com Service Workers para armazenar em cache seus ativos estáticos , seu PWA pode funcionar totalmente offline. Você pode ativar a persistência de dados offline com uma linha de código:
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 estiver off-line. O observador do estado de login funcionará normalmente e será acionado mesmo se o usuário recarregar o aplicativo 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 .
Envolva os usuários
Seus usuários querem saber quando você lança novos recursos para seu aplicativo e você deseja manter alto o envolvimento do usuário. Configure seu PWA para entrar em contato com seus usuários de forma proativa e responsável.
Exiba notificações push para seus usuários
Com o Firebase Cloud Messaging , você pode enviar notificações relevantes do seu servidor para os dispositivos dos usuários. Este serviço permite exibir notificações oportunas para seus usuários, mesmo quando o aplicativo está fechado.
Automatize o reengajamento do usuário
Usando o Cloud Functions para Firebase , envie mensagens de reengajamento aos usuários com base em eventos da nuvem, por exemplo, uma gravação de dados no Cloud Firestore ou uma exclusão de conta de usuário . Você também pode enviar uma notificação push a um usuário quando esse usuário obtiver 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);
});