Używanie Firebase w progresywnej aplikacji internetowej (PWA)

Progresywne aplikacje internetowe (PWA) to aplikacje internetowe, które są zgodne z zestawem wytycznych, aby zapewnić użytkownikom niezawodne, szybkie i atrakcyjne działanie.

Firebase oferuje kilka usług, które mogą Ci pomóc w skutecznym dodawaniu do aplikacji funkcji progresywnych, aby spełniała ona wiele zalecanych praktyk dotyczących aplikacji internetowych, takich jak:

Sprawdzone metody dotyczące aplikacji PWA Zalety usług Firebase
Bezpieczeństwo
  • Firebase Hosting udostępnia bezpłatne certyfikaty SSL dla 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 usłudze CDN.
  • Pakiet SDK Firebase JavaScript jest modułowy, więc w razie potrzeby możesz dynamicznie importować biblioteki.
Odporność sieci
  • Dzięki Cloud Firestore możesz przechowywać dane i dostęp do nich w czasie rzeczywistym oraz offline.
  • Firebase Authentication zachowuje stan uwierzytelniania użytkownika nawet w trybie offline.
Zaangażuj użytkowników
  • Firebase Cloud Messaging umożliwia wysyłanie powiadomień push na urządzenia użytkowników.
  • Dzięki Cloud Functions for Firebase możesz automatyzować wysyłanie wiadomości o ponownym zaangażowaniu na podstawie zdarzeń w chmurze.

Na tej stronie znajdziesz omówienie tego, jak platforma Firebase może Ci pomóc w budowaniu nowoczesnych, wydajnych aplikacji internetowych za pomocą pakietu SDK Firebase JavaScript, który działa we wszystkich przeglądarkach.

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

Bezpieczeństwo

Od wyświetlania witryny po wdrażanie procesu uwierzytelniania – w każdym przypadku ważne jest, aby Twoja aplikacja PWA zapewniała bezpieczny i zaufany przepływ pracy.

Udostępnianie aplikacji internetowej za pomocą protokołu HTTPS

wydajny hosting,

HTTPS zwiększa jej wiarygodność oraz chroni prywatność i dane użytkowników. PWA muszą być wyświetlane przy użyciu protokołu HTTPS.

Firebase Hosting domyślnie udostępnia treści aplikacji przez HTTPS. Treści możesz udostępniać w bezpłatnej subdomenie Firebase lub w swojej domenie niestandardowej. Nasza usługa hostingowa automatycznie i bezpłatnie udostępnia certyfikat SSL dla Twojej domeny niestandardowej.

Aby dowiedzieć się, jak hostować PWA na platformie Firebase, zapoznaj się z wprowadzeniem do Firebase Hosting.

Udostępnianie bezpiecznego procesu uwierzytelniania

Proces uwierzytelniania w ramach responsywnego uwierzytelniania

FirebaseUI zapewnia responsywny proces uwierzytelniania oparty na Firebase Authentication, dzięki czemu aplikacja może z niewielkim nakładem pracy zintegrować zaawansowany i bezpieczny proces logowania. FirebaseUI dostosowuje się automatycznie do rozmiaru ekranu urządzenia użytkownika i stosuje sprawdzone metody dotyczące procesów uwierzytelniania.

FirebaseUI obsługuje wielu dostawców logowania. Dodaj do aplikacji proces autoryzacji FirebaseUI, korzystając z kilku linii kodu skonfigurowanych 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 dostępnych w FirebaseUI znajdziesz w 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, aplikacja może automatycznie logować użytkowników, nawet na różnych urządzeniach, na których skonfigurowali oni swoje dane logowania.

Aby włączyć logowanie jednym kliknięciem za pomocą FirebaseUI, zmień 1 wiersz w 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 dostępnych w FirebaseUI znajdziesz w dokumentacji na GitHubie.

Szybkie wczytywanie

Dobra wydajność zwiększa wygodę użytkowników, pomaga ich zatrzymać i zwiększa liczbę konwersji. Ważnym wymaganiem dotyczącym aplikacji PWA jest wysoka wydajność, np. krótki czas „pierwszego wyrenderowania elementu znaczącego” i „czas do pełnej interaktywności”.

Efektywnie wyświetlaj zasoby statyczne

wydajny hosting,

Firebase Hosting przesyła Twoje treści przez globalną sieć CDN i jest zgodna z protokołem HTTP/2. Gdy hostujesz zasoby statyczne w Firebase, konfigurujemy wszystko za Ciebie – nie musisz nic więcej robić, aby korzystać z tej usługi.

Przechowywanie w pamięci podręcznej zawartości dynamicznej

Dzięki Firebase Hosting Twoja aplikacja internetowa może też dostarczać treści dynamiczne generowane po stronie serwera przez Cloud Functions lub Cloud Run aplikację w kontenerze. Korzystając z tej usługi, możesz zapisać w pamięci podręcznej treści dynamiczne w silnej 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ń do backendu, przyspieszyć odpowiedzi i obniżyć koszty.

Aby dowiedzieć się, jak wyświetlać treści dynamiczne (za pomocą Cloud Functions lub Cloud Run) i włączyć buforowanie CDN za pomocą Firebase Hosting, zapoznaj się z naszą dokumentacją.

Ładuj usługi tylko wtedy, gdy są potrzebne

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

Aby na przykład zwiększyć początkową szybkość rysowania aplikacji, możesz najpierw ją załadować: Firebase Authentication. Gdy aplikacja ich potrzebuje, możesz wczytywać inne usługi Firebase, takie jak Cloud Firestore.

Za pomocą menedżera pakietów, takiego jak webpack, możesz najpierw załadować Firebase Authentication:

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

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

Gdy chcesz uzyskać dostęp do warstwy danych, wczytaj bibliotekę Cloud Firestore za pomocą importu dynamicznego:

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

Odporność sieci

Użytkownicy mogą nie mieć stabilnego dostępu do internetu. PWA powinny zachowywać się podobnie do natywnych aplikacji mobilnych i działać w trybie offline, gdy tylko jest to możliwe.

Dostęp do danych aplikacji w trybie offline

Cloud Firestore obsługuje trwałość danych offline, która umożliwia warstwie danych aplikacji działanie offline. W połączeniu z usługami w tle, które przechowują w pamięci podręcznej zasoby statyczne, aplikacja PWA może w pełni działać w trybie offline. Możesz włączyć trwałość danych offline za pomocą 1 wiersza kodu:

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

Utrzymywanie stanu uwierzytelniania offline

Firebase Authentication przechowuje lokalny bufor 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 uruchamiać się nawet wtedy, gdy użytkownik ponownie wczyta aplikację w trybie offline:

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

Aby rozpocząć korzystanie z Cloud FirestoreFirebase 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ć ich zaangażowanie na wysokim poziomie. Skonfiguruj swoją PWA, aby aktywnie i odpowiedzialnie docierać do użytkowników.

Wyświetlanie powiadomień push użytkownikom

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 powiadomień w czasie, nawet gdy aplikacja jest zamknięta.

Automatyczne przywracanie zaangażowania użytkowników

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

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