Użyj Firebase w progresywnej aplikacji internetowej (PWA)

Progresywne aplikacje internetowe (PWA) to aplikacje internetowe, które działają zgodnie z zestawem wytycznych , które mają zapewnić użytkownikom niezawodne, szybkie i wciągające doświadczenie.

Firebase oferuje kilka usług, które mogą pomóc Ci skutecznie dodawać progresywne funkcje do aplikacji, aby spełnić wiele najlepszych praktyk PWA, w tym:

Najlepsze praktyki PWA	Jak usługi Firebase mogą pomóc
Bezpieczne i bezpieczne	Hosting Firebase zapewnia bezpłatne certyfikaty SSL dla Twojej domeny niestandardowej i domyślnej subdomeny Firebase. Uwierzytelnianie Firebase umożliwia bezpieczne logowanie użytkowników na różnych urządzeniach. FirebaseUI wdraża najlepsze praktyki dotyczące przepływów uwierzytelniania.
Szybki czas ładowania	Hosting Firebase obsługuje protokół HTTP/2 i może buforować zarówno zawartość statyczną, jak i dynamiczną w globalnej sieci CDN. Zestaw SDK Firebase JavaScript jest modułowy i możesz dynamicznie importować biblioteki, gdy są potrzebne.
Odporność sieci	Dzięki Cloud Firestore możesz przechowywać dane i uzyskiwać do nich dostęp w czasie rzeczywistym i offline. Uwierzytelnianie Firebase utrzymuje stan uwierzytelnienia użytkownika, nawet w trybie offline.
Angażuj użytkowników	Firebase Cloud Messaging umożliwia wysyłanie wiadomości push na urządzenia użytkowników. Dzięki Cloud Functions dla Firebase możesz zautomatyzować wiadomości dotyczące ponownego zaangażowania na podstawie zdarzeń w chmurze.

Na tej stronie znajduje się przegląd tego, jak platforma Firebase może pomóc w zbudowaniu nowoczesnego, wydajnego PWA przy użyciu naszego wieloprzeglądowego zestawu SDK JavaScript Firebase .

Odwiedź nasz przewodnik dla początkujących , aby dodać Firebase do swojej aplikacji internetowej.

Bezpieczne i bezpieczne

Od obsługi witryny po wdrożenie przepływu uwierzytelniania — niezwykle ważne jest, aby PWA zapewniało bezpieczny i niezawodny przepływ pracy.

Obsługuj swoje PWA przez HTTPS

HTTPS chroni integralność Twojej witryny oraz chroni prywatność i bezpieczeństwo Twoich użytkowników. Elementy PWA muszą być udostępniane za pośrednictwem protokołu HTTPS.

Hosting Firebase domyślnie udostępnia zawartość aplikacji za pośrednictwem protokołu HTTPS. Możesz udostępniać swoje treści w bezpłatnej subdomenie Firebase lub we własnej domenie niestandardowej . Nasza usługa hostingowa zapewnia certyfikat SSL dla Twojej domeny niestandardowej automatycznie i bezpłatnie.

Odwiedź przewodnik wprowadzający do Hostingu Firebase, aby dowiedzieć się, jak hostować PWA na platformie Firebase.

Oferuj bezpieczny przepływ uwierzytelniania

FirebaseUI zapewnia responsywny przepływ uwierzytelniania oparty na uwierzytelnianiu Firebase , dzięki czemu Twoja aplikacja może zintegrować wyrafinowany i bezpieczny przepływ logowania przy niewielkim wysiłku. FirebaseUI automatycznie dostosowuje się do rozmiaru ekranu urządzeń użytkownika i postępuje zgodnie z najlepszymi praktykami w zakresie przepływów uwierzytelniania.

FirebaseUI obsługuje wielu dostawców logowania. Dodaj przepływ uwierzytelniania FirebaseUI do swojej aplikacji za pomocą zaledwie kilku wierszy 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);

Odwiedź naszą dokumentację w GitHub, aby dowiedzieć się więcej o różnych opcjach konfiguracji oferowanych przez FirebaseUI.

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

Używając FirebaseUI do integracji logowania jednym dotknięciem , Twoja aplikacja może automatycznie logować użytkowników, nawet na różnych urządzeniach, na których skonfigurowali swoje dane logowania.

Włącz logowanie jednym dotknięciem przy użyciu FirebaseUI, zmieniając 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
};

