Come integrare Aggiungi alla schermata iniziale nella tua PWA

Aggiungi alla schermata Home (abbreviato in A2HS) è fondamentale per l'esperienza delle app Web progressive in quanto consente un'esperienza nativa completa dell'app, che include l'avvio delle app dalla schermata iniziale dell'utente.

 Letture consigliate: PWA vs Native: quale ti si addice meglio?

Essendo una caratteristica così vitale per la tua PWA, sicuramente non puoi non averla integrata, motivo per cui oggi nel tutorial di SimiCart PWA, esamineremo i motivi per cui è necessario A2HS, come viene utilizzato e come creare una PWA Predisposizione per A2HS, sia su dispositivo mobile che desktop.

Browser supportati

A2HS è molto vicino ad essere una funzionalità universale tra i browser. Attualmente è supportato da Mobile Chrome/Android Webview (dalla versione 31 in poi), Opera per Android (dalla versione 32 in poi) e Firefox per Android (dalla versione 58 in poi). Per una visione più dettagliata, controlla il sito web di CanIUse.

PWA Aggiungi alla schermata Home in azione

Quando ci si imbatte in un sito con PWA Aggiungi alla schermata Home abilitata (A2HS-Enabled), un banner che notifica che il sito può essere aggiunto alla schermata Home può essere visualizzato nella parte inferiore dell'interfaccia utente:

Questa è la promozione dell'installazione predefinita fornita dal browser , che si verifica quando vengono soddisfatti determinati criteri di installazione. La notifica stessa verrà mostrata la prima volta che un utente visita il tuo sito web e poi di nuovo dopo circa 90 giorni.

Come rendere la tua app web abilitata per A2HS su dispositivo mobile

Criteri installabili

Affinché la tua app Web sia installabile, deve:

• non essere già installato
• soddisfa un'euristica del coinvolgimento dell'utente (l'utente deve interagire con la pagina per almeno 30 secondi)
• essere servito da una connessione sicura (HTTPS).
• avere un lavoratore di servizio registrato
• avere un file manifest correttamente configurato
• E, soprattutto, il browser in uso deve supportare l'evento beforeinstallprompt . Per un elenco completo dei browser che supportano l'evento beforeinstallprompt , fare riferimento a CanIUse.

Iniziare

A scopo dimostrativo, in questo articolo utilizzeremo il progetto create-react-app come base per creare una PWA installabile. create-react-app è un semplice comando React per creare un'applicazione a pagina singola.

Nota : create-react-app richiede almeno node >= 10.16 e npm >= 5.6

Apri il prompt dei comandi di Node.js e esegui i seguenti comandi:

 npx create-react-app pwa-a2hs
cd pwa-a2hs
inizio filato 

Crea un file manifest

Solitamente situato nella cartella principale di un'app Web, il manifest Web è un file che contiene tutte le informazioni necessarie del sito Web, come il titolo dell'app, i percorsi di icone diverse, il colore di sfondo e così via, in un formato JSON. Un file manifest Web è fondamentale per un'app Web funzionale in quanto consente una presentazione corretta dell'app Web in varie fasi dell'esperienza utente.

Ti consigliamo di utilizzare un generatore di manifesti per generare automaticamente il file, insieme a icone di dimensioni ottimizzate per la tua app.

Usando il generatore di manifest, puoi avere un file manifest.zip con il contenuto in questo modo:

E il tuo manifest.webmanifest dovrebbe assomigliare a questo:

 {
    "theme_color": "#f69435",
    "colore_sfondo": "#f69435",
    "display": "autonomo",
    "scopo": "/",
    "start_url": ".",
    "nome": "PWA-A2HS",
    "short_name": "PWA",
    "description": "Demo PWA per la funzione A2HS",
    "icone": [
        {
            "src": "/icon-192x192.png",
            "misure": "192x192",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-256x256.png",
            "misure": "256x256",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-384x384.png",
            "misure": "384x384",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-512x512.png",
            "misure": "512x512",
            "tipo": "immagine/png"
        }
    ]
}

Ora copia il contenuto dei file manifest generati nella cartella /public/ , elimina il file manifest.json predefinito in questa cartella e vai al passaggio successivo.

Collega l'HTML al manifest

Quando hai finito di configurare il tuo file manifest, salvalo nella directory principale del tuo sito web in modo che possa essere chiamato in seguito con un percorso relativo, ad esempio /manifest.webmanifest . Per completare la configurazione del tuo file manifest, fai riferimento ad esso nell'intestazione HTML ( \pwa-a2hs\public\index.html ), in questo modo:

 <testa>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      nome="descrizione"
      content="Sito Web creato utilizzando create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </testa>

Configura il flusso di installazione

Un manifest dell'app Web non è tutto ciò che è necessario per rendere installabile l'app Web. È necessario eseguire alcune configurazioni aggiuntive per rendere installabile la tua app Web e, quindi, avvicinarla di un passo a una PWA.

Crea un addetto ai servizi

L'operatore del servizio intercetta le tue richieste di rete e abilita varie funzionalità simili a app per le quali PWA è famosa. Crea un file service-worker.js in pwa-a2hs\public e riempilo con il seguente contenuto:

 self.addEventListener('fetch', funzione(evento) {
  event.respondWith(
      caches.match(event.request).then(function(risposta) {
          risposta di ritorno || recupera(evento.richiesta);
      })
  );
});

Qui dovremo ascoltare l'evento di fetch poiché è fondamentale per la tua esperienza di aggiunta alla schermata iniziale, senza di esso la tua app React non sarà in grado di soddisfare i requisiti di installabilità.

Registra i tuoi addetti ai servizi

E affinché il nostro service-worker.js funzioni, dovremo registrarlo inserendo questo codice alla fine del nostro index.html <body> :

 //indice.html
<script>
    if ('serviceWorker' nel navigatore) {
      // Registra un lavoratore del servizio ospitato nella radice di
      // sito che utilizza l'ambito predefinito.
      navigator.serviceWorker.register('/service-worker.js').then(function(registrazione) {
        console.log('Registrazione lavoratore servizio riuscita:', registrazione);
      }, /*cattura*/ funzione(errore) {
        console.log('Registrazione lavoratore servizio non riuscita:', errore);
      });
    } altro {
      console.log('Gli operatori di servizio non sono supportati.');
    }
  </script>

È ora di provarlo!

La tua PWA dovrebbe ora essere installabile. Aggiorna il tuo frontend e dovresti vedere un pulsante di installazione sulla barra delle applicazioni (desktop) o un piccolo banner di notifica (mobile).

Facendo clic su Installa si otterrà un collegamento PWA come questo sul desktop/schermata iniziale:

C'è di più nell'esperienza A2HS

Quanto sopra è solo un'aggiunta di base all'esperienza della schermata iniziale utilizzando la promozione dell'installazione fornita dal browser. Per fare un salto di qualità, puoi anche salvare l'evento beforeinstallprompt per attivare manualmente il flusso di installazione con vari modelli per promuovere l'installazione di PWA.

Con un pulsante di installazione personalizzato, puoi evitare di interrompere il percorso dell'utente rivolgendoti agli utenti specifici che trarranno vantaggio dall'installazione di un'app. E riflettendo su dove e dove posizionare l'interfaccia utente della promozione, è probabile che la tua PWA faccia meglio dei tuoi concorrenti e di conseguenza guadagnerà tassi di conversione delle app molto migliori.