Firebase in einer progressiven Web-App (PWA) verwenden

Progressive Web-Apps (PWAs) sind Web-Apps, die bestimmten Richtlinien folgen, um Nutzern eine zuverlässige, schnelle und ansprechende Nutzung zu ermöglichen.

Firebase bietet mehrere Dienste, mit denen Sie Ihrer App effizient progressive Funktionen hinzufügen können, um viele PWA-Best Practices zu erfüllen, darunter:

Auf dieser Seite finden Sie eine Übersicht darüber, wie Sie mit der Firebase-Plattform und unserem browserübergreifenden Firebase JavaScript SDK moderne, leistungsstarke PWAs erstellen können.

Hier finden Sie eine Anleitung zum Hinzufügen von Firebase zu Ihrer Web-App.

Schutz und Sicherheit

Von der Bereitstellung Ihrer Website bis zur Implementierung eines Authentifizierungsablaufs ist es entscheidend, dass Ihre PWA einen sicheren und vertrauenswürdigen Workflow bietet.

PWA über HTTPS bereitstellen

Durch HTTPS schützen Sie die Integrität Ihrer Website sowie die Daten Ihrer Nutzer und bieten ihnen mehr Sicherheit. PWAs müssen über HTTPS bereitgestellt werden.

Firebase Hosting stellt die Inhalte Ihrer App standardmäßig über HTTPS bereit. Sie können Ihre Inhalte über eine kostenlose Firebase-Subdomain oder über Ihre eigene benutzerdefinierte Domain bereitstellen. Unser Hostingdienst stellt automatisch und kostenlos ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.

Im Startleitfaden für Firebase Hosting erfahren Sie, wie Sie Ihre PWA auf der Firebase-Plattform hosten können.

Sicheren Authentifizierungsvorgang anbieten

FirebaseUI bietet einen responsiven Authentifizierungsvorgang auf Grundlage von Firebase Authentication, der sich mit wenig Aufwand in Ihre App einbinden lässt. FirebaseUI passt sich automatisch an die Bildschirmgröße der Geräte eines Nutzers an und folgt den Best Practices für Autorisierungsabläufe.

FirebaseUI unterstützt mehrere Anmeldeanbieter. Fügen Sie den FirebaseUI-Authentifizierungsablauf mit nur wenigen Codezeilen in Ihre App ein, die für Anmeldeanbieter konfiguriert sind:

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

Weitere Informationen zu den verschiedenen Konfigurationsoptionen von FirebaseUI finden Sie in unserer Dokumentation auf GitHub.

Nutzer auf mehreren Geräten anmelden

Wenn Sie FirebaseUI verwenden, um die Anmeldung mit nur einem Tippen zu integrieren, können sich Nutzer automatisch in Ihrer App anmelden, auch auf verschiedenen Geräten, die sie mit ihren Anmeldedaten eingerichtet haben.

Aktivieren Sie die Anmeldung mit nur einem Tippen über FirebaseUI, indem Sie eine Zeile der Konfiguration ändern:

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

Weitere Informationen zu den verschiedenen Konfigurationsoptionen von FirebaseUI finden Sie in unserer Dokumentation auf GitHub.

Schnelle Ladezeit

Eine gute Leistung verbessert die Nutzerfreundlichkeit, trägt zur Nutzerbindung bei und steigert die Conversion-Rate. Eine gute Leistung, z. B. eine kurze Zeit bis zum ersten aussagekräftigen Rendern und eine kurze Zeit bis zur Interaktivität, ist eine wichtige Voraussetzung für PWAs.

Statische Assets effizient bereitstellen

Firebase Hosting stellt Ihre Inhalte über ein globales CDN bereit und ist HTTP/2-kompatibel. Wenn Sie Ihre statischen Assets mit Firebase hosten, konfigurieren wir alles für Sie. Sie müssen nichts weiter tun, um diesen Dienst zu nutzen.