Odwiedź naszą dokumentację w GitHub, aby dowiedzieć się więcej o różnych opcjach konfiguracji oferowanych przez FirebaseUI.

Szybki czas ładowania

Doskonała wydajność poprawia komfort użytkowania, pomaga zatrzymać użytkowników i zwiększa konwersję. Świetna wydajność, taka jak krótki „czas do pierwszego znaczącego pomalowania ” i „ czas do interaktywności ”, jest ważnym wymaganiem w przypadku PWA.

Wydajnie obsługuj swoje zasoby statyczne

Hosting Firebase udostępnia Twoje treści za pośrednictwem globalnej sieci CDN i jest kompatybilny z HTTP/2. Gdy hostujesz zasoby statyczne w Firebase, konfigurujemy to wszystko za Ciebie — nie musisz nic więcej robić, aby skorzystać z tej usługi.

Buforuj zawartość dynamiczną

Dzięki Firebase Hosting Twoja aplikacja internetowa może także udostępniać dynamiczną zawartość generowaną po stronie serwera przez Cloud Functions lub aplikację kontenerową Cloud Run . Korzystając z tej usługi, możesz buforować swoją dynamiczną zawartość w potężnej globalnej sieci CDN za pomocą jednego wiersza kodu:

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

Usługa ta pozwala uniknąć dodatkowych połączeń do backendu, przyspieszyć odpowiedzi i obniżyć koszty.

Zapoznaj się z naszą dokumentacją, aby dowiedzieć się, jak udostępniać dynamiczną zawartość (obsługiwaną przez Cloud Functions lub Cloud Run) i włączać buforowanie CDN za pomocą Firebase Hosting.

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

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

Na przykład, aby zwiększyć początkową szybkość malowania aplikacji, może ona najpierw załadować uwierzytelnianie Firebase . Następnie, gdy Twoja aplikacja ich potrzebuje, możesz załadować inne usługi Firebase, takie jak Cloud Firestore .

Korzystając z menedżera pakietów, takiego jak webpack, możesz najpierw załadować uwierzytelnianie Firebase:

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

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

Następnie, gdy potrzebujesz dostępu do warstwy danych, załaduj bibliotekę Cloud Firestore za pomocą importu dynamicznego :

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

Odporność sieci

Twoi użytkownicy mogą nie mieć niezawodnego dostępu do Internetu. PWA powinny zachowywać się podobnie do natywnych aplikacji mobilnych i, jeśli to możliwe, powinny działać w trybie offline.

Uzyskaj dostęp do danych aplikacji w trybie offline

Cloud Firestore obsługuje trwałość danych w trybie offline , co umożliwia warstwie danych aplikacji przejrzyste działanie w trybie offline. W połączeniu z Service Workerami do buforowania zasobów statycznych , Twoje PWA może w pełni działać w trybie offline. Możesz włączyć trwałość danych offline za pomocą jednego wiersza kodu:

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

Utrzymuj stan autoryzacji w trybie offline

Uwierzytelnianie Firebase przechowuje lokalną pamięć podręczną danych logowania, umożliwiając wcześniej zalogowanemu użytkownikowi zachowanie uwierzytelnienia nawet wtedy, gdy jest offline. Obserwator stanu logowania będzie działał normalnie i uruchamiał się, nawet jeśli użytkownik ponownie załaduje aplikację w trybie offline:

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

Zapoznaj się z naszą dokumentacją, aby rozpocząć korzystanie z Cloud Firestore i uwierzytelniania Firebase .

Angażuj użytkowników

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

Wyświetlaj powiadomienia push swoim użytkownikom

Dzięki Firebase Cloud Messaging możesz przesyłać odpowiednie powiadomienia ze swojego serwera na urządzenia użytkowników. Usługa ta umożliwia terminowe wyświetlanie powiadomień użytkownikom nawet wtedy, gdy aplikacja jest zamknięta.

Zautomatyzuj ponowne zaangażowanie użytkowników

Korzystając z Cloud Functions dla Firebase , wysyłaj użytkownikom wiadomości zachęcające do ponownego zaangażowania na podstawie zdarzeń w chmurze, na przykład zapisu danych w Cloud Firestore lub usunięcia konta użytkownika . Możesz także wysłać powiadomienie push do użytkownika , gdy ten uzyska 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);
    });