Firebase in einer progressiven Web-App (PWA) verwenden

Progressive Web-Apps (PWAs) sind Web-Apps, die einer Reihe von Richtlinien folgen, um Nutzern eine zuverlässige, schnelle und ansprechende Erfahrung zu bieten.

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 Standard-Firebase -Subdomain bereit. Firebase Authentication ermöglicht Ihnen, Nutzer sicher auf verschiedenen Geräten anzumelden. FirebaseUI implementiert Best Practices für Authentifizierungsvorgänge.
Schnelle Ladezeit	Firebase Hosting unterstützt HTTP/2 und kann sowohl Ihre statischen als auch Ihre dynamischen Inhalte in einem globalen CDN im Cache speichern. Das Firebase JavaScript SDK ist modular und Sie können Bibliotheken dynamisch importieren, wenn sie benötigt werden.
Netzwerkausfallsicherheit	Mit Cloud Firestore können Sie Daten in Echtzeit und offline speichern und darauf zugreifen. Firebase Authentication behält den Authentifizierungsstatus eines Nutzers auch offline bei.
Nutzer einbinden	Firebase Cloud Messaging ermöglicht Ihnen das Senden von Push Nachrichten an die Geräte Ihrer Nutzer. 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 eine moderne, leistungsstarke PWA erstellen können, indem Sie unser browserübergreifendes Firebase JavaScript SDK verwenden.

In unserem Leitfaden für die ersten Schritte erfahren Sie, wie Sie Ihrer Web-App Firebase hinzufügen.

Schutz und Sicherheit

Von der Bereitstellung Ihrer Website bis zur Implementierung eines Authentifizierungsvorgangs 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 auf einer kostenlosen Firebase-Subdomain oder auf Ihrer eigenen benutzerdefinierten Domain bereitstellen. Unser Hostingdienst stellt automatisch und kostenlos ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.

Im Leitfaden für die ersten Schritte mit Firebase Hosting erfahren Sie, wie Sie Ihre PWA auf der Firebase-Plattform hosten können.

Sicheren Authentifizierungsvorgang anbieten

FirebaseUI bietet einen Drop-in responsiven Authentifizierungsvorgang, der auf Firebase Authentication basiert. So können Sie Ihrer App mit wenig Aufwand einen ausgefeilten und sicheren Anmeldevorgang hinzufügen. FirebaseUI passt sich automatisch an die Bildschirmgröße der Geräte eines Nutzers an und folgt Best Practices für Authentifizierungsvorgänge.

FirebaseUI unterstützt Mehrfachanmeldung. Fügen Sie Ihrer App den FirebaseUI Authentifizierungsvorgang mit nur wenigen Codezeilen hinzu, 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 verschiedenen Geräten anmelden

Wenn Sie FirebaseUI verwenden, um die Anmeldung mit einem Klick zu integrieren , kann sich Ihre App automatisch bei Nutzern anmelden, auch auf verschiedenen Geräten, die sie mit ihren Anmeldedaten eingerichtet haben.

Aktivieren Sie die Anmeldung mit einem Klick mit FirebaseUI durch Ändern einer Konfigurationszeile:

// 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 Nutzererfahrung, trägt zur Nutzerbindung bei und erhöht die Conversion-Rate. Eine gute Leistung, z. B. eine kurze Zeit bis zum ersten Rendering" 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 mit 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 Web-App 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 im Cache speichern in einem leistungsstarken globalen CDN mit einer Codezeile:

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

Mit diesem Dienst können Sie zusätzliche Aufrufe an Ihr Back-End vermeiden, die Reaktionszeiten verkürzen 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 so gering wie möglich zu halten. Nutzen Sie dieses modulare SDK, um die Firebase-Dienste, die Ihre App benötigt, nur bei Bedarf zu importieren.

Um beispielsweise die anfängliche Renderinggeschwindigkeit Ihrer App zu erhöhen, kann Ihre App zuerst laden Firebase Authentication. Wenn Ihre App sie dann benötigt, können Sie andere Firebase-Dienste wie Cloud Firestoreladen.

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 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 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 Caching Ihrer statischen Assets, kann Ihre PWA vollständig offline funktionieren. Sie können die Offlinedatenpersistenz mit einer Codezeile aktivieren:

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

Authentifizierungsstatus offline beibehalten

Firebase Authentication behält einen lokalen Cache mit Anmeldedaten bei, sodass ein zuvor angemeldeter Nutzer auch offline authentifiziert bleibt. Der Beobachter des Anmeldestatus funktioniert normal und wird auch 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 erfahren Sie, wie Sie mit Cloud Firestore und Firebase Authentication beginnen.

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 Ihre Nutzer proaktiv und verantwortungsbewusst erreichen können.

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

Nutzerinteraktion automatisieren

Mit Cloud Functions for Firebase, können Sie Ihren Nutzern Nachrichten zur erneuten Interaktion basierend auf Cloud-Ereignissen senden, z. B. wenn Daten in Cloud Firestore geschrieben oder ein Nutzerkonto gelöschtwird. Sie können auch eine Push-Benachrichtigung an einen Nutzer senden, wenn er 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);
    });