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:

Práctica recomendada de AWP Funciones de los servicios de Firebase que pueden ayudarte
Seguridad y protección
  • Firebase Hosting aprovisiona certificados SSL sin costo para tu dominio personalizado y el subdominio predeterminado de Firebase.
  • Firebase Authentication permite que los usuarios accedan a tu app en diversos dispositivos de forma segura.
  • FirebaseUI implementa recomendaciones para flujos de autenticación.
Tiempo de carga rápido
  • Firebase Hosting es compatible con HTTP/2 y puede almacenar en caché el contenido estático y dinámico en una CDN global.
  • El SDK de Firebase JavaScript es modular, además puedes importar bibliotecas de forma dinámica cuando sea necesario.
Resiliencia de la red
  • Con Cloud Firestore, puedes almacenar y acceder a datos en tiempo real y sin conexión.
  • Firebase Authentication mantiene el estado de autenticación de un usuario, incluso sin conexión.
Atrae a los usuarios
  • Firebase Cloud Messaging te permite enviar mensajes push a los dispositivos de tus usuarios.
  • Con Cloud Functions para Firebase, puedes automatizar los mensajes para volver a atraer a los usuarios a partir de los eventos en la nube.

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

Servicio de hosting eficaz

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.

Según la configuración 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 a fin de saber cómo alojar tu AWP en la plataforma de Firebase.

Ofrece un flujo de autenticación seguro

Flujo de autenticación responsivo y directo

FirebaseUI ofrece un flujo de autenticación ágil 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 múltiple. 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

Acceso en diversos dispositivos

Cuando usas FirebaseUI a fin de 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 respectivas.

Para habilitar la opción de presionar una vez para acceder 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

Servicio de hosting eficaz

Firebase Hosting entrega el contenido por medio 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 de Cloud Run genera en el servidor. Con este servicio, puedes almacenar en caché el contenido dinámico en una potente CDN global 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 la documentación y descubre cómo entregar 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 con el fin de 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 acelerar la velocidad de la pintura inicial de la app, esta puede cargar primero Firebase Authentication. Después, puedes cargar otros servicios de Firebase, como Cloud Firestore, cuando tu app los necesite.

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 mediante las importaciones dinámicas de la siguiente forma:

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. Esto 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 activos 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 ...
  }
});

Visita 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 tus usuarios

Con Firebase Cloud Messaging, puedes enviar notificaciones push pertinentes 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 para Firebase, envía mensajes con el fin de volver a conseguir la participación de los usuarios a través de eventos en la nube, como la escritura de datos para Cloud Firestore o la eliminación de la cuenta de usuario. Además, puedes enviar una notificación 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);
    });