Utiliser Firebase dans une application Web progressive (PWA)

Les applications Web progressives (PWA) sont des applications Web qui suivent un ensemble de directives destinées à garantir à vos utilisateurs une expérience fiable, rapide et engageante.

Firebase propose plusieurs services qui peuvent vous aider à ajouter efficacement des fonctionnalités progressives à votre application pour répondre à de nombreuses bonnes pratiques PWA, notamment :

Cette page offre un aperçu de la façon dont la plate-forme Firebase peut vous aider à créer une PWA moderne et hautes performances à l'aide de notre SDK JavaScript Firebase multi-navigateurs.

Consultez notre guide de démarrage pour ajouter Firebase à votre application Web.

Sûr et sécurisé

De la gestion de votre site à la mise en œuvre d'un flux d'authentification, il est essentiel que votre PWA fournisse un flux de travail sécurisé et fiable.

Servez votre PWA via HTTPS

HTTPS protège l'intégrité de votre site Web et protège la confidentialité et la sécurité de vos utilisateurs. Les PWA doivent être servies via HTTPS.

Firebase Hosting , par défaut, diffuse le contenu de votre application via HTTPS. Vous pouvez diffuser votre contenu sur un sous-domaine Firebase gratuit ou sur votre propre domaine personnalisé . Notre service d'hébergement fournit automatiquement et gratuitement un certificat SSL pour votre domaine personnalisé.

Consultez le guide de démarrage de Firebase Hosting pour savoir comment héberger votre PWA sur la plate-forme Firebase.

Proposer un flux d'authentification sécurisé

FirebaseUI fournit un flux d'authentification réactif instantané basé sur Firebase Authentication , permettant à votre application d'intégrer un flux de connexion sophistiqué et sécurisé avec peu d'effort. FirebaseUI s'adapte automatiquement à la taille de l'écran des appareils d'un utilisateur et suit les meilleures pratiques en matière de flux d'authentification.

FirebaseUI prend en charge plusieurs fournisseurs de connexion. Ajoutez le flux d'authentification FirebaseUI à votre application avec seulement quelques lignes de code configurées pour les fournisseurs de connexion :

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

Consultez notre documentation sur GitHub pour en savoir plus sur les différentes options de configuration proposées par FirebaseUI.

Connectez les utilisateurs sur tous les appareils

En utilisant FirebaseUI pour intégrer la connexion en un seul clic , votre application peut connecter automatiquement les utilisateurs, même sur différents appareils qu'ils ont configurés avec leurs informations de connexion.

Activez la connexion en un clic à l'aide de FirebaseUI en modifiant une ligne de configuration :

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

Consultez notre documentation sur GitHub pour en savoir plus sur les différentes options de configuration proposées par FirebaseUI.

Temps de chargement rapide

Avoir d'excellentes performances améliore l'expérience utilisateur, aide à fidéliser les utilisateurs et augmente la conversion. Des performances élevées, telles qu'un faible « délai avant la première peinture significative » et un « temps avant l'interactivité », sont une exigence importante pour les PWA.

Servez efficacement vos actifs statiques

Firebase Hosting diffuse votre contenu sur un CDN mondial et est compatible HTTP/2. Lorsque vous hébergez vos ressources statiques avec Firebase, nous configurons tout cela pour vous : vous n'avez rien de plus à faire pour profiter de ce service.

Mettez en cache votre contenu dynamique

Avec Firebase Hosting, votre application Web peut également diffuser du contenu dynamique généré côté serveur par Cloud Functions ou une application conteneurisée Cloud Run . Grâce à ce service, vous pouvez mettre en cache votre contenu dynamique sur un puissant CDN mondial avec une seule ligne de code :

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

Ce service vous permet d'éviter des appels supplémentaires vers votre back-end, d'accélérer les réponses et de réduire les coûts.

Consultez notre documentation pour savoir comment diffuser du contenu dynamique (optimisé par Cloud Functions ou Cloud Run) et activer la mise en cache CDN avec Firebase Hosting.

Charger les services uniquement lorsqu'ils sont nécessaires

Le SDK JavaScript Firebase peut être partiellement importé pour minimiser la taille de téléchargement initiale. Profitez de ce SDK modulaire pour importer les services Firebase dont votre application a besoin uniquement lorsqu'ils sont nécessaires.

Par exemple, pour augmenter la vitesse de dessin initiale de votre application, votre application peut d'abord charger Firebase Authentication . Ensuite, lorsque votre application en a besoin, vous pouvez charger d'autres services Firebase, comme Cloud Firestore .

À l'aide d'un gestionnaire de packages tel que webpack, vous pouvez d'abord charger l'authentification Firebase :

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

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

Ensuite, lorsque vous devez accéder à votre couche de données, chargez la bibliothèque Cloud Firestore à l'aide d'imports dynamiques :

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

Résilience du réseau

Vos utilisateurs ne disposent peut-être pas d’un accès Internet fiable. Les PWA doivent se comporter de la même manière que les applications mobiles natives et doivent fonctionner hors ligne autant que possible.

Accédez aux données de votre application hors ligne

Cloud Firestore prend en charge la persistance des données hors ligne , ce qui permet à la couche de données de votre application de fonctionner hors ligne de manière transparente. Combinée avec Service Workers pour mettre en cache vos actifs statiques , votre PWA peut fonctionner entièrement hors ligne. Vous pouvez activer la persistance des données hors ligne avec une seule ligne de code :

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

Maintenir l'état d'authentification hors ligne

L'authentification Firebase conserve un cache local des données de connexion, permettant à un utilisateur précédemment connecté de rester authentifié même lorsqu'il est hors ligne. L'observateur d'état de connexion fonctionnera normalement et se déclenchera même si votre utilisateur recharge l'application hors ligne :

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

Consultez notre documentation pour démarrer avec Cloud Firestore et l'authentification Firebase .

Engagez les utilisateurs

Vos utilisateurs veulent savoir quand vous publiez de nouvelles fonctionnalités pour votre application et vous souhaitez maintenir un engagement élevé des utilisateurs. Configurez votre PWA pour atteindre vos utilisateurs de manière proactive et responsable.

Affichez des notifications push à vos utilisateurs

Avec Firebase Cloud Messaging , vous pouvez envoyer des notifications pertinentes de votre serveur vers les appareils de vos utilisateurs. Ce service vous permet d'afficher des notifications opportunes à vos utilisateurs même lorsque l'application est fermée.

Automatisez le réengagement des utilisateurs

À l'aide de Cloud Functions pour Firebase , envoyez des messages de réengagement à vos utilisateurs en fonction d'événements cloud, par exemple une écriture de données sur Cloud Firestore ou une suppression de compte utilisateur . Vous pouvez également envoyer une notification push à un utilisateur lorsque cet utilisateur obtient un nouveau follower :

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