Usa Firebase en las apps web progresivas

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:

Recomendación de AWP Funciones de los servicios de Firebase que pueden ayudarte
Seguridad y protección
  • Firebase Hosting aprovisiona certificados SSL gratuitos a tu dominio personalizado y al subdominio de Firebase predeterminado.
  • 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 admite HTTP/2 y almacena en caché tu contenido dinámico y estático en una CDN global.
  • El SDK de Firebase JavaScript es modular, y 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.

Para ver un ejemplo de cómo usar Firebase a fin de crear una AWP, consulta la aplicación de muestra de código abierto FriendlyPix. 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 rendimiento de hosting

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.

Firebase Hosting entrega el contenido de tu app por medio de HTTPS, según la configuración predeterminada. Puedes entregar el contenido en un subdominio de Firebase de forma gratuita o en tu propio dominio personalizado. Nuestro servicio de hosting aprovisiona de manera gratuita y automática un certificado SSL para tu dominio personalizado.

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

Ofrece un flujo de autenticación seguro

FirebaseUI brinda 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.

Flujo de autenticación responsivo y directo

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

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 para integrar la opción de presionar una vez para acceder, 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-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
};

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, es un requisito importante tener un rendimiento excelente, como tener el “tiempo de la primera pintura significativa” y el “tiempo de carga” con niveles bajos.

Entrega tus activos estáticos de forma eficiente

Servicio de rendimiento de hosting

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é tu contenido dinámico

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

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

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

Visita la documentación para saber cómo puedes entregar contenido dinámico (con la tecnología de Cloud Functions) y permitir el almacenamiento en caché en 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 tu 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 ...
});

Para ver un ejemplo de importaciones dinámicas y parciales con Firebase, revisa nuestra aplicación de muestra de código abierto, FriendlyPix, que demuestra esta técnica.

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 que permite que la capa de datos de tu app funcione con transparencia fuera de la red. 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().enablePersistance().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 nuestra documentación para comenzar con Cloud Firestore y Firebase Authentication.

Atrae a los usuarios

Los usuarios desean saber cuándo lanzarás 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 proactiva y responsable.

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 atraer a los usuarios con eventos en la nube, como la escritura de datos para Cloud Firestore o la eliminación de la cuenta de usuario. Además, puedes enviarles 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);
    });

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.