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 niezawodności, szybkości i atrakcyjności.

Firebase oferuje kilka usług, które mogą pomóc w efektywnym dodawaniu do aplikacji funkcji progresywnych, aby spełnić wiele sprawdzonych metod PWA, w tym:

Sprawdzone metody PWA	Jak mogą pomóc usługi Firebase
Bezpieczeństwo i ochrona	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 wdraża sprawdzone metody dotyczące przepływów uwierzytelniania.
Krótki czas wczytywania	Firebase Hosting obsługuje protokół HTTP/2 i może buforować zarówno treści statyczne, jak i dynamiczne w globalnej sieci CDN. Pakiet 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 uwierzytelnienia użytkownika nawet w trybie offline.
Zaangaż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 o ponownym zaangażowaniu na podstawie zdarzeń w chmurze.

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

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

Bezpieczeństwo i ochrona

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

Udostępnianie aplikacji PWA przez HTTPS

HTTPS zwiększa jej wiarygodność 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 przez 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.

Aby dowiedzieć się, jak hostować aplikację PWA na platformie Firebase, zapoznaj się z przewodnikiem dla początkujących dotyczącym Firebase Hosting.

Oferowanie bezpiecznego przepływu uwierzytelniania

FirebaseUI zapewnia gotowy do użycia responsywny przepływ uwierzytelniania oparty na Firebase Authentication, dzięki czemu aplikacja może zintegrować zaawansowany i bezpieczny przepływ logowania przy niewielkim wysiłku. FirebaseUI automatycznie dostosowuje się do rozmiaru ekranu urządzenia użytkownika i jest zgodny ze sprawdzonymi metodami dotyczącymi przepływów uwierzytelniania.

FirebaseUI obsługuje wielu dostawców logowania. Aby dodać FirebaseUI przepływ uwierzytelniania do aplikacji, wystarczy kilka wierszy kodu skonfigurowanego pod kątem 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 FirebaseUI możesz zintegrować logowanie jednym kliknięciem, aby aplikacja mogła automatycznie logować użytkowników nawet na różnych urządzeniach, które skonfigurowali za pomocą danych logowania.

Aby włączyć logowanie jednym kliknięciem za pomocą FirebaseUI, zmień jeden 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.

Krótki czas wczytywania

Wysoka wydajność poprawia wygodę użytkowników, pomaga utrzymać ich zainteresowanie i zwiększa współczynnik 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 aplikacji PWA.

Efektywne wyświetlanie zasobów statycznych

Firebase Hosting wyświetla 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 robić, aby korzystać z tej usługi.

Buforowanie 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 aplikację w kontenerze Cloud Run. Za pomocą 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 zmniejszyć koszty.

Z naszej dokumentacji dowiesz się, jak udostępniać treści dynamiczne (obsługiwane przez Cloud Functions lub Cloud Run) i włączyć buforowanie w sieci CDN za pomocą Firebase Hosting.

Wczytywanie usług tylko wtedy, gdy są potrzebne

Pakiet SDK Firebase JavaScript można częściowo importować aby zminimalizować początkowy rozmiar pobierania. Skorzystaj z tego 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ść renderowania aplikacji, możesz najpierw wczytać Firebase Authentication. Następnie, gdy aplikacja będzie ich potrzebować, możesz wczytać inne usługi Firebase, takie jak Cloud Firestore.

Za pomocą 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);

Następnie, gdy będziesz potrzebować dostępu do warstwy danych, wczytaj Cloud Firestore bibliotekę za 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. Aplikacje PWA powinny działać podobnie do natywnych aplikacji mobilnych i w miarę możliwości działać offline.

Dostęp do danych aplikacji offline

Cloud Firestore obsługuje trwałość danych offline co umożliwia warstwie danych aplikacji transparentną pracę offline. W połączeniu z Service Workers do buforowania zasobów statycznych, aplikacja PWA może w pełni działać 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 uwierzytelnienia 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 w trybie offline. Obserwator stanu logowania będzie działać normalnie i uruchomi się 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 aplikację PWA tak, aby proaktywnie i odpowiedzialnie kontaktować się z użytkownikami.

Wyświetlanie powiadomień push użytkownikom

Dzięki 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

Za pomocą Cloud Functions for Firebase, możesz wysyłać użytkownikom wiadomości o ponownym zaangażowaniu 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);
    });