Używanie Firebase w progresywnej aplikacji internetowej (PWA)

Progresywne aplikacje internetowe (PWA) to aplikacje internetowe, które są zgodne z zestawem wytycznych, mających na celu zapewnienie użytkownikom niezawodnego, szybkiego i angażującego działania.

Firebase oferuje kilka usług, które pomogą Ci skutecznie dodawać do aplikacji progresywne funkcje zgodne z wieloma sprawdzonymi metodami dotyczącymi PWA, w tym:

Na tej stronie znajdziesz omówienie tego, jak platforma Firebase może pomóc Ci w tworzeniu nowoczesnych, wydajnych progresywnych aplikacji internetowych za pomocą naszego Firebase JavaScript pakietu SDK działającego w różnych przeglądarkach.

Aby dodać Firebase do aplikacji internetowej, zapoznaj się z naszym przewodnikiem dla początkujących.

Bezpieczeństwo

Od wyświetlania witryny po wdrażanie przepływu uwierzytelniania – ważne jest, aby aplikacja PWA zapewniała bezpieczny i godny zaufania przepływ pracy.

Wyświetlanie progresywnej aplikacji internetowej przez HTTPS

HTTPS zwiększa wiarygodność Twojej witryny oraz chroni prywatność i dane użytkowników. Aplikacje PWA muszą być wyświetlane przez HTTPS.

Firebase Hosting domyślnie wyświetla treści aplikacji za pomocą protokołu HTTPS. Treści możesz wyświetlać w bezpłatnej subdomenie Firebase lub we własnej domenie niestandardowej. Nasza usługa hostingu automatycznie i bezpłatnie udostępnia certyfikat SSL dla Twojej domeny niestandardowej.

Zapoznaj się z przewodnikiem dla początkującychFirebase Hosting, aby dowiedzieć się, jak hostować progresywną aplikację internetową na platformie Firebase.

oferować bezpieczny proces uwierzytelniania,

FirebaseUI udostępnia gotowy elastyczny proces uwierzytelniania oparty na Firebase Authentication, dzięki czemu możesz łatwo zintegrować w aplikacji zaawansowany i bezpieczny proces logowania. FirebaseUI automatycznie dostosowuje się do rozmiaru ekranu urządzenia użytkownika i jest zgodny ze sprawdzonymi metodami dotyczącymi procesów uwierzytelniania.

FirebaseUI obsługuje wielu dostawców logowania. Dodaj do aplikacji proces autoryzacji FirebaseUI za pomocą kilku wierszy kodu skonfigurowanego dla dostawców logowania:

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

Więcej informacji o różnych opcjach konfiguracji oferowanych przez FirebaseUI znajdziesz w naszej dokumentacji na GitHubie.

Logowanie użytkowników na różnych urządzeniach

Dzięki użyciu FirebaseUI do zintegrowania logowania jednym kliknięciem Twoja aplikacja może automatycznie logować użytkowników, nawet na różnych urządzeniach, które skonfigurowali za pomocą swoich danych logowania.

Włącz logowanie 1 dotknięciem za pomocą FirebaseUI, zmieniając 1 wiersz konfiguracji:

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

Więcej informacji o różnych opcjach konfiguracji oferowanych przez FirebaseUI znajdziesz w naszej dokumentacji na GitHubie.

szybkie wczytywanie,

Wysoka wydajność poprawia wygodę użytkowników, pomaga utrzymać ich zainteresowanie i zwiększa liczbę konwersji. Wysoka wydajność, np. krótki „czas do pierwszego wyrenderowania elementu znaczącego” i „czas do pełnej interaktywności”, to ważne wymaganie w przypadku progresywnych aplikacji internetowych.

Efektywne wyświetlanie zasobów statycznych

Firebase Hosting wyświetla Twoje treści w globalnej sieci CDN i jest zgodny z protokołem HTTP/2. Gdy hostujesz zasoby statyczne w Firebase, konfigurujemy wszystko za Ciebie – nie musisz nic dodatkowo robić, aby korzystać z tej usługi.

