Le app web progressive (PWA) sono app web che rispettano un insieme di linee guida destinate 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 |
|
| Tempo di caricamento rapido |
|
| Resilienza della rete |
|
| Coinvolgere 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 SDK Firebase JavaScript cross-browser.
Consulta la nostra guida introduttiva per aggiungere Firebase alla tua app web.
Sicurezza e protezione
Dal caricamento del sito all'implementazione di un flusso di autenticazione, è fondamentale che la tua PWA fornisca un flusso di lavoro sicuro e affidabile.
Pubblicare la 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.
Per impostazione predefinita, Firebase Hosting pubblica i contenuti dell'app tramite HTTPS. Puoi pubblicare i tuoi contenuti su un sottodominio Firebase senza costi aggiuntivi o sul tuo dominio personalizzato. Il nostro servizio di hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato automaticamente e senza costi.
Consulta la guida introduttiva per Firebase Hosting per scoprire come puoi ospitare la tua PWA sulla piattaforma Firebase.
Offrire un flusso di autenticazione sicuro
FirebaseUI fornisce un flusso di autenticazione adattabile direttamente basato su Firebase Authentication, consentendo 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 più provider di accesso. Aggiungi il FirebaseUI flusso di autenticazione alla tua app con poche righe di codice configurato per i fornitori di servizi 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);
Consulta la nostra documentazione su GitHub per scoprire di più sulle varie opzioni di configurazione offerte da FirebaseUI.
Accedere agli utenti su più dispositivi
Se utilizzi FirebaseUI per integrare l'accesso con un solo tocco, la tua app può far accedere automaticamente gli utenti, anche su dispositivi diversi che hanno configurato con le proprie credenziali di accesso.
Attiva l'accesso con un solo 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 };
Consulta la nostra documentazione su GitHub per scoprire di più sulle varie opzioni di configurazione offerte da FirebaseUI.
Tempo di caricamento rapido
Un rendimento elevato migliora l'esperienza utente, aiuta a fidelizzare gli utenti e aumenta le conversioni. Prestazioni elevate, ad esempio un "tempo di primo paint significativo" e "tempo all'interattività" bassi, sono un requisito importante per le PWA.
Pubblicare gli asset statici in modo efficiente
Firebase Hosting pubblica i tuoi contenuti su una CDN globale ed è compatibile con HTTP/2. Quando ospiti gli asset statici con Firebase, lo facciamo noi 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'app containerizzata Cloud Run. Con questo servizio, puoi memorizzare nella cache i tuoi contenuti dinamici su una potente 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 tuo back-end, di velocizzare le risposte e di ridurre i costi.
Consulta la nostra documentazione per scoprire come puoi pubblicare contenuti dinamici (basati su Cloud Functions o Cloud Run) e attivare la memorizzazione nella cache CDN con Firebase Hosting.
Carica i servizi solo quando sono necessari
L'SDK Firebase JavaScript può essere importato parzialmente per mantenere il volume del download iniziale minimo. 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 disegno iniziale dell'app, l'app può prima caricare Firebase Authentication. Poi, quando la tua app ne ha bisogno, puoi caricare altri servizi Firebase, come Cloud Firestore.
Utilizzando un gestore di pacchetti come webpack, puoi prima caricare Firebase Authentication:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
Quando devi accedere al livello dati, carica la libreria Cloud Firestore 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 dovrebbero comportarsi in modo simile alle app mobile native e funzionare offline, se possibile.
Accedere ai dati delle app offline
Cloud Firestore supporta la persistenza dei dati offline, che consente al livello dati della tua app di funzionare in modo trasparente offline. Se li combini con i Service Worker per memorizzare nella cache gli asset statici, la tua PWA può funzionare completamente offline. Puoi attivare la persistenza dei dati offline con una sola 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'osservatore dello stato di accesso funzionerà normalmente e si attiverà anche se l'utente ricarica l'app in modalità offline:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});Consulta la nostra documentazione per iniziare a utilizzare Cloud Firestore e Firebase Authentication.
Coinvolgere gli utenti
Gli utenti vogliono sapere quando rilasci nuove funzionalità per la tua app e tu vuoi mantenere alto il loro coinvolgimento. Configura la tua PWA in modo da contattare i tuoi utenti in modo proattivo e responsabile.
Mostrare notifiche push agli utenti
Con Firebase Cloud Messaging, puoi inviare notifiche pertinenti dal tuo server ai dispositivi dei tuoi utenti. Questo servizio ti consente di mostrare notifiche tempestive ai tuoi utenti anche quando l'app è chiusa.
Automatizzare il ricoinvolgimento degli utenti
Utilizzando Cloud Functions for Firebase, invia ai tuoi utenti messaggi di ricoinvolgimento in base agli eventi cloud, ad esempio una scrittura di dati in Cloud Firestore o un eliminazione dell'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); });