Utilizzare Firebase in un'app web progressiva (PWA)

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 essere utili
Protezione e sicurezza	Firebase Hosting esegue il provisioning dei certificati SSL senza costi per il tuo dominio personalizzato e il sottodominio Firebase predefinito. Firebase Authentication ti consente di far accedere gli utenti su più dispositivi in modo sicuro. FirebaseUI implementa le best practice per i flussi di autenticazione.
Tempi di caricamento rapidi	Firebase Hosting supporta HTTP/2 e può memorizzare nella cache i tuoi contenuti statici e dinamici su una CDN globale. L'SDK JavaScript Firebase è modulare e puoi importare le librerie in modo dinamico quando sono necessarie.
Resilienza della rete	Con Cloud Firestore, puoi archiviare i dati e accedervi in tempo reale e offline. Firebase Authentication mantiene lo stato di autenticazione di un utente, anche offline.
Coinvolgi gli utenti	Firebase Cloud Messaging ti consente di inviare messaggi push ai dispositivi dei tuoi utenti. Con Cloud Functions for Firebase, puoi automatizzare i messaggi di re-engagement in base agli eventi cloud.

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

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.

Per impostazione predefinita, Firebase Hosting 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 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 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 flusso di autenticazione FirebaseUI 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);

Consulta la nostra documentazione su GitHub per scoprire di più sulle varie opzioni di configurazione offerte da FirebaseUI.

Accedi agli utenti su più dispositivi

Utilizzando FirebaseUI per integrare l'accesso One Tap, 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 One Tap 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.

Tempi di caricamento rapidi

Un rendimento elevato migliora l'esperienza utente, aiuta a fidelizzare gli utenti e aumenta le conversioni. Le prestazioni elevate, come un basso "tempo di First Meaningful Paint" e "Time to Interactive", sono un requisito importante per le PWA.

Pubblica gli asset statici in modo efficiente

Firebase Hosting pubblica i tuoi contenuti su una rete CDN globale ed è compatibile con HTTP/2. Quando ospiti i tuoi asset statici con Firebase, configuriamo tutto 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. Utilizzando 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 backend, velocizzare le risposte e ridurre i costi.

Consulta la nostra documentazione per scoprire come pubblicare contenuti dinamici (con tecnologia 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 ridurre al minimo le dimensioni del download iniziale. Sfrutta questo SDK modulare per importare i servizi Firebase necessari per la tua app solo quando sono necessari.

Ad esempio, per aumentare la velocità di visualizzazione iniziale dell'app, l'app può caricare prima Firebase Authentication. In seguito, 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);

Poi, quando devi accedere al livello dati, carica la libreria Cloud Firestore utilizzando le importazioni dinamiche:

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Resilienza della rete

I tuoi utenti potrebbero non avere un accesso a internet affidabile. Le PWA dovrebbero comportarsi in modo simile alle app mobile native e dovrebbero funzionare offline, se possibile.

Accedi ai dati dell'app offline

Cloud Firestore supporta la persistenza dei dati offline, che consente al livello dati dell'app di funzionare in modo trasparente offline. In combinazione con i service worker per memorizzare nella cache gli asset statici, la tua PWA può funzionare completamente offline. Puoi abilitare 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 conserva 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 ...
  }
});

Consulta la nostra documentazione per iniziare a utilizzare Cloud Firestore e Firebase Authentication.

Coinvolgi gli utenti

I tuoi utenti vogliono sapere quando rilasci nuove funzionalità per la tua app e tu vuoi mantenere elevato il coinvolgimento degli utenti. Configura la tua PWA per contattare i tuoi utenti in modo proattivo e responsabile.

Mostra notifiche push agli utenti

Con Firebase Cloud Messaging, puoi inviare notifiche pertinenti dal tuo server ai dispositivi degli utenti. Questo servizio ti consente di mostrare notifiche tempestive agli utenti anche quando l'app è chiusa.

Automatizza il ricoinvolgimento degli utenti

Utilizzando Cloud Functions for Firebase, invia ai tuoi utenti messaggi di re-engagement basati su eventi cloud, ad esempio una scrittura di dati su 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);
    });