Firebase in einer progressiven Web-App (PWA) verwenden

Progressive Web-Apps (PWAs) sind Web-Apps, die bestimmten Richtlinien entsprechen, 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 Best Practices für PWAs zu erfüllen, darunter:

Best Practice für PWAs	So können Firebase-Dienste helfen
Schutz und Sicherheit	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 geräteübergreifend sicher anmelden. FirebaseUI implementiert Best Practices für Authentifizierungsabläufe.
Schnelle Ladezeit	Firebase Hosting unterstützt HTTP/2 und kann sowohl statische als auch dynamische Inhalte in einem globalen CDN im Cache speichern. Das Firebase JavaScript SDK ist modular aufgebaut 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 behält den Authentifizierungsstatus eines Nutzers bei, auch wenn er offline ist.
Nutzerinteraktionen fördern	Mit Firebase Cloud Messaging können Sie Push-Benachrichtigungen 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 finden Sie eine Übersicht darüber, wie Sie mit der Firebase-Plattform und unserem browserübergreifenden Firebase JavaScript SDK eine moderne, leistungsstarke PWA erstellen können.

In unserem Startleitfaden erfahren Sie, wie Sie Firebase zu Ihrer Web-App hinzufügen.

Schutz und Sicherheit

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

PWA über HTTPS bereitstellen

Durch HTTPS schützt ihr die Integrität eurer Website sowie die Daten eurer Nutzer und bietet ihnen mehr Sicherheit. PWAs müssen über HTTPS bereitgestellt werden.

Firebase Hosting stellt die Inhalte Ihrer Anwendung standardmäßig über HTTPS bereit. Sie können Ihre Inhalte auf einer kostenlosen Firebase-Subdomain oder auf Ihrer eigenen benutzerdefinierten 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.

Sicheren Authentifizierungsvorgang anbieten

FirebaseUI bietet einen responsiven Authentifizierungsablauf auf Basis von Firebase Authentication, mit dem Sie einen ausgereiften und sicheren Anmeldeablauf mit geringem Aufwand in Ihre App einbinden können. FirebaseUI passt sich automatisch an die Bildschirmgröße der Geräte des Nutzers an und folgt den Best Practices für Authentifizierungsabläufe.

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

// 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 Anmeldung über One Tap zu integrieren, können Nutzer automatisch in Ihrer App angemeldet werden, auch auf anderen Geräten, die sie mit ihren Anmeldedaten eingerichtet haben.

Aktivieren Sie die Anmeldung über One Tap mit 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 erhöht die Conversion-Rate. Eine gute Leistung, z. B. eine kurze Zeit bis zum Inhalte weitgehend gezeichnet 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 mit Firebase hosten, konfigurieren wir das 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-Container-Anwendung generiert werden. Mit diesem Dienst können Sie Ihre dynamischen Inhalte in einem leistungsstarken globalen CDN mit einer einzigen Codezeile 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, Antworten beschleunigen und Kosten senken.

In unserer Dokumentation erfahren Sie, wie Sie dynamische Inhalte (unterstützt von 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 minimal zu halten. 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 des ersten Renderns Ihrer App erhöhen möchten, kann Ihre App zuerst Firebase Authentication laden. Wenn Ihre App dann andere Firebase-Dienste wie Cloud Firestore benötigt, können Sie diese laden.

Wenn Sie einen Paketmanager wie webpack verwenden, 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üssen, laden Sie die Bibliothek Cloud Firestore mithilfe von dynamischen Importen:

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

Netzwerkresilienz

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

Offline auf App-Daten zugreifen

Cloud Firestore unterstützt die nichtflüchtige Speicherung von Offlinedaten, sodass die Datenebene Ihrer App transparent offline funktioniert. In Kombination mit Service Workern zum Caching Ihrer statischen Assets kann Ihre PWA vollständig offline funktionieren. Sie können die Offlinedatenpersistenz mit einer einzigen Codezeile aktivieren:

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

Authentifizierungsstatus 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 des Anmeldestatus funktioniert normal und wird auch dann ausgelöst, wenn der Nutzer die App offline 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.

Nutzerinteraktion fördern

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 proaktiv und verantwortungsbewusst mit Ihren Nutzern kommuniziert.

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 Ihren Nutzern zeitnah Benachrichtigungen anzeigen, auch wenn die App geschlossen ist.

Erneute Nutzerinteraktion automatisieren

Mit Cloud Functions for Firebase können Sie Ihren Nutzern Nachrichten zur erneuten Interaktion senden, die auf Cloud-Ereignissen basieren, z. B. einem Datenschreibvorgang in Cloud Firestore oder dem Löschen eines Nutzerkontos. Sie können auch eine Push-Benachrichtigung an einen Nutzer senden, wenn dieser einen neuen Follower hat:

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