Utiliser Firebase dans une progressive web app (PWA)

Les progressive web apps (PWA) sont des applications Web qui suivent un ensemble de consignes visant à garantir à vos utilisateurs une expérience fiable, rapide et attrayante.

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

Cette page présente la façon dont la plate-forme Firebase peut vous aider à créer une PWA moderne et performante à l'aide de notre SDK Firebase JavaScript multi-navigateurs.

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

Sécurité et protection

Qu'il s'agisse de diffuser votre site ou d'implémenter un flux d'authentification, il est essentiel que votre PWA fournisse un workflow sécurisé et fiable.

Diffuser votre PWA via HTTPS

Le protocole HTTPS protège l'intégrité de votre site Web, ainsi que la confidentialité et la sécurité de vos utilisateurs. Les PWA doivent être diffusées via HTTPS.

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

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

Proposer un flux d'authentification sécurisé

FirebaseUI fournit un flux d'authentification responsive prêt à l'emploi basé sur Firebase Authentication, ce qui permet à votre application d'intégrer un flux de connexion sophistiqué et sécurisé avec un minimum d'effort. FirebaseUI s'adapte automatiquement à la taille de l'écran des appareils d'un utilisateur et suit les bonnes pratiques pour les flux d'authentification.

FirebaseUI est compatible avec plusieurs fournisseurs de connexion. Ajoutez le flux d'authentification FirebaseUI à votre application en 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.

Connecter les utilisateurs sur plusieurs appareils

En utilisant FirebaseUI pour intégrer la connexion One Tap, votre application peut connecter automatiquement les utilisateurs, même sur différents appareils qu'ils ont configurés avec leurs identifiants 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

Des performances élevées améliorent l'expérience utilisateur, aident à fidéliser les utilisateurs et augmentent les conversions. De bonnes performances, comme un faible "temps avant first meaningful paint" et un faible "temps avant interactivité", sont une exigence importante pour les PWA.

Diffuser efficacement vos éléments statiques

Firebase Hosting diffuse votre contenu via un CDN mondial et est compatible avec HTTP/2. Lorsque vous hébergez vos éléments statiques avec Firebase, nous configurons tout cela pour vous. Vous n'avez rien d'autre à faire pour profiter de ce service.

Mettre 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 CDN mondial puissant en 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 à votre backend, d'accélérer les réponses et de réduire les coûts.

Consultez notre documentation pour découvrir comment diffuser du contenu dynamique (avec 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 Firebase JavaScript peut être partiellement importé pour réduire au minimum la taille du téléchargement initial. Profitez de ce SDK modulaire pour importer les services Firebase dont votre application a besoin uniquement quand ils sont nécessaires.

Par exemple, pour augmenter la vitesse de peinture initiale de votre application, celle-ci 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 Firebase Authentication :

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'importations dynamiques :

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

Résilience du réseau

Vos utilisateurs n'ont peut-être pas accès à une connexion Internet fiable. Les PWA doivent se comporter de manière similaire aux applications mobiles natives et fonctionner hors connexion dans la mesure du possible.

Accéder aux données de vos applications hors connexion

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

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

Conserver l'état d'authentification hors connexion

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

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

Consultez notre documentation pour commencer à utiliser Cloud Firestore et Firebase Authentication.

Engager les utilisateurs

Vos utilisateurs veulent savoir quand vous lancez de nouvelles fonctionnalités pour votre application, et vous souhaitez maintenir un niveau d'engagement élevé. Configurez votre PWA pour contacter vos utilisateurs de manière proactive et responsable.

Afficher des notifications push à vos utilisateurs

Firebase Cloud Messaging vous permet d'envoyer des notifications pertinentes depuis 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.

Automatiser le réengagement des utilisateurs

À l'aide de Cloud Functions for Firebase, envoyez des messages de réengagement à vos utilisateurs en fonction d'événements cloud, par exemple une écriture de données dans Cloud Firestore ou une suppression de compte utilisateur. Vous pouvez également envoyer une notification push à un utilisateur lorsqu'il gagne un nouvel abonné :

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