Las aplicaciones web progresivas (PWA) son aplicaciones web que siguen un conjunto de pautas destinadas a garantizar que sus usuarios tengan una experiencia confiable, rápida y atractiva.
Firebase ofrece varios servicios que pueden ayudarte a agregar de manera eficiente funciones progresivas a tu aplicación para cumplir con muchas de las mejores prácticas de PWA, que incluyen:
| Mejores prácticas de PWA | Cómo pueden ayudar los servicios de Firebase |
|---|---|
| Seguro y a salvo |
|
| Tiempo de carga rápido |
|
| Resiliencia de la red |
|
| Involucrar a los usuarios |
|
Esta página ofrece una descripción general de cómo la plataforma Firebase puede ayudarlo a crear una PWA moderna y de alto rendimiento utilizando nuestro SDK de JavaScript Firebase para varios navegadores.
Visita nuestra guía de introducción para agregar Firebase a tu aplicación web.
Seguro y a salvo
Desde brindar servicio a su sitio hasta implementar un flujo de autenticación, es fundamental que su PWA proporcione un flujo de trabajo seguro y confiable.
Sirve tu PWA a través de HTTPS
HTTPS protege la integridad de su sitio web y protege la privacidad y seguridad de sus usuarios. Las PWA deben entregarse a través de HTTPS.
Firebase Hosting , de forma predeterminada, entrega el contenido de tu aplicación a través de HTTPS. Puedes publicar tu contenido en un subdominio de Firebase sin costo o en tu propio dominio personalizado . Nuestro servicio de alojamiento proporciona un certificado SSL para su dominio personalizado de forma automática y sin costo.
Visite la guía de introducción a Firebase Hosting para saber cómo puede alojar su PWA en la plataforma Firebase.
Ofrecer un flujo de autenticación seguro
FirebaseUI proporciona un flujo de autenticación responsivo directo basado en Firebase Authentication , lo que permite que su aplicación integre un flujo de inicio de sesión sofisticado y seguro con poco esfuerzo. FirebaseUI se adapta automáticamente al tamaño de pantalla de los dispositivos de un usuario y sigue las mejores prácticas para los flujos de autenticación.
FirebaseUI admite múltiples proveedores de inicio de sesión. Agrega el flujo de autenticación de FirebaseUI a tu aplicación con solo unas pocas líneas de código configuradas para los proveedores de inicio de sesión:
// 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 nuestra documentación en GitHub para obtener más información sobre las diversas opciones de configuración que ofrece FirebaseUI.
Iniciar sesión de usuarios en todos los dispositivos
Al usar FirebaseUI para integrar el inicio de sesión con un solo toque , tu aplicación puede iniciar sesión automáticamente para los usuarios, incluso en diferentes dispositivos que hayan configurado con sus credenciales de inicio de sesión.
Habilite el inicio de sesión con un solo toque usando FirebaseUI cambiando una línea de configuración:
// 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 nuestra documentación en GitHub para obtener más información sobre las diversas opciones de configuración que ofrece FirebaseUI.
Tiempo de carga rápido
Tener un excelente rendimiento mejora la experiencia del usuario, ayuda a retener a los usuarios y aumenta la conversión. Un excelente rendimiento, como un bajo "tiempo hasta la primera pintura significativa " y " tiempo de interacción ", es un requisito importante para las PWA.
Sirve tus activos estáticos de manera eficiente
Firebase Hosting ofrece su contenido a través de una CDN global y es compatible con HTTP/2. Cuando alojas tus activos estáticos con Firebase, configuramos todo esto por ti; no hay nada más que debas hacer para aprovechar este servicio.
Almacene en caché su contenido dinámico
Con Firebase Hosting, tu aplicación web también puede ofrecer contenido dinámico generado en el lado del servidor mediante Cloud Functions o una aplicación en contenedores de Cloud Run . Con este servicio, puede almacenar en caché su contenido dinámico en una potente CDN global con una línea de código:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
Este servicio le permite evitar llamadas adicionales a su back-end, acelerar las respuestas y disminuir costos.
Visite nuestra documentación para saber cómo puede ofrecer contenido dinámico (con tecnología de Cloud Functions o Cloud Run) y habilitar el almacenamiento en caché de CDN con Firebase Hosting.
Cargue servicios solo cuando sean necesarios
El SDK de JavaScript de Firebase se puede importar parcialmente para mantener el tamaño de descarga inicial al mínimo. Aproveche este SDK modular para importar los servicios de Firebase que su aplicación necesita solo cuando sea necesario.
Por ejemplo, para aumentar la velocidad de pintura inicial de su aplicación, ésta puede cargar primero Firebase Authentication . Luego, cuando tu aplicación los necesite, puedes cargar otros servicios de Firebase, como Cloud Firestore .
Usando un administrador de paquetes como webpack, primero puede cargar Firebase Authentication:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
Luego, cuando necesites acceder a tu capa de datos, carga la biblioteca de Cloud Firestore usando importaciones dinámicas :
import('firebase/firestore').then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
Resiliencia de la red
Es posible que sus usuarios no tengan un acceso confiable a Internet. Las PWA deben comportarse de manera similar a las aplicaciones móviles nativas y funcionar sin conexión siempre que sea posible.
Accede a los datos de tu aplicación sin conexión
Cloud Firestore admite la persistencia de datos sin conexión , lo que permite que la capa de datos de su aplicación funcione de forma transparente sin conexión. Combinado con Service Workers para almacenar en caché sus activos estáticos , su PWA puede funcionar completamente sin conexión. Puede habilitar la persistencia de datos sin conexión con una línea de código:
firebase.firestore().enablePersistence().then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
Mantener el estado de autenticación fuera de línea
Firebase Authentication mantiene un caché local de los datos de inicio de sesión, lo que permite que un usuario que haya iniciado sesión previamente permanezca autenticado incluso cuando no esté conectado. El observador del estado de inicio de sesión funcionará normalmente y se activará incluso si el usuario recarga la aplicación sin conexión:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});
Visita nuestra documentación para comenzar con Cloud Firestore y Firebase Authentication .
Involucrar a los usuarios
Sus usuarios quieren saber cuándo lanza nuevas funciones para su aplicación y usted quiere mantener alta la participación de los usuarios. Configure su PWA para llegar de manera proactiva y responsable a sus usuarios.
Muestra notificaciones push a tus usuarios
Con Firebase Cloud Messaging , puedes enviar notificaciones relevantes desde tu servidor a los dispositivos de tus usuarios. Este servicio le permite mostrar notificaciones oportunas a sus usuarios incluso cuando la aplicación está cerrada.
Automatizar la reactivación del usuario
Con Cloud Functions para Firebase , envíe a sus usuarios mensajes de reactivación basados en eventos en la nube, por ejemplo, una escritura de datos en Cloud Firestore o la eliminación de una cuenta de usuario . También puede enviar una notificación automática a un usuario cuando ese usuario obtenga un nuevo 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);
});