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 |
|
| Krótki czas wczytywania |
|
| Odporność sieci |
|
| Zaangażowanie użytkowników |
|
Na tej stronie znajdziesz omówienie tego, jak platforma Firebase może pomóc w tworzeniu nowoczesnej, wydajnej PWA za pomocą naszego pakietu SDK działającego w różnych przeglądarkach Firebase JavaScript.
Aby dodać Firebase do 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 PWA zapewniała bezpieczny i zaufany przepływ pracy.
Udostępnianie PWA przez HTTPS
HTTPS zwiększa wiarygodność witryny oraz chroni prywatność i dane użytkowników. 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ć PWA na platformie Firebase, zapoznaj się z przewodnikiem dla początkujących dotyczącym Firebase Hosting.
Oferowanie bezpiecznego przepływu uwierzytelniania
FirebaseUI zapewnia przepływ uwierzytelniania typu „drop-in” responsywny 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 stosuje sprawdzone metody dotyczące przepływów uwierzytelniania.
FirebaseUI obsługuje wielu dostawców logowania. Aby dodać FirebaseUI przepływ uwierzytelniania do aplikacji, wystarczy kilka wierszy kodu skonfigurowanego 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 oferowanych przez FirebaseUI znajdziesz w naszej dokumentacji na GitHubie.
Logowanie użytkowników 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, które skonfigurowali za pomocą swoich danych logowania.
Aby włączyć logowanie jednym kliknięciem za pomocą FirebaseUI, zmień 1 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", jest ważnym wymaganiem w przypadku 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, aplikacja internetowa może też udostępniać treści dynamiczne generowane po stronie serwera przez Cloud Functions lub Cloud Run skonteneryzowaną aplikację. Za pomocą tej usługi możesz buforować treści dynamiczne w wydajnej globalnej sieci CDN za pomocą 1 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.
Aby dowiedzieć 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, zapoznaj się z naszą dokumentacją.
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. PWA powinny zachowywać się 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, PWA może w pełni działać offline. Trwałość danych offline możesz włączyć za pomocą 1 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 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.
Automatyzowanie 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); });