Usa Firebase en una app web progresiva (AWP)

Las apps web progresivas (AWP) son apps web que siguen un conjunto de lineamientos destinados a garantizar que tus usuarios tengan una experiencia confiable, rápida y atractiva.

Firebase ofrece varios servicios que pueden ayudarte a agregar de forma eficiente características progresivas a tu app, con el fin de cumplir con muchas recomendaciones de AWP, como las siguientes:

Esta página ofrece una descripción general sobre cómo la plataforma de Firebase puede ayudarte a crear una AWP moderna y de alto rendimiento, a través de nuestro SDK de Firebase JavaScript compatible con varios navegadores.

Visita nuestra guía de introducción para agregar Firebase a tu app web.

Seguridad y protección

Es fundamental que tu AWP tenga un flujo de trabajo seguro y confiable, desde la entrega en tu sitio hasta la implementación del flujo de autenticación.

Entrega tu AWP a través de HTTPS

HTTPS protege la integridad de tu sitio web, así como la privacidad y seguridad de tus usuarios. Las AWP deben entregarse a través de HTTPS.

De forma predeterminada, Firebase Hosting entrega el contenido de tu app por medio de HTTPS. Puedes entregar el contenido en un subdominio de Firebase sin costo o en tu propio dominio personalizado. Nuestro servicio de hosting aprovisiona automáticamente y sin costo un certificado SSL para tu dominio personalizado.

Visita la guía de introducción para Firebase Hosting para saber cómo alojar tu AWP en la plataforma de Firebase.

Ofrece un flujo de autenticación seguro

FirebaseUI ofrece un flujo de autenticación responsivo y directo basado en Firebase Authentication, que permite que tu app integre un flujo de acceso sofisticado y seguro con poco esfuerzo. FirebaseUI se adapta automáticamente al tamaño de la pantalla de los dispositivos que usan los usuarios y sigue las recomendaciones para los flujos de autenticación.

FirebaseUI admite varios proveedores de acceso. Agrega el flujo de autenticación de FirebaseUI a tu app con solo unas pocas líneas de código configuradas para los proveedores de acceso, como en el ejemplo:

// 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);

Visita la documentación en GitHub para obtener más información sobre las diferentes opciones de configuración que se ofrecen en FirebaseUI.

Permite el acceso de los usuarios en diversos dispositivos

Cuando usas FirebaseUI para integrar la opción de acceso con One Tap, tu app puede habilitar automáticamente el acceso de los usuarios, incluso en dispositivos diferentes que hayan configurado con sus credenciales de acceso respectivas.

Para habilitar el acceso con One Tap mediante FirebaseUI, cambia una línea de configuración, como en este ejemplo:

// 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
};

Visita la documentación en GitHub para obtener más información sobre las diferentes opciones de configuración que se ofrecen en FirebaseUI.

Tiempo de carga rápido

Tener un rendimiento excelente mejora la experiencia del usuario, ayuda a retenerlo y aumenta la conversión. Para las AWP, tener un rendimiento excelente, como un “tiempo de la primera pintura significativa” y un “tiempo de carga” cortos, es un requisito importante.

Entrega tus activos estáticos de forma eficiente

Firebase Hosting entrega tu contenido a través de una CDN global y es compatible con HTTP/2. Cuando alojas activos estáticos con Firebase, nos encargamos de toda la configuración correspondiente. No necesitas hacer nada más para aprovechar este servicio.

Almacena en caché el contenido dinámico

Con Firebase Hosting, tu app web también puede entregar el contenido dinámico que Cloud Functions o una app alojada en contenedores Cloud Run generan en el servidor. Con este servicio, puedes almacenar en caché tu contenido dinámico en una CDN global y potente con una línea de código como la siguiente:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

Este servicio te permite evitar llamadas adicionales al backend, acelerar las respuestas y disminuir los costos.

Consulta nuestra documentación para saber cómo puedes publicar contenido dinámico (gracias a Cloud Functions o Cloud Run) y cómo habilitar el almacenamiento en caché de CDN con Firebase Hosting.

Carga servicios solo si son necesarios

Se puede importar parcialmente el SDK de Firebase JavaScript para mantener el tamaño de las descargas iniciales al mínimo. Aprovecha este SDK modular para importar los servicios de Firebase que tu app puede necesitar, solo cuando corresponda.

Por ejemplo, para aumentar la velocidad de procesamiento inicial de la app, esta puede cargar primero Firebase Authentication. Luego, cuando la app los necesite, puedes cargar otros servicios de Firebase, como Cloud Firestore.

Puedes cargar primero Firebase Authentication con un administrador de paquetes, como webpack:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

Luego, cuando necesites acceder a la capa de datos, carga la biblioteca de Cloud Firestore con las importaciones dinámicas:

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Resiliencia de la red

Puede que tus usuarios no cuenten con acceso a una Internet confiable. Las AWP debieran comportarse de forma similar a las apps nativas de dispositivos móviles y funcionar sin conexión cuando sea posible.

Accede a los datos de tu app sin conexión

Cloud Firestore admite la persistencia de datos sin conexión, lo que permite que la capa de datos de tu app funcione con transparencia cuando no hay conexión. Tu AWP puede funcionar completamente sin conexión si se combina con los service workers para almacenar en caché los recursos estáticos. Puedes habilitar la persistencia de datos sin conexión con una línea de código, como se muestra a continuación:

firebase.firestore().enablePersistence().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Mantén el estado de autenticación sin conexión

Firebase Authentication mantiene una caché local de los datos de acceso, lo que permite que un usuario que accedió anteriormente permanezca autenticado, incluso si está sin conexión. El observador de estado de acceso funcionará normalmente y se activará incluso si tu usuario vuelve a cargar la app cuando está sin conexión:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Consulta la documentación para comenzar a usar Cloud Firestore y Firebase Authentication.

Atrae a los usuarios

Los usuarios desean enterarse cuando lanzas funciones nuevas para la app, y tú, por tu parte, quieres mantener el nivel de participación alto. Configura tu AWP para comunicarte con los usuarios de forma ágil y proactiva.

Muestra notificaciones push a los usuarios

Con Firebase Cloud Messaging, puedes enviar notificaciones push relevantes desde tu servidor a los dispositivos de los usuarios. Con este servicio, puedes mostrarles las notificaciones a tiempo, incluso cuando la app está cerrada.

Automatiza para volver a atraer a los usuarios

Con Cloud Functions for Firebase, envía mensajes con el fin de volver a conseguir la participación de los usuarios a partir de eventos en la nube, como la escritura de datos en Cloud Firestore o la eliminación de la cuenta de usuario. Además, puedes enviar notificaciones push cuando los usuarios obtienen un seguidor nuevo:

// 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);
    });