Le app web progressive (PWA) sono app web che seguono un insieme di linee guida volte a garantire agli utenti un'esperienza affidabile, veloce e coinvolgente.
Firebase offre diversi servizi che possono aiutarti ad aggiungere in modo efficiente funzionalità progressive alla tua app per soddisfare molte best practice per le PWA, tra cui:
| Best practice per le PWA | In che modo i servizi Firebase possono aiutarti |
|---|---|
| Protezione e sicurezza |
|
| Tempi di caricamento rapidi |
|
| Resilienza della rete |
|
| Coinvolgi gli utenti |
|
Questa pagina offre una panoramica di come la piattaforma Firebase può aiutarti a creare una PWA moderna e ad alte prestazioni utilizzando il nostro cross-browser Firebase JavaScript SDK.
Visita la nostra guida introduttiva per aggiungere Firebase alla tua app web.
Protezione e sicurezza
Dalla pubblicazione del sito all'implementazione di un flusso di autenticazione, è fondamentale che la tua PWA fornisca un flusso di lavoro sicuro e affidabile.
Pubblica la tua PWA tramite HTTPS
HTTPS protegge l'integrità del tuo sito web, nonché la privacy e la sicurezza dei tuoi utenti. Le PWA devono essere pubblicate tramite HTTPS.
Firebase Hosting, per impostazione predefinita, pubblica i contenuti della tua app tramite HTTPS. Puoi pubblicare i tuoi contenuti su un sottodominio Firebase senza costi o sul tuo dominio personalizzato. Il nostro servizio di hosting esegue automaticamente e senza costi il provisioning di un certificato SSL per il tuo dominio personalizzato.
Visita la guida introduttiva di Firebase Hosting per scoprire come ospitare la tua PWA sulla piattaforma Firebase.
Offri un flusso di autenticazione sicuro
FirebaseUI fornisce un flusso di autenticazione responsive drop-in basato su Firebase Authentication, che consente alla tua app di integrare un flusso di accesso sofisticato e sicuro con il minimo sforzo. FirebaseUI si adatta automaticamente alle dimensioni dello schermo dei dispositivi di un utente e segue le best practice per i flussi di autenticazione.
FirebaseUI supporta l'accesso simultaneo da più provider. Aggiungi il FirebaseUI flusso di autenticazione alla tua app con poche righe di codice configurate per i provider di accesso:
// 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);
Visita la nostra documentazione su GitHub per scoprire di più sulle varie opzioni di configurazione offerte da FirebaseUI.
Consenti agli utenti di accedere su tutti i dispositivi
Utilizzando FirebaseUI per integrare l'accesso con un tocco, la tua app può consentire automaticamente agli utenti di accedere, anche su dispositivi diversi configurati con le loro credenziali di accesso.
Attiva l'accesso con un tocco utilizzando FirebaseUI modificando una riga di configurazione:
// 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 };
Visita la nostra documentazione su GitHub per scoprire di più sulle varie opzioni di configurazione offerte da FirebaseUI.
Tempi di caricamento rapidi
Avere prestazioni ottimali migliora l'esperienza utente, aiuta a fidelizzare gli utenti e aumenta le conversioni. Le prestazioni ottimali, come il basso "tempo al primo rendering significativo" e "tempo all'interattività", sono un requisito importante per le PWA.
Pubblica in modo efficiente le risorse statiche
Firebase Hosting pubblica i tuoi contenuti su una rete CDN globale ed è compatibile con HTTP/2. Quando ospiti le tue risorse statiche con Firebase, configuriamo tutto per te: non devi fare altro per usufruire di questo servizio.
Memorizza nella cache i contenuti dinamici
Con Firebase Hosting, la tua app web può anche pubblicare contenuti dinamici generati lato server da Cloud Functions o da un' Cloud Run app containerizzata. Utilizzando questo servizio, puoi memorizzare nella cache i contenuti dinamici su una potente rete CDN globale con una riga di codice:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');Questo servizio ti consente di evitare chiamate aggiuntive al backend, velocizzare le risposte e ridurre i costi.
Visita la nostra documentazione per scoprire come puoi erogare contenuti dinamici (basati su Cloud Functions o Cloud Run) e attivare la memorizzazione nella cache della rete CDN con Firebase Hosting.
Carica i servizi solo quando sono necessari
L'Firebase JavaScript SDK può essere importato parzialmente per mantenere al minimo le dimensioni del download iniziale. Sfrutta questo SDK modulare per importare i servizi Firebase di cui la tua app ha bisogno solo quando sono necessari.
Ad esempio, per aumentare la velocità di rendering iniziale dell'app, puoi caricare prima Firebase Authentication. Poi, quando l'app ne ha bisogno, puoi caricare altri servizi Firebase, come Cloud Firestore.
Utilizzando un gestore di pacchetti come webpack, puoi caricare prima Firebase Authentication:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
Poi, quando devi accedere al livello dati, carica la Cloud Firestore libreria utilizzando importazioni dinamiche:
import('firebase/firestore').then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
Resilienza della rete
Gli utenti potrebbero non avere un accesso a internet affidabile. Le PWA devono comportarsi in modo simile alle app mobile native e devono funzionare offline quando possibile.
Accedi ai dati dell'app offline
Cloud Firestore supporta la persistenza dei dati offline il che consente al livello dati della tua app di funzionare in modo trasparente offline. In combinazione con i service worker per memorizzare nella cache le risorse statiche, la tua PWA può funzionare completamente offline. Puoi attivare la persistenza dei dati offline con una riga di codice:
firebase.firestore().enablePersistence().then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
Mantieni lo stato di autenticazione offline
Firebase Authentication mantiene una cache locale dei dati di accesso, consentendo a un utente che ha eseguito l'accesso in precedenza di rimanere autenticato anche quando è offline. L'observer dello stato di accesso funzionerà normalmente e si attiverà anche se l'utente ricarica l'app mentre è offline:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});Visita la nostra documentazione per iniziare a utilizzare Cloud Firestore e Firebase Authentication.
Coinvolgi gli utenti
Gli utenti vogliono sapere quando rilasci nuove funzionalità per la tua app e tu vuoi mantenere alto il coinvolgimento degli utenti. Configura la tua PWA in modo da contattare gli utenti in modo proattivo e responsabile.
Mostra notifiche push agli utenti
Con Firebase Cloud Messaging, puoi inviare notifiche pertinenti dal server ai dispositivi degli utenti. Questo servizio ti consente di mostrare notifiche tempestive agli utenti anche quando l'app è chiusa.
Automatizza il coinvolgimento degli utenti
Utilizzando Cloud Functions for Firebase, invia ai tuoi utenti messaggi di coinvolgimento in base agli eventi cloud, ad esempio una scrittura di dati in Cloud Firestore o l' eliminazione di un account utente. Puoi anche inviare una notifica push a un utente quando riceve un nuovo follower:
// 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); });