Esercitazione sull'app Web progressiva: crea la tua prima PWA

Creato da Google stesso e attualmente trasferito su piattaforme popolari come Windows 10, PWA può fare molte delle cose che in precedenza erano esclusive delle applicazioni native, incluse funzionalità come notifiche push, interfaccia app coinvolgente, funzionalità offline, installazioni di app... lo chiami .

Ed è per questo che l'emergere della PWA non è più destinata a essere momentanea, poiché ora è un movimento su larga scala che potrebbe cambiare radicalmente il Web come lo conosciamo. Per i nuovi arrivati, non è troppo tardi per conoscere questa tecnologia emergente poiché il processo di creazione di una PWA è ora molto più semplificato di prima, adatto a laici interessati come te.

Per i tuoi migliori scopi di apprendimento, oggi creeremo una PWA completamente funzionale utilizzando React, Node.js e Firebase.

Prerequisiti

• Versione Node.js >= 8.10
• versione npm >= 5.6

Note : la versione npm non dovrebbe essere un problema poiché l'installazione di Node.js viene sempre fornita con l'ultima versione del gestore di pacchetti npm .

1. Crea una SPA con create-react-app

Innanzitutto, abbiamo bisogno di qualcosa di solido su cui lavorare e create-react-app è lo strumento perfetto per questo scopo.

 npx create-react-app my-PWA
cd mio-pwa
inizio npm

I comandi precedenti ti aiuteranno a creare un ambiente di apprendimento basato su React con cui lavorare.

Servilo su HTTPS

HTTPS è il nuovo standard per il web e con l'arrivo di PWA è diventato sempre più mainstream. Normalmente, una PWA deve essere servita su HTTPS poiché gli stessi operatori del servizio non possono lavorare senza di essa; ma poiché stiamo lavorando in un ambiente localhost, non è necessario.

2. Fallo funzionare offline

Per impostazione predefinita, gli operatori del servizio di create-react-app devono essere preconfigurati per gestire la memorizzazione nella cache offline e il caricamento dei contenuti quando l'utente non ha connessione o nelle visite successive.

Un service worker è, in poche parole, uno script JavaScript che viene eseguito su un thread separato dalla pagina e, per questo motivo, non ha accesso alla struttura DOM. Questo nuovo approccio dà origine a funzionalità più progressiste e che migliorano le prestazioni poiché gli operatori del servizio ora non solo gestiscono tutte le funzionalità tipiche di una PWA (capacità offline, notifiche push, ecc.), ma svolgono anche un ruolo importante nell'alleviare i calcoli pesanti del tuo sito web in un thread separato.

Per installare i service worker sulla tua PWA, ti consigliamo di dare un'occhiata a /src/index.js .

In index.js , cerca questa riga

 serviceWorker.unregister()

Cambia unregister() in register() e i tuoi addetti all'assistenza verranno automaticamente registrati quando esegui my-pwa in modalità di produzione . Non è consigliabile abilitare gli operatori del servizio in modalità di sviluppo in quanto può portare a casi in cui la PWA carica solo le risorse memorizzate nella cache e non include le ultime modifiche locali.

Per eseguire my-pwa in modalità produzione:

 npm esegui build
npx serve build 

Dopodiché, apri Chrome e vai su localhost:5000 , ispezionalo e ora vedrai i lavoratori del servizio in esecuzione correttamente nella scheda Applicazione .

E sotto nella categoria Archiviazione cache è dove vorresti verificare se il contenuto offline del tuo sito viene memorizzato correttamente nella cache.

Note : esiste una soluzione alternativa per registrare gli addetti all'assistenza in modalità non di produzione. Ciò si ottiene rimuovendo la riga process.env.NODE_ENV === 'production' da src/serviceWorker.js .

Se vuoi approfondire questo aspetto e creare i tuoi addetti all'assistenza da zero e non fare affidamento sulle configurazioni preconfigurate di React, abbiamo quello che fa per te. In questo tutorial, ti mostriamo come creare una prima app Web progressiva offline da una semplice app Web.