Dynamische Inhalte im Cache speichern

Mit Firebase Hosting kann Ihre Webanwendung auch dynamische Inhalte bereitstellen, die serverseitig von Cloud Functions oder einer Cloud Run-Containeranwendung generiert werden. Mit diesem Dienst können Sie dynamische Inhalte mit nur einer Zeile Code in einem leistungsstarken globalen CDN im Cache speichern:

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

Mit diesem Dienst können Sie zusätzliche Aufrufe Ihres Back-Ends vermeiden, die Reaktionszeiten verkürzen und die Kosten senken.

In unserer Dokumentation erfahren Sie, wie Sie dynamische Inhalte (basierend auf Cloud Functions oder Cloud Run) bereitstellen und CDN-Caching mit Firebase Hosting aktivieren können.

Dienste nur bei Bedarf laden

Das Firebase JavaScript SDK kann teilweise importiert werden, um die anfängliche Downloadgröße zu minimieren. Mit diesem modularen SDK können Sie die Firebase-Dienste, die Ihre App benötigt, nur bei Bedarf importieren.

Um beispielsweise die Geschwindigkeit des ersten Renderns Ihrer App zu erhöhen, kann Ihre App zuerst Firebase Authentication laden. Wenn Ihre App sie dann benötigt, können Sie andere Firebase-Dienste wie Cloud Firestore laden.

Mit einem Paketmanager wie Webpack können Sie zuerst Firebase Authentication laden:

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

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

Wenn Sie dann auf die Datenschicht zugreifen müssen, laden Sie die Cloud Firestore-Bibliothek mit dynamischen Importen:

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

Netzwerkausfallsicherheit

Ihre Nutzer haben möglicherweise keinen zuverlässigen Internetzugang. PWAs sollten sich ähnlich wie native mobile Apps verhalten und nach Möglichkeit auch offline funktionieren.

Offline auf App-Daten zugreifen

Cloud Firestore unterstützt die Offlinedatenpersistenz, sodass die Datenschicht Ihrer App transparent offline funktioniert. In Kombination mit Service Workern zum Zwischenspeichern Ihrer statischen Assets kann Ihre PWA vollständig offline funktionieren. Sie können die Offline-Datenpersistenz mit einer Zeile Code aktivieren:

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

Auth-Status offline beibehalten

Firebase Authentication speichert einen lokalen Cache mit Anmeldedaten, sodass ein zuvor angemeldeter Nutzer auch dann authentifiziert bleibt, wenn er offline ist. Der Beobachter für den Anmeldestatus funktioniert normal und wird auch ausgelöst, wenn der Nutzer die App im Offlinemodus neu lädt:

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

In unserer Dokumentation finden Sie Informationen zu den ersten Schritten mit Cloud Firestore und Firebase Authentication.

Nutzer einbinden

Ihre Nutzer möchten wissen, wann Sie neue Funktionen für Ihre App veröffentlichen, und Sie möchten die Nutzerinteraktion hoch halten. Richten Sie Ihre PWA so ein, dass Sie Nutzer proaktiv und verantwortungsbewusst kontaktieren können.

Push-Benachrichtigungen für Nutzer anzeigen

Mit Firebase Cloud Messaging> können Sie relevante Benachrichtigungen von Ihrem Server auf die Geräte Ihrer Nutzer übertragen. Mit diesem Dienst können Sie Ihren Nutzern zeitnah Benachrichtigungen anzeigen, auch wenn die App geschlossen ist.

Nutzer-Re-Engagement automatisieren

Mit Cloud Functions for Firebase können Sie Re-Engagement-Nachrichten basierend auf Cloud-Ereignissen an Ihre Nutzer senden, z. B. bei einem Datenschreibvorgang in Cloud Firestore oder einer Löschung eines Nutzerkontos. Sie können auch eine Push-Benachrichtigung an einen Nutzer senden, wenn dieser einen neuen Follower erhält:

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