Progresywne aplikacje internetowe (PWA) to aplikacje internetowe zgodne z zestaw wytycznych , by zapewnić użytkownikom niezawodną, szybką i atrakcyjną obsługę.
Firebase oferuje kilka usług, które pomogą Ci skutecznie dodawać aby Twoja aplikacja była zgodna z wieloma sprawdzonymi metodami dotyczącymi aplikacji PWA, w tym:
| 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 |
|
Na tej stronie dowiesz się, jak platforma Firebase może pomóc Ci w tworzeniu nowoczesną, bardzo wydajną aplikację PWA w wielu przeglądarkach, Firebase JavaScript pakiet SDK.
Odwiedź nasze przewodnik dla początkujących aby dodać Firebase do swojej aplikacji internetowej.
Bezpieczeństwo
Od wyświetlania witryny po wdrożenie procesu uwierzytelniania że PWA zapewnia bezpieczny i zaufany przepływ pracy.
Udostępnianie aplikacji PWA przez HTTPS
HTTPS chroni integralność witryny oraz prywatność i zapewnianie bezpieczeństwa użytkownikom. Aplikacje PWA muszą być udostępniane przez HTTPS.
Firebase Hosting, domyślnie udostępnia treści aplikacji przez HTTPS. Możesz wyświetlać swoje treści bezpłatnie samodzielnie lub w subdomenie Firebase. własnej domeny. Nasze usługa hostingowa udostępnia certyfikat SSL dla domeny niestandardowej automatycznie i bezpłatnie.
Odwiedź przewodnik dla początkujących użytkowników Firebase Hosting , aby dowiedzieć się, jak hostować PWA na platformie Firebase.
Zaoferuj bezpieczny proces uwierzytelniania
FirebaseUI zapewnia oparty na uwierzytelnianiu elastycznym, Firebase Authentication, co umożliwia zintegrować wyrafinowany, bezpieczny proces logowania, który nie wymaga większego wysiłku. FirebaseUI automatycznie dostosowuje się do rozmiaru ekranu urządzenia użytkownika i stosuje sprawdzone metody w procesie uwierzytelniania.
FirebaseUI obsługuje dostawców wielokrotnego logowania. Dodaj parametr Proces uwierzytelniania FirebaseUI w Twojej aplikacji wymaga tylko kilku linijek kodu skonfigurowana 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ź naszej dokumentacji w GitHubie, możesz dowiedzieć się więcej o różnych opcjach konfiguracji oferowanych przez FirebaseUI
Logowanie użytkowników na różnych urządzeniach
Za pomocą FirebaseUI do: integrować logowanie jednym kliknięciem, użytkownicy mogą logować się automatycznie, nawet na różnych urządzeniach, skonfigurować swoje dane logowania.
Włącz logowanie jednym kliknięciem w usłudze FirebaseUI, zmieniając 1 wiersz wartości Konfiguracja:
// 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ź naszej dokumentacji w GitHubie, możesz dowiedzieć się więcej o różnych opcjach konfiguracji oferowanych przez FirebaseUI
Szybkie wczytywanie
Wysoka wydajność poprawia wrażenia użytkowników, pomaga utrzymać ich zainteresowanie zwiększa liczbę konwersji. Wysoka skuteczność, np. krótki „czas do pierwsze istotne wyrenderowanie”. oraz "czas na interakcję", jest ważnym wymogiem w przypadku PWA.
Efektywne wyświetlanie zasobów statycznych
Firebase Hosting obsługuje: treści w globalnej sieci CDN i jest Zgodność z HTTP/2. Jeśli hostujesz zasoby statyczne w Firebase, skonfigurujemy – nie trzeba robić nic więcej, by skorzystać tej usługi.
Buforuj zawartość dynamiczną
Dzięki Firebase Hosting Twoja aplikacja internetowa może również wyświetlać treści dynamiczne, wygenerowane po stronie serwera przez usługę Cloud Functions lub Cloud Run skonteneryzowana aplikacja. Użycie tego możesz buforować zawartość dynamiczną w potężna globalna sieć CDN z jednym wierszem kodu:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
Ta usługa pozwala uniknąć dodatkowych wywołań backendu, przyspieszać odpowiedzi i obniżać koszty.
Zapoznaj się z naszą dokumentacją, aby dowiedzieć się, jak może wyświetlać zawartość dynamiczną (w technologii Cloud Functions lub Cloud Run) i włącz zapisywanie w pamięci podręcznej CDN za pomocą Firebase Hosting.
Ładuj usługi tylko wtedy, gdy są potrzebne
Pakiet SDK Firebase JavaScript może być częściowo zaimportowane aby początkowy rozmiar pobierania był minimalny. Wykorzystaj ten modułowy pakiet SDK, aby: importuj usługi Firebase, których potrzebuje Twoja aplikacja tylko wtedy, gdy są one potrzebne.
Aby na przykład zwiększyć szybkość początkowego renderowania, aplikacja może się najpierw wczytać Firebase Authentication Następnie, gdy aplikacja możesz wczytać inne usługi Firebase, takie jak Cloud Firestore
Możesz najpierw załadować pakiet Firebase Authentication za pomocą menedżera pakietów, takiego jak webpack:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
Następnie, gdy zechcesz uzyskać dostęp do warstwy danych, wczytaj Cloud Firestore za pomocą importy dynamiczne:
import('firebase/firestore').then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
Odporność sieci
Użytkownicy mogą nie mieć niezawodnego dostępu do internetu. Progresywne aplikacje internetowe powinny działać podobnie do natywnych aplikacji mobilnych i w miarę możliwości powinny działać offline.
Dostęp offline do danych aplikacji
Cloud Firestore obsługuje trwałość danych offline który umożliwia warstwie danych aplikacji przejrzystą pracę offline. Połączenie z Skrypty service worker dla zapisz zasoby statyczne w pamięci podręcznej, Twoja aplikacja PWA może w pełni działać offline. Możesz włączyć trwałość danych offline z jednym wierszem kodu:
firebase.firestore().enablePersistence().then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
Zachowywanie stanu uwierzytelniania offline
Firebase Authentication przechowuje lokalna pamięć podręczna danych logowania, dzięki czemu użytkownik wcześniej był zalogowany; nawet gdy są offline. Obserwator stanu logowania działają normalnie i uruchamiają się nawet wtedy, gdy użytkownik ponownie załaduje aplikację, będąc w trybie offline:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});
Zapoznaj się z naszą dokumentacją, aby zacząć korzystać Cloud Firestore i Firebase Authentication
Angażuj użytkowników
Użytkownicy chcą wiedzieć, kiedy pojawią się nowe funkcje aplikacji, i nie chcesz aby utrzymać zaangażowanie użytkowników na wysokim poziomie. Skonfiguruj PWA, aby aktywnie i odpowiedzialnie tworzyć aplikacje. docierać do użytkowników.
Wyświetlanie użytkownikom powiadomień push
Na Firebase Cloud Messaging możesz wysyłać użytkownikom odpowiednie powiadomienia z serwera urządzenia. 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
Korzystając z Cloud Functions for Firebase, wysyłać użytkownikom wiadomości zachęcające do ponownego zaangażowania na podstawie zdarzeń w chmurze, takich jak zapis danych w Cloud Firestore lub usunięcie konta użytkownika. Możesz też wysłać użytkownikowi powiadomienie push. gdy ten użytkownik znajdzie 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);
});