3. Imposta l'aggiunta alla schermata iniziale

Se tutto è stato fatto correttamente finora, dovresti vedere una piccola icona di installazione (+) quando avvii la build di produzione del tuo my-pwa .

Dato che tutto viene fatto automaticamente per te, probabilmente ti starai chiedendo come sia stato reso possibile tutto ciò. Non preoccuparti, ecco perché siamo qui.

Per rendere pronto il tuo PWA A2HS (Aggiungi alla schermata iniziale), abbiamo bisogno di un manifest.json . Il manifest.json fornito con la tua create-react-app è un file JSON molto semplice che determina il modo in cui le icone della tua app appaiono all'utente e ne definisce l'aspetto della schermata iniziale. Per personalizzarli, modifica il file esistente in /public/manifest.json .

 {
  "short_name": "La mia prima PWA",
  "name": "Crea una semplice PWA",
  "icone": [
    {
      "src": "favicon.ico",
      "misure": "64x64 32x32 24x24 16x16",
      "tipo": "immagine/x-icona"
    },
    {
      "src": "logo192.png",
      "tipo": "immagine/png",
      "misure": "192x192"
    },
    {
      "src": "logo512.png",
      "tipo": "immagine/png",
      "misure": "512x512"
    }
  ],
  "start_url": ".",
  "display": "autonomo",
  "theme_color": "#000000",
  "colore_sfondo": "#ffffff"
}

La maggior parte delle cose qui sono praticamente autoesplicative, ma se ti ritrovi a voler approfondire di più manifest.json e gli eventi che portano a un'installazione PWA, abbiamo scritto un pezzo su questo. Non dimenticare di dare un'occhiata.

Note : affinché manifest.json funzioni, dovrai includerlo in index.html . Per impostazione predefinita, create-react-app dovrebbe averlo già fatto per te.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Quando la tua PWA è registrata con gli addetti ai servizi e un manifest.json corretto, verrà attivato un beforeinstallpromt una volta che l'utente avvia l'app, chiedendo l'autorizzazione per installare la tua PWA nella schermata iniziale dell'utente.

Tuttavia, va notato che stiamo solo grattando la superficie del processo A2HS (Aggiungi alla schermata iniziale) e c'è ancora molto altro da imparare. Il modo migliore, secondo noi, per imparare qualsiasi cosa è costruirlo da zero, motivo per cui abbiamo preparato per te una breve guida su questa caratteristica specifica della PWA. La guida ti guiderà attraverso diverse parti importanti negli eventi di installazione di una PWA.

In alternativa, se ti senti pigro e demotivato, siamo qui anche per te. Il nostro generatore di manifesti è fatto per automatizzare l'intero processo per te.

4. Imposta le notifiche push

I browser hanno fatto molta strada nel supporto delle notifiche push. Di recente, Chrome ha persino introdotto i trigger di notifica per abilitare la visualizzazione delle notifiche in modalità aereo. Questo è un enorme passo avanti per le notifiche push.

E a questo punto, ti starai chiedendo dov'è quella parte che utilizza Firebase in questo tutorial. Bene, questo è tutto. In questa parte imparerai il processo di integrazione delle notifiche push in una PWA utilizzando Firebase, in particolare la funzione di messaggistica cloud al suo interno che consente l'invio di messaggi tramite richieste HTTPS.

Ma poiché l'intero processo è un po' lungo e anche per aiutarti a tenere traccia dell'intera faccenda, abbiamo preparato per te il nostro tutorial sull'integrazione delle notifiche push. Con questo tutorial, non dovresti riscontrare problemi quando provi a inviare notifiche push a un token utente oa un gruppo di utenti.

Conclusione

E questo è tutto per una PWA completa. Sentiti libero di farci qualsiasi domanda se ti senti bloccato in qualsiasi parte del tutorial e faremo del nostro meglio per rispondere!

Leggi di più:
Come integrare PWA in Magento 2