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:

Sprawdzona metoda dotycząca aplikacji PWA Jak usługi Firebase mogą pomóc
Bezpieczeństwo
  • Firebase Hosting udostępnia bezpłatne certyfikaty SSL dla Twojej domeny niestandardowej i domyślnej subdomeny Firebase.
  • Firebase Authentication umożliwia bezpieczne logowanie użytkowników na różnych urządzeniach.
  • FirebaseUI stosuje sprawdzone metody dotyczące procesów uwierzytelniania.
Szybkie wczytywanie
  • Firebase Hosting obsługuje HTTP/2 i może przechowywać w pamięci podręcznej zarówno treści statyczne, jak i dynamiczne w globalnej sieci CDN.
  • Firebase JavaScript SDK jest modułowy i umożliwia dynamiczne importowanie bibliotek, gdy są potrzebne.
Odporność sieci
  • Dzięki Cloud Firestore możesz przechowywać dane i uzyskiwać do nich dostęp w czasie rzeczywistym i offline.
  • Firebase Authentication utrzymuje stan uwierzytelniania użytkownika, nawet w trybie offline.
Angażowanie użytkowników
  • Firebase Cloud Messaging umożliwia wysyłanie wiadomości push na urządzenia użytkowników.
  • Dzięki Cloud Functions for Firebase możesz automatyzować wiadomości zachęcające do ponownego zaangażowania na podstawie zdarzeń w chmurze.

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

Wydajna usługa hostingowa

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

Firebase Hosting domyślnie wyświetla treści aplikacji za pomocą protokołu HTTPS. Możesz wyświetlać treści w bezpłatnej subdomenie Firebase lub we własnej domenie niestandardowej. Nasza usługa hostingowa 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ć PWA na platformie Firebase.

oferować bezpieczny proces uwierzytelniania,

Uwierzytelnianie, które łatwo dodać i które dostosowuje się do urządzenia

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 za pomocą kilku wierszy kodu skonfigurowanego dla dostawców logowania:FirebaseUI

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

Logowanie się 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 PWA.

Efektywne wyświetlanie zasobów statycznych

Wydajna usługa hostingowa

Firebase Hosting wyświetla Twoje treści w globalnej sieci CDN i jest zgodny z protokołem HTTP/2. Gdy hostujesz statyczne zasoby w Firebase, konfigurujemy wszystko za Ciebie – nie musisz niczego 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ć dynamiczne treści generowane po stronie serwera przez Cloud Functions lub Cloud Run aplikację w kontenerze. Korzystając z tej usługi, możesz buforować dynamiczne treści 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ść początkowego renderowania 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ę Cloud Firestoreza pomocą 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 jak natywne aplikacje mobilne 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, która umożliwia warstwie danych aplikacji transparentne działanie w trybie offline. W połączeniu z Service Workerami buforuje 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żuj 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, wysyłaj użytkownikom wiadomości zachęcające do ponownego zaangażowania na podstawie zdarzeń w chmurze, np. zapisu danych w Cloud Firestorelub usunięcia konta użytkownika. Możesz też wysyłać powiadomienia 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);
    });