Come creare un PWA con Create-React-App e addetti ai servizi personalizzati

Nota: questo non è un primer su create -eagire-app o su cosa sia un lavoratore dell'assistenza. Questo post presuppone una conoscenza preliminare di entrambi.

Quindi, di recente ho avuto l'opportunità di lavorare su un progetto React che prevedeva la pubblicazione dell'applicazione web risultante come Progressive Web Application (PWA).

Mi sono reso conto che è difficile ottenere un PWA con percorsi personalizzati configurati all'interno di una build di Crea React App (CRA). Spero che questo aiuti qualcuno bloccato in una posizione simile.

PWAs in Create-React-App

Come facciamo esattamente a far funzionare un PWA all'interno della nostra shell CRA?

Ora, la shell CRA raggruppa un lavoratore di servizio per impostazione predefinita. Dovresti aver notato che in una shell CRA di base, all'interno del file index.js, c'è una chiamata a registerServiceWorker:

È possibile creare una nuova app CRA e guardare all'interno del file registerServiceWorker.

Sembra piuttosto complesso, ma in realtà sta solo verificando se le variabili di ambiente sono impostate per una build di produzione e se un ServiceWorker è supportato nel browser corrente.

Se esegui una build con il comando thread build, puoi aprire la cartella build e controllare all'interno per vedere che è stato generato un file service-worker.js. Questo è il file di servizio predefinito che CRA genera per te.

La formattazione del file è inline ES5 JavaScript, il che rende un po 'difficile da leggere. Ma puoi scaricarlo in qualsiasi prettifier e dovresti vedere un file più leggibile.

Esaminare il file sopra dovrebbe mostrare che sta semplicemente creando una cache statica con il seguente nome cache: sw-precache-v3-sw-precache-webpack-plugin - + (selg.registration? Self.registration.scope). Quindi memorizza nella cache tutti i file statici come index.html e i file js e css all'interno di quella cache.

Dovresti anche vedere un listener di eventi di recupero che rileva un evento di recupero e verifica se l'app sta richiedendo una delle risorse statiche memorizzate nella cache.

Ora arriva la domanda da un milione di dollari: cosa succede se si desidera configurare una cache dinamica per un percorso specifico? In sostanza, una cache che si aggiornerà con i dati inviati dal server quando l'utente visita un percorso specificato. Si noti che ciò significa che i dati non saranno disponibili al momento della compilazione e pertanto non possono essere memorizzati nella cache dal lavoratore del servizio predefinito generato.

Limitazioni dei PWA predefiniti in CRA

Sfortunatamente, non è molto facile realizzare quanto sopra quando si utilizza CRA. A meno che tu non sia disposto a espellere, ovviamente.

Dai un'occhiata a questi problemi di GitHub per capire perché il team di CRA non supporta la personalizzazione del lavoratore dell'assistenza predefinito.

Quindi, dato che sembra che non riusciamo a personalizzare il lavoratore di servizio predefinito, come possiamo aggirare il problema?

Comprendere come CRA genera un lavoratore di servizio

Il primo passo per trovare un modo per aggirare il sistema di compilazione è effettivamente capire come funziona il sistema di compilazione.

Quindi, iniziamo con la libreria utilizzata dal sistema di generazione per generare un file di servizio.

sw-precache è una libreria che consente di generare un file di servizio di assistenza basato su un modello. Il file modello è scritto usando il motore di template di underscore.

Ecco il link al file modello nel codice sorgente sw-precache.

Ancora una volta, il file del modello sembra complesso, ma è abbastanza semplice una volta che riesci a orientarti nel linguaggio del modello.

Quindi, ciò che accade quando si esegue un processo di generazione in una shell CRA, in relazione alla generazione di un lavoratore del servizio, è:

  1. La libreria sw-precache viene eseguita internamente
  2. Viene fornito un oggetto opzioni per sw-precache per consentire la generazione del file di lavoro del servizio dal modello
  3. Il file worker di servizio viene generato nella cartella build con il nome service-worker.js

Sostituzione del lavoratore di servizio predefinito

Ora, come sovrascrivere il processo sopra descritto per consentire la generazione del nostro file di lavoro del servizio personalizzato?

La risposta si basa sulla risposta stackoverflow di Jeff Posnick (un manutentore di sw-precache).

Innanzitutto, è necessario eseguire l'interfaccia della riga di comando precache dopo il normale processo di generazione.

Installare la libreria sw-precache eseguendo il comando seguente: npm install --save-dev sw-precache

Ora, la libreria sw-precache viene eseguita su un file di configurazione, che viene fornito tramite un'opzione sulla CLI. Questo è il comando: sw-precache --config = sw-precache-config.js, dove sw-precache-config.js è il nome del file di configurazione.

Ecco un file di configurazione di esempio.

module.exports = {
  staticFileGlobs: [
    'Build / static / css / **. Css',
    'Build / / static js / **. Js'
  ],
  swFilePath: './build/service-worker.js',
  templateFilePath: './service-worker.tmpl',
  stripPrefix: 'build /',
  handleFetch: false,
  runtimeCaching: [{
    urlPattern: /this\\.is\\.a\\.regex/,
    gestore: 'networkFirst'
  }]
}

Nota: è importante specificare swFilePath come ./build/service-worker.js In questo modo il lavoratore del servizio generato a seguito del processo di creazione personalizzato sovrascrive quello creato da CRA (entrambi condividono lo stesso nome, in questo caso). Altrimenti, finirai con due file di service worker nella tua directory di build!

Esiste un'ampia documentazione sulle proprietà degli oggetti e quali valori validi possono essere assegnati a loro nella pagina GitHub per sw-precache.

Di particolare interesse è l'opzione runtimeCaching, poiché si tratta di una soluzione molto estensibile che consente di definire regole personalizzate per il personale dell'assistenza per rispondere al contenuto dinamico.

TemplateFilePath è un'opzione per quando si desidera che l'interfaccia della riga di comando raccolga il file modello del lavoratore del servizio personalizzato. Ma utilizzerai quasi sempre il file modello fornito dalla libreria stessa.

Infine, dobbiamo fornire lo script per segnalare al sistema di build CRA che vogliamo che venga generato il nostro addetto al servizio personalizzato. Vai avanti e installa la libreria sw-precache.

Successivamente, aggiorna lo script di build package.json, con il seguente:

build: reazioni-script build && sw-precache --config = sw-precache-config.js

Una volta eseguito il processo di compilazione con npm run build, è possibile aprire la cartella di generazione e visualizzare il lavoratore del servizio generato.

Esegui il processo di generazione con e senza il lavoratore del servizio personalizzato e nota le differenze tra i due.

Conclusione

Mentre questo può sembrare un approccio molto dettagliato a qualcosa di semplice come la personalizzazione di un operatore del servizio, questo approccio ha il vantaggio di tenerti saldamente all'interno della shell di create-reagire-app.

Esistono altri approcci per generare un lavoratore del servizio personalizzato (utilizzando una combinazione di reattivo-app-rewire e workbox). Cercherò di ottenere questo approccio anche in un post.