Progresywne aplikacje internetowe (PWA) to aplikacje internetowe zgodne z zestawem wytycznych, które mają zapewnić użytkownikom niezawodne, szybkie i angażujące korzystanie z aplikacji.
Firebase oferuje kilka usług, które pomogą Ci sprawnie dodawać funkcje progresywne do aplikacji, zapewniając zgodność ze sprawdzonymi metodami dotyczącymi aplikacji PWA. Oto niektóre z nich:
| Sprawdzone metody dotyczące aplikacji PWA | Jak usługi Firebase mogą Ci pomóc |
|---|---|
| Bezpieczeństwo |
|
| Szybkie ładowanie |
|
| Odporność sieci |
|
| Angażowanie użytkowników |
|
Z tej strony dowiesz się, jak platforma Firebase może pomóc Ci w tworzeniu nowoczesnej, wysokiej wydajności PWA z wykorzystaniem naszego pakietu SDK Firebase JavaScript przeznaczonego do różnych przeglądarek.
Aby dodać Firebase do swojej aplikacji internetowej, zapoznaj się z naszym przewodnikiem dla początkujących.
Bezpieczeństwo
Od wyświetlania witryny po wdrożenie procesu uwierzytelniania – bardzo ważne jest, aby PWA zapewniała bezpieczny i zaufany przepływ pracy.
Udostępnianie aplikacji PWA przez HTTPS
HTTPS chroni integralność witryny oraz prywatność i bezpieczeństwo użytkowników. Aplikacje PWA muszą być udostępniane przez HTTPS.
Hosting Firebase domyślnie wyświetla zawartość aplikacji przez HTTPS. Możesz wyświetlać swoje 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 Twojej domeny niestandardowej.
Zapoznaj się z przewodnikiem dla początkujących do Hostingu Firebase, aby dowiedzieć się, jak możesz hostować PWA na platformie Firebase.
Zaoferuj bezpieczny proces uwierzytelniania
FirebaseUI udostępnia oparty na Uwierzytelnianiu Firebase uproszczony proces uwierzytelniania elastycznego, który umożliwia aplikacji integrację zaawansowanego i bezpiecznego procesu logowania, który nie wymaga wysiłku. FirebaseUI automatycznie dostosowuje się do rozmiaru ekranu urządzenia użytkownika i postępuje zgodnie ze sprawdzonymi metodami uwierzytelniania.
FirebaseUI obsługuje wielu dostawców logowania. Aby dodać do aplikacji proces uwierzytelniania FirebaseUI, za pomocą zaledwie kilku linijek 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 konfiguracyjnych oferowanych przez FirebaseUI znajdziesz w dokumentacji na GitHubie.
Logowanie użytkowników na różnych urządzeniach
Jeśli użyjesz FirebaseUI do integracji logowania jednym kliknięciem, Twoja aplikacja będzie mogła automatycznie logować użytkowników, nawet na różnych urządzeniach skonfigurowanych za pomocą danych logowania.
Włącz logowanie jednym kliknięciem w 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
};
Więcej informacji o różnych opcjach konfiguracyjnych oferowanych przez FirebaseUI znajdziesz w dokumentacji na GitHubie.
Szybkie wczytywanie
Wysoka skuteczność zwiększa wygodę użytkowników, pomaga ich zatrzymać i zwiększa liczbę konwersji. Ważnym wymaganiem w przypadku PWA jest wysoka wydajność, np. krótki „czas do pierwszego znaczącego wyrenderowania” i „czas do interakcji”.
Efektywne wyświetlanie zasobów statycznych
Hosting Firebase wyświetla Twoje treści przez globalną sieć CDN i jest zgodny z HTTP/2. Gdy hostujesz zasoby statyczne w Firebase, my wszystko to konfigurujemy za Ciebie – nie musisz nic robić, aby korzystać z tej usługi.
Buforuj zawartość dynamiczną
Dzięki Hostingowi Firebase Twoja aplikacja internetowa może również udostępniać treści dynamiczne generowane po stronie serwera przez Cloud Functions lub skonteneryzowaną aplikację Cloud Run. Za pomocą tej usługi możesz buforować zawartość dynamiczną w potężnej 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.
Zapoznaj się z naszą dokumentacją, aby dowiedzieć się, jak obsługiwać treści dynamiczne (obsługiwane przez Cloud Functions lub Cloud Run) i włączyć zapisywanie w pamięci podręcznej CDN w Hostingu Firebase.
Ładuj usługi tylko wtedy, gdy są potrzebne
Pakiet Firebase JavaScript SDK można częściowo zaimportować, by początkowy rozmiar pobieranych danych nie był minimalny. Wykorzystaj ten modułowy pakiet SDK, aby importować usługi Firebase, których potrzebuje Twoja aplikacja, tylko wtedy, gdy są potrzebne.
Aby np. zwiększyć początkową szybkość renderowania aplikacji, może ona najpierw wczytać Uwierzytelnianie Firebase. 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 załadować Uwierzytelnianie Firebase:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
Następnie, gdy musisz uzyskać dostęp do warstwy danych, wczytaj bibliotekę Cloud Firestore za pomocą dynamicznych importów:
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 offline do danych aplikacji
Cloud Firestore obsługuje trwałość danych offline, dzięki czemu warstwy danych aplikacji mogą działać w trybie offline. W połączeniu z mechanizmami Service Worker do buforowania zasobów statycznych Twoja aplikacja PWA może w pełni działać 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 ...
});
Zachowywanie stanu uwierzytelniania offline
Uwierzytelnianie Firebase przechowuje lokalną pamięć podręczną danych logowania, dzięki czemu zalogowany użytkownik pozostaje uwierzytelniony nawet wtedy, gdy jest offline. Obserwator stanu logowania będzie działać normalnie i aktywować się nawet wtedy, gdy użytkownik ponownie załaduje aplikację, będąc offline:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});
Zapoznaj się z naszą dokumentacją, aby zacząć korzystać z Cloud Firestore i Uwierzytelniania Firebase.
Angażuj użytkowników
Użytkownicy chcą wiedzieć, kiedy pojawią się nowe funkcje aplikacji, dlatego chcesz utrzymać wysokie zaangażowanie użytkowników. Skonfiguruj PWA, aby aktywnie i odpowiedzialnie kontaktować się z użytkownikami.
Wyświetlanie użytkownikom powiadomień push
Dzięki Komunikacji w chmurze Firebase możesz przesyłać odpowiednie powiadomienia z serwera na urządzenia użytkowników. Ta usługa umożliwia szybkie wyświetlanie użytkownikom powiadomień nawet wtedy, gdy aplikacja jest zamknięta.
Automatyczne ponowne angażowanie użytkowników
Za pomocą Cloud Functions dla Firebase wysyłaj do użytkowników wiadomości zachęcające do ponownego zaangażowania na podstawie zdarzeń w chmurze, takich jak zapis danych do Cloud Firestore lub usuwanie konta użytkownika. Możesz też wysłać do użytkownika powiadomienie push, gdy znajdzie on 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);
});