Przechowywanie w pamięci podręcznej treści dynamicznych

Dzięki Firebase Hosting Twoja aplikacja internetowa może też wyświetlać treści dynamiczne generowane po stronie serwera przez Cloud Functions lub Cloud Run aplikację w kontenerze. Korzystając z tej usługi, możesz buforować treści dynamiczne w wydajnej globalnej sieci CDN za pomocą jednego wiersza kodu:

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

Ta usługa pozwala uniknąć dodatkowych wywołań backendu, przyspieszyć odpowiedzi i obniżyć koszty.

Więcej informacji o tym, jak wyświetlać treści dynamiczne (oparte na Cloud Functions lub Cloud Run) i włączyć buforowanie w CDN za pomocą Firebase Hosting, znajdziesz w naszej dokumentacji.

Ładowanie usług tylko wtedy, gdy są potrzebne

Pakiet SDK Firebase JavaScript można częściowo zaimportować, aby zminimalizować początkowy rozmiar pobierania. Korzystaj z tego modułowego pakietu SDK, aby importować usługi Firebase, których Twoja aplikacja potrzebuje, tylko wtedy, gdy są one potrzebne.

Aby na przykład zwiększyć szybkość pierwszego wyrenderowania aplikacji, może ona najpierw wczytać Firebase Authentication. Gdy aplikacja będzie ich potrzebować, możesz wczytać inne usługi Firebase, takie jak Cloud Firestore.

Korzystając z menedżera pakietów, takiego jak webpack, możesz najpierw wczytać Firebase Authentication:

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

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

Gdy będziesz potrzebować dostępu do warstwy danych, załaduj bibliotekę za pomocą Cloud Firestore importów dynamicznych:

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

Odporność sieci

Użytkownicy mogą nie mieć niezawodnego dostępu do internetu. PWA powinny działać podobnie do natywnych aplikacji mobilnych i w miarę możliwości funkcjonować w trybie offline.

Dostęp do danych aplikacji w trybie offline

Cloud Firestore obsługuje trwałość danych offline co umożliwia warstwie danych aplikacji transparentne działanie w trybie offline. W połączeniu z Service Workers możesz buforować statyczne zasoby, dzięki czemu aplikacja PWA może w pełni działać w trybie offline. Trwałość danych offline możesz włączyć za pomocą jednego wiersza kodu:

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

Utrzymywanie stanu uwierzytelniania offline

Firebase Authentication przechowuje lokalną pamięć podręczną danych logowania, dzięki czemu użytkownik, który wcześniej się zalogował, może pozostać uwierzytelniony nawet wtedy, gdy jest offline. Obserwator stanu logowania będzie działać normalnie i wywoływać zdarzenia nawet wtedy, gdy użytkownik ponownie załaduje aplikację w trybie offline:

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

Aby rozpocząć korzystanie z Cloud Firestore i Firebase Authentication, zapoznaj się z naszą dokumentacją.

Zaangażowanie użytkowników

Użytkownicy chcą wiedzieć, kiedy udostępniasz nowe funkcje aplikacji, a Ty chcesz utrzymać wysokie zaangażowanie użytkowników. Skonfiguruj PWA, aby proaktywnie i odpowiedzialnie docierać do użytkowników.

wyświetlać użytkownikom powiadomienia push,

Za pomocą Firebase Cloud Messaging możesz wysyłać odpowiednie powiadomienia z serwera na urządzenia użytkowników. Ta usługa umożliwia wyświetlanie użytkownikom aktualnych powiadomień nawet wtedy, gdy aplikacja jest zamknięta.

Automatyzacja ponownego zaangażowania użytkowników

Korzystając z Cloud Functions for Firebase, możesz wysyłać użytkownikom wiadomości zachęcające do ponownego zaangażowania na podstawie zdarzeń w chmurze, np. zapisu danych w Cloud Firestore lub usunięcia konta użytkownika. Możesz też wysłać powiadomienie push do użytkownika, gdy zyska on nowego obserwującego:

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