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:

Questa pagina offre una panoramica di come la piattaforma Firebase può aiutarti a creare una PWA moderna e ad alte prestazioni utilizzando il nostro Firebase JavaScript SDK 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.

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.

Firebase Hosting, per impostazione predefinita, pubblica i contenuti della tua 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 fornisce un certificato SSL per il tuo dominio personalizzato automaticamente e senza costi.

Visita la guida introduttiva per Firebase Hosting per scoprire come ospitare la tua PWA sulla piattaforma Firebase.

Offrire un flusso di autenticazione sicuro

FirebaseUI fornisce un flusso di autenticazione reattivo 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 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);

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

Accedere per gli utenti su tutti i dispositivi

Utilizzando FirebaseUI per integrare l'accesso con un tocco, la tua app può accedere automaticamente agli 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
};

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

Tempi di caricamento rapidi

Prestazioni ottimali migliorano l'esperienza utente, aiutano a fidelizzare gli utenti e aumentano le conversioni. Prestazioni ottimali, come un basso "tempo al first meaningful paint" e "tempo all'interattività", sono un requisito importante per le PWA.

Pubblica le risorse statiche in modo efficiente

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 questo per te. Non devi fare altro per usufruire di questo servizio.

Memorizzare nella cache i contenuti dinamici

Con Firebase Hosting, la tua app web può pubblicare anche contenuti dinamici generati lato server da Cloud Functions o da un'app in container Cloud Run. Utilizzando questo servizio, puoi memorizzare nella cache i contenuti dinamici su una CDN globale potente con una sola 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 pubblicare contenuti dinamici (basati su Cloud Functions o Cloud Run) e attivare la memorizzazione nella cache della 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 alla tua app solo quando sono necessari.

Ad esempio, per aumentare la velocità di rendering iniziale della tua app, quest'ultima può caricare prima 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);

Poi, quando devi accedere al data layer, 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 accesso a internet affidabile. Le PWA devono comportarsi in modo simile alle app mobile native e devono funzionare offline, se possibile.

Accedere offline ai dati delle app

Cloud Firestore supporta la persistenza dei dati offline, che consente al livello di 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 sola riga di codice:

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

Mantenere 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 verrà attivato 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 ...
  }
});

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

Coinvolgere gli utenti

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

Mostrare 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 ai tuoi utenti anche quando l'app è chiusa.

Automatizzare il ricoinvolgimento degli utenti

Utilizzando Cloud Functions for Firebase, invia messaggi di riattivazione agli utenti in base agli eventi cloud, ad esempio una scrittura di dati su 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);
    });