Firebase in einer progressiven Web-App (PWA) verwenden

Progressive Web-Apps (PWAs) sind Web-Apps, die eine Reihe von Richtlinien einhalten, die dafür sorgen sollen, dass Nutzer eine zuverlässige, schnelle und ansprechende Erfahrung haben.

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

Best Practices für PWAs	Wie Firebase-Dienste helfen können
Sicher und geschützt	Firebase Hosting stellt kostenlos SSL-Zertifikate für Ihre benutzerdefinierte Domain und die standardmäßige Firebase-Subdomain bereit. Mit Firebase Authentication können Sie Nutzer sicher auf mehreren Geräten anmelden. FirebaseUI implementiert Best Practices für Authentifizierungsabläufe.
Kurze Ladezeit	Firebase Hosting unterstützt HTTP/2 und kann sowohl statische als auch dynamische Inhalte in einem globalen CDN zwischenspeichern. Das Firebase JavaScript SDK ist modular und Sie können Bibliotheken bei Bedarf dynamisch importieren.
Netzwerkresilienz	Mit Cloud Firestore können Sie Daten in Echtzeit und offline speichern und darauf zugreifen. Firebase Authentication speichert den Authentifizierungsstatus eines Nutzers auch offline.
Nutzer ansprechen	Mit Firebase Cloud Messaging können Sie Push-Nachrichten an die Geräte Ihrer Nutzer senden. Mit Cloud Functions for Firebase können Sie Nachrichten zur erneuten Interaktion basierend auf Cloud-Ereignissen automatisieren.

Auf dieser Seite erfahren Sie, wie Sie mit der Firebase-Plattform und dem plattformübergreifenden Firebase JavaScript SDK eine moderne, leistungsstarke PWA erstellen können.

In unserem Einstiegsleitfaden erfahren Sie, wie Sie Firebase Ihrer Webanwendung hinzufügen.

Schutz und Sicherheit

Vom Bereitstellen Ihrer Website bis zur Implementierung eines Authentifizierungsablaufs ist es wichtig, dass Ihre PWA einen sicheren und vertrauenswürdigen Workflow bietet.

PWA über HTTPS bereitstellen

Mit 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 Hosting-Dienst 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.

Bieten Sie einen sicheren Authentifizierungsvorgang an.

FirebaseUI bietet einen responsiven Authentifizierungsablauf auf der Grundlage von Firebase Authentication, mit dem Sie in Ihrer App mit wenig Aufwand einen ausgefeilten und sicheren Anmeldevorgang einbinden können. FirebaseUI passt sich automatisch an die Bildschirmgröße des Geräts eines Nutzers an und folgt den Best Practices für Authentifizierungsablä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 geräteübergreifend anmelden

Wenn Sie FirebaseUI verwenden, um die One-Tap-Anmeldung 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 Tastenanschlag ü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.

Kurze Ladezeit

Eine gute Leistung verbessert die Nutzerfreundlichkeit, trägt zur Nutzerbindung bei und steigert die Conversion-Rate. Eine hohe Leistung, z. B. eine geringe First Meaningful Paint und Time to Interactive, ist eine wichtige Anforderung 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 bei Firebase hosten, konfigurieren wir das alles für Sie. Sie müssen nichts weiter tun, um diesen Dienst nutzen zu können.

Dynamische Inhalte im Cache speichern

Mit Firebase Hosting können Sie mit Ihrer Webanwendung auch dynamische Inhalte bereitstellen, die serverseitig von Cloud Functions oder einer Cloud Run-containerisierten App generiert werden. Mit diesem Dienst können Sie Ihre dynamischen Inhalte mit einer einzigen Codezeile 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 Backends vermeiden, Antworten beschleunigen und Kosten senken.

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

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 dann importieren, wenn sie benötigt werden.

Wenn Sie beispielsweise die Geschwindigkeit der anfänglichen Darstellung Ihrer App erhöhen möchten, kann Ihre App zuerst Firebase Authentication laden. Wenn Ihre App sie benötigt, können Sie dann 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 Ihre Datenebene zugreifen möchten, laden Sie die Cloud Firestore-Bibliothek mithilfe von 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 Datenebene Ihrer App auch offline transparent funktioniert. In Kombination mit Service Workers, um statische Assets im Cache zu speichern, kann Ihre PWA vollständig offline funktionieren. Sie können die Offline-Datenpersistenz mit einer einzigen Codezeile 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 offline authentifiziert bleiben kann. 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 ansprechen

Ihre Nutzer möchten wissen, wann Sie neue Funktionen für Ihre App veröffentlichen, und Sie möchten das Nutzer-Engagement hochhalten. Richten Sie Ihre PWA so ein, dass Sie Ihre Nutzer proaktiv und verantwortungsvoll erreichen.

Push-Benachrichtigungen für Nutzer anzeigen

Mit Firebase Cloud Messaging können Sie relevante Benachrichtigungen von Ihrem Server an die Geräte Ihrer Nutzer senden. Mit diesem Dienst können Sie Nutzern auch dann aktuelle Benachrichtigungen anzeigen, wenn die App geschlossen ist.

Nutzer erneut ansprechen

Mit Cloud Functions for Firebase können Sie Nutzern basierend auf Cloud-Ereignissen Nachrichten zur erneuten Interaktion senden, z. B. bei einem Datenschreiben in Cloud Firestore oder dem Löschen eines Nutzerkontos. Sie können einem Nutzer auch eine Push-Benachrichtigung senden, wenn er einen neuen Follower bekommt:

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