Utiliser Firebase dans une progressive web app (PWA)

Les applications "Progressive Web App" (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 concernant les PWA, y compris :

Bonne pratique concernant les PWA	Comment les services Firebase peuvent vous aider
Sécurité et protection	Firebase Hosting provisionne des certificats SSL sans frais pour votre domaine personnalisé et votre sous-domaine Firebase par défaut. Firebase Authentication vous permet de connecter les utilisateurs de manière sécurisée sur plusieurs appareils. FirebaseUI met en œuvre les bonnes pratiques pour les flux d'authentification.
Temps de chargement rapide	Firebase Hosting est compatible avec HTTP/2 et peut mettre en cache votre contenu statique et dynamique sur un CDN mondial. Le Firebase JavaScript SDK est modulaire, et vous pouvez importer dynamiquement des bibliothèques lorsque vous en avez besoin.
Résilience du réseau	Avec Cloud Firestore, vous pouvez stocker des données et y accéder en temps réel et hors connexion. Firebase Authentication conserve l'état d'authentification d'un utilisateur, même hors connexion.
Engager les utilisateurs	Firebase Cloud Messaging vous permet d'envoyer des messages push sur les appareils de vos utilisateurs. With Cloud Functions for Firebase, vous pouvez automatiser les messages de réengagement en fonction des événements cloud.

Cette page explique comment la plate-forme Firebase peut vous aider à créer une PWA moderne et performante à l'aide de notre Firebase JavaScript SDK multi-navigateur.

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

Sécurité et protection

De la diffusion de votre site à l'implémentation d'un flux d'authentification, il est essentiel que votre PWA fournisse un workflow sécurisé et fiable.

Diffuser votre PWA via HTTPS

Le HTTPS protège l'intégrité de votre site Web, et assure la confidentialité et la sécurité de vos utilisateurs. Les PWA doivent être diffusées 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 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 adaptatif 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 peu d'efforts. 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 FirebaseUI flux d'authentification à 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);

Pour en savoir plus sur les différentes options de configuration proposées par FirebaseUI, consultez notre documentation sur GitHub.

Connecter les utilisateurs sur plusieurs appareils

En utilisant FirebaseUI pour intégrer la connexion en un clic, 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
};

Pour en savoir plus sur les différentes options de configuration proposées par FirebaseUI, consultez notre documentation sur GitHub.

Temps de chargement rapide

De bonnes performances améliorent l'expérience utilisateur, contribuent à fidéliser les utilisateurs et augmentent les conversions. De bonnes performances, telles qu'un faible "délai avant le premier affichage significatif" et "délai avant l'interactivité", sont une exigence importante pour les PWA.

Diffuser efficacement vos éléments statiques

Firebase Hosting diffuse votre contenu sur 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 à faire de plus 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 Cloud Run application conteneurisée. 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 vous pouvez diffuser du contenu dynamique (avec Cloud Functions ou Cloud Run) et activer la mise en cache CDN avec Firebase Hosting.

Charger les services uniquement lorsque vous en avez besoin

Le SDK Firebase JavaScript peut être importé partiellement 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 lorsque vous en avez besoin.

Par exemple, pour augmenter la vitesse d'affichage initiale de votre application, vous pouvez 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 Cloud Firestore bibliothèque à 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 à Internet de manière fiable. Les PWA doivent se comporter de la même manière que les applications mobiles natives et fonctionner hors connexion dans la mesure du possible.

Accéder aux données de votre application 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 en 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 fonctionne normalement et se déclenche 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 voulez 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

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.

Automatiser le réengagement des utilisateurs

À l'aide de Cloud Functions for Firebase, envoyez à vos utilisateurs des messages de réengagement basés sur des événements cloud, par exemple une écriture de données dans Cloud Firestore ou la suppression d'un compte utilisateur. Vous pouvez également envoyer une notification push à un utilisateur lorsqu'il reçoit 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);
    });