Les applications Web progressives (PWA) sont des applications Web qui suivent un ensemble de consignes visant à garantir une expérience fiable, rapide et attrayante pour vos utilisateurs.
Firebase propose plusieurs services qui peuvent vous aider à ajouter efficacement des fonctionnalités progressives à votre application afin de respecter de nombreuses bonnes pratiques concernant les PWA, y compris les suivantes:
Bonnes pratiques pour les PWA | Avantages des services Firebase |
---|---|
Sécurité renforcée |
|
Temps de chargement rapide |
|
Résilience du réseau |
|
Engager les utilisateurs |
|
Cette page présente comment la plate-forme Firebase peut vous aider à créer une PWA moderne et hautes performances à l'aide de notre SDK JavaScript Firebase multinavigateur.
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 protocole 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.
Par défaut, Firebase Hosting diffuse 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 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'effort. FirebaseUI s'adapte automatiquement à la taille d'écran des appareils d'un utilisateur et suit les bonnes pratiques concernant les flux d'authentification.
FirebaseUI est compatible avec plusieurs fournisseurs de connexion. Ajoutez le parcours 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 la 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 avec un seul geste, 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 seul geste à 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 la documentation sur GitHub pour en savoir plus sur les différentes options de configuration proposées par FirebaseUI.
Temps de chargement rapide
De bonnes performances améliorent l'expérience utilisateur, aident à fidéliser les utilisateurs et augmentent les conversions. De bonnes performances, telles qu'un faible "temps de première peinture significative" et un faible "temps de réactivité", sont une exigence importante pour les PWA.
Diffuser vos éléments statiques de manière efficace
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 avec une seule ligne de code:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
Ce service vous permet d'éviter les 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 (basé sur 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 réduire la taille du téléchargement initial. 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 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 paquets 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 un accès Internet fiable. Les PWA doivent se comporter comme des 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. Associés à des services workers pour mettre en cache vos composants 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 ... });
Maintenir 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 de l'état de connexion fonctionne normalement et se déclenche même si votre utilisateur recharge l'application en mode hors connexion:
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed-in ... } else { // User is signed out ... } });
Consultez notre documentation pour vous lancer avec 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 engagement élevé. Configurez votre PWA pour qu'elle contacte vos utilisateurs de manière proactive et responsable.
Afficher des notifications push auprès de vos utilisateurs
Avec Firebase Cloud Messaging, vous pouvez 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 à vos utilisateurs des messages de réengagement 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 nouveau suiveur:
// 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); });