Verwenden Sie Firebase in einer Progressive Web App (PWA)

Progressive Web Apps (PWAs) sind Web-Apps, die einer Reihe von Richtlinien folgen, die sicherstellen sollen, dass Ihre Benutzer ein zuverlässiges, schnelles und ansprechendes Erlebnis haben.

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

PWA-Best Practice	Wie Firebase-Dienste helfen können
Gesichert und geladen	Firebase Hosting stellt SSL-Zertifikate kostenlos für Ihre benutzerdefinierte Domain und Standard-Firebase-Subdomain bereit. Mit der Firebase-Authentifizierung können Sie Benutzer geräteübergreifend sicher anmelden. FirebaseUI implementiert Best Practices für Authentifizierungsabläufe.
Schnelle Ladezeit	Firebase Hosting unterstützt HTTP/2 und kann sowohl Ihre statischen als auch dynamischen Inhalte auf einem globalen CDN zwischenspeichern. 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 Benutzers bei, auch offline.
Binden Sie Benutzer ein	Mit Firebase Cloud Messaging können Sie Push-Nachrichten an die Geräte Ihrer Benutzer senden. Mit Cloud Functions for Firebase können Sie Re-Engagement-Nachrichten basierend auf Cloud-Ereignissen automatisieren.

Diese Seite bietet einen Überblick darüber, wie die Firebase-Plattform Ihnen dabei helfen kann, mithilfe unseres browserübergreifenden Firebase JavaScript SDK eine moderne, leistungsstarke PWA zu erstellen.

Besuchen Sie unseren Leitfaden „Erste Schritte“ , um Firebase zu Ihrer Web-App hinzuzufügen.

Gesichert und geladen

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

Stellen Sie Ihre PWA über HTTPS bereit

HTTPS schützt die Integrität Ihrer Website und schützt die Privatsphäre und Sicherheit Ihrer Benutzer. PWAs müssen über HTTPS bereitgestellt werden.

Firebase Hosting stellt den Inhalt 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 Hosting-Service stellt automatisch und kostenlos ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.

Besuchen Sie den Leitfaden „Erste Schritte“ für Firebase Hosting, um zu erfahren, wie Sie Ihre PWA auf der Firebase-Plattform hosten können.

Bieten Sie einen sicheren Authentifizierungsablauf

FirebaseUI bietet einen Drop-in- Responsive- Authentifizierungsfluss basierend auf der Firebase-Authentifizierung , sodass Ihre App mit geringem Aufwand einen ausgefeilten und sicheren Anmeldefluss integrieren kann. FirebaseUI passt sich automatisch an die Bildschirmgröße der Geräte eines Benutzers an und folgt Best Practices für Authentifizierungsabläufe.

FirebaseUI unterstützt mehrere Anmeldeanbieter. Fügen Sie den FirebaseUI-Authentifizierungsablauf in Ihre App ein, indem Sie nur wenige Codezeilen für Anmeldeanbieter konfigurieren:

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

Besuchen Sie unsere Dokumentation auf GitHub, um mehr über die verschiedenen Konfigurationsoptionen von FirebaseUI zu erfahren.

Melden Sie Benutzer geräteübergreifend an

Durch die Verwendung von FirebaseUI zur Integration der One-Tap-Anmeldung kann Ihre App Benutzer automatisch anmelden, sogar auf verschiedenen Geräten, die sie mit ihren Anmeldeinformationen eingerichtet haben.

Aktivieren Sie die One-Tap-Anmeldung mit FirebaseUI, indem Sie eine Konfigurationszeile ä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
};

Besuchen Sie unsere Dokumentation auf GitHub, um mehr über die verschiedenen Konfigurationsoptionen von FirebaseUI zu erfahren.

Schnelle Ladezeit

Eine hervorragende Leistung verbessert das Benutzererlebnis, trägt dazu bei, Benutzer zu binden und steigert die Konvertierung. Hervorragende Leistung, wie z. B. eine kurze „Zeit bis zum ersten sinnvollen Malen “ und „ Zeit bis zur Interaktion “, ist eine wichtige Anforderung für PWAs.

Bedienen Sie Ihre statischen Assets effizient

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 Service nutzen zu können.

Cachen Sie Ihre dynamischen Inhalte

Mit Firebase Hosting kann Ihre Web-App auch dynamische Inhalte bereitstellen, die serverseitig von Cloud Functions oder einer cloudbasierten Container-App generiert werden. Mit diesem Dienst können Sie Ihre dynamischen Inhalte mit einer Codezeile auf einem leistungsstarken globalen CDN zwischenspeichern :

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

Mit diesem Service können Sie zusätzliche Anrufe bei Ihrem Back-End vermeiden, Antworten beschleunigen und Kosten senken.

Besuchen Sie unsere Dokumentation , um zu erfahren, wie Sie dynamische Inhalte (unterstützt durch Cloud Functions oder Cloud Run) bereitstellen und CDN-Caching mit Firebase Hosting aktivieren können.

Laden Sie Dienste nur dann, wenn sie benötigt werden

Das Firebase JavaScript SDK kann teilweise importiert werden, um die anfängliche Downloadgröße minimal zu halten. Nutzen Sie dieses modulare SDK, um die Firebase-Dienste, die Ihre App benötigt, nur dann zu importieren, wenn sie benötigt werden.

Um beispielsweise die anfängliche Paint-Geschwindigkeit Ihrer App zu erhöhen, kann Ihre App zunächst 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 zunächst die Firebase-Authentifizierung 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 mithilfe dynamischer Importe :

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

Netzwerkresilienz

Ihre Benutzer verfügen möglicherweise nicht über einen zuverlässigen Internetzugang. PWAs sollten sich ähnlich wie native mobile Apps verhalten und wann immer möglich offline funktionieren.

Greifen Sie offline auf Ihre App-Daten zu

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

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

Behalten Sie den Authentifizierungsstatus offline bei

Die Firebase-Authentifizierung speichert einen lokalen Cache mit Anmeldedaten, sodass ein zuvor angemeldeter Benutzer auch dann authentifiziert bleiben kann, wenn er offline ist. Der Beobachter des Anmeldestatus funktioniert normal und wird auch dann ausgelöst, wenn Ihr Benutzer die App offline neu lädt:

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

Besuchen Sie unsere Dokumentation, um mit Cloud Firestore und Firebase Authentication zu beginnen.

Binden Sie Benutzer ein

Ihre Benutzer möchten wissen, wann Sie neue Funktionen für Ihre App veröffentlichen, und Sie möchten die Benutzereinbindung hoch halten. Richten Sie Ihre PWA ein, um Ihre Benutzer proaktiv und verantwortungsbewusst zu erreichen.

Zeigen Sie Ihren Benutzern Push-Benachrichtigungen an

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

Automatisieren Sie die Wiedereinbindung von Benutzern

Senden Sie mithilfe von Cloud Functions for Firebase Ihren Benutzern Nachrichten zur erneuten Interaktion basierend auf Cloud-Ereignissen, beispielsweise einem Datenschreibvorgang in Cloud Firestore oder einer Löschung eines Benutzerkontos . Sie können einem Benutzer auch eine Push-Benachrichtigung senden , wenn dieser Benutzer 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);
    });