Utilizza Firebase in un'app Web progressiva (PWA)

Le Progressive Web App (PWA) sono app Web che seguono una serie di linee guida intese 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 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 SDK JavaScript Firebase cross-browser.

Visita la nostra guida introduttiva per aggiungere Firebase alla tua app Web.

Sicuro e protetto

Dal servizio del tuo sito all'implementazione di un flusso di autenticazione, è fondamentale che la tua PWA fornisca un flusso di lavoro sicuro e affidabile.

Servi la tua PWA su HTTPS

HTTPS protegge l'integrità del tuo sito web e protegge la privacy e la sicurezza dei tuoi utenti. Le PWA devono essere servite tramite HTTPS.

Firebase Hosting , per impostazione predefinita, fornisce i contenuti della tua app tramite HTTPS. Puoi pubblicare i tuoi contenuti su un sottodominio Firebase gratuito o sul tuo dominio personalizzato . Il nostro servizio di hosting fornisce automaticamente e gratuitamente un certificato SSL per il tuo dominio personalizzato.

Visita 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 reattivo e immediato 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 solo 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 saperne di più sulle varie opzioni di configurazione offerte da FirebaseUI.

Accedi agli 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 su cui hanno configurato le proprie credenziali di accesso.

Abilita 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 saperne di più sulle varie opzioni di configurazione offerte da FirebaseUI.

Tempo di caricamento veloce

Avere ottime prestazioni migliora l'esperienza dell'utente, aiuta a fidelizzare gli utenti e aumenta la conversione. Ottime prestazioni, come un "tempo per la prima verniciatura significativa " e un " tempo per l'interattività " ridotti, sono un requisito importante per le PWA.

Servi le tue risorse statiche in modo efficiente

Firebase Hosting fornisce i tuoi contenuti su una CDN globale ed è compatibile con HTTP/2. Quando ospiti le tue risorse statiche con Firebase, configuriamo tutto questo per te: non devi fare nulla in più per sfruttare questo servizio.

Memorizza nella cache i tuoi contenuti dinamici

Con Firebase Hosting, la tua app Web può anche servire 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 un 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 ulteriori chiamate al tuo back-end, velocizzare le risposte e ridurre i costi.

Consulta la nostra documentazione per scoprire come servire contenuti dinamici (forniti da Cloud Functions o Cloud Run) e abilitare la memorizzazione nella cache CDN con Firebase Hosting.

Carica i servizi solo quando sono necessari

L'SDK JavaScript di Firebase può essere parzialmente importato per mantenere minime le dimensioni del download iniziale. Approfitta di 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 della tua app, l'app può prima caricare Firebase Authentication . Quindi, 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 l'autenticazione Firebase:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

Quindi, 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 mobili native e dovrebbero funzionare offline quando possibile.

Accedi ai dati della tua app offline

Cloud Firestore supporta la persistenza dei dati offline che consente al livello dati della tua app di funzionare offline in modo trasparente. In combinazione con i Service Worker per memorizzare nella cache le tue risorse statiche , la tua PWA può funzionare completamente offline. Puoi abilitare 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 conserva una cache locale dei dati di accesso, consentendo a un utente che ha effettuato 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 mentre è offline:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Consulta la nostra documentazione per iniziare con 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 alto il coinvolgimento degli utenti. Configura la tua PWA per raggiungere i tuoi utenti in modo proattivo e responsabile.

Mostra notifiche push ai tuoi utenti

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

Automatizza il ricoinvolgimento degli utenti

Utilizzando Cloud Functions for Firebase , invia ai tuoi utenti messaggi di nuovo coinvolgimento in base a 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 quell'utente ottiene 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);
    });