Come costruire un'app progressiva

Il cellulare ora rappresenta oltre la metà del traffico del web e le applicazioni Web consentono agli utenti di fare cose nel browser che rivale le app native, ma c'è un problema: la qualità delle connessioni e dei dispositivi varia in tutto il mondo.

Ristorazione Entrambi gli utenti su collegamenti a fulmini-veloci a Seoul e gli utenti nell'India rurale su un telefono obsoleto, è la più recente sfida di usabilità, e le app progressive sono la soluzione.

PWA Utilizzare Progressive Enhancement Per caricare prima il contenuto più importante, quindi aggiungere extra presentabili e funzionali come richiesto, il che significa che tutti i tuoi utenti ottengono la stessa esperienza di base il più rapidamente possibile. Se vuoi raggiungere il pubblico più ampio possibile, PWas è il modo di andare.

• 10 passaggi per un'esperienza utente coinvolgente

Sebbene le app progressive offrono un sacco di vantaggi e funzionalità sul Web, non richiedono la riscrittura dell'intera applicazione. Qualsiasi app può essere convertita in PWA aggiungendo alcuni strati in più ad esso.

Per ottenere i migliori risultati, vorrai mettere una forte enfasi sulle prestazioni fin dall'inizio - ma è vero per qualsiasi app Web. Qui, attraverseremo i passaggi per rendere progressiva dell'app.

Se vuoi costruire un sito scorrevole, assicurati che il tuo web hosting è un punto e usare un decente Builder del sito web .

01. Servire su https

Siamo onesti: dovresti farlo comunque. SSL aggiunge uno strato extra di sicurezza sul Web, aiutando i tuoi utenti a sentirsi sicuri nell'uso del tuo sito. Con PWAS, HTTPS è essenziale per l'utilizzo dei lavoratori dei servizi e consentendo l'installazione della schermata iniziale. È possibile acquistare un certificato SSL dal proprio registro del dominio a poca spesa e quindi configurarlo tramite il servizio di hosting.

02. Creare un guscio di applicazione

La tua app per app è la prima cosa che carica - la prima cosa che l'utente vede. Dovrebbe esistere interamente nel documento HTML dell'indice, con CSS in linea, per assicurarsi che appaia il più veloce possibile e il tuo utente non sta fissando uno schermo bianco per più del necessario. La guscio di applicazione fa parte del modello di miglioramento progressivo. La tua app deve fornire al contenuto dell'utente il prima possibile, e quindi migliorarlo progressivamente come carichi più dati (probabili JavaScript).

L'esempio seguente viene preso da un'applicazione react.js. L'utente è presentato con un contorno dell'app e un indicatore di caricamento nell'indice.html. Quindi, una volta che il JavaScript carica e reagisce gli stivali, l'applicazione completa viene resa all'interno della shell.

 & lt;! - index.html - & gt;
& lt; corpo e GT;
& lt; div id = "root" & gt;
  & lt; div id = "contenitore" e GT;
  & lt; div class = "interner-container" & gt;
  & lt; div id = "header" & gt;
  & lt; img src = "/ asset / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "caricamento-contenitore" e GT;
  & lt; img src = "/ assets / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / corpo e GT;
// index.js.
Reactdom.Render (
& lt; app / & gt;
Document.getElementbyID ('root')
);

03. Registrare un lavoratore di servizio

Per attingere allo spettro completo di PWA Goodies (notifiche push, memorizzazioni nella cache, installazione di suggerimenti) di cui avrai bisogno di un lavoratore di servizio.

Fortunatamente, sono piuttosto facili da configurare. Di seguito, controlliamo per la prima volta se il browser dell'utente supporta i lavoratori del servizio. Quindi, se è così, possiamo andare avanti con la registrazione del file del servizio di servizio, qui chiamato Service-worker.js. . Si noti che non è necessario nulla di speciale all'interno di quel file a questo punto - può essere vuoto.

Nell'esempio seguente, tuttavia, mostriamo come attingere ai tre eventi del ciclo di vita dei lavoratori del servizio chiave. Queste sono "install", quando l'utente visita prima la tua pagina; 'Attiva', a destra prima del completamento della registrazione; e 'recupera', quando l'applicazione fa una richiesta di rete. L'ultimo è rilevante per la cache e la capacità offline.

& lt; script & gt;
  IF ('Serviceworker' in Navigator) {
  finestra.AddeventListener ('Load', Function () {
  navigator.serviceworker.register ('service-worker.js'). Quindi (funzione (registrazione) {
  // La registrazione ha avuto successo
  console.log ('registrato!');
  }, funzione (err) {
  // registrazione fallita :(
  console.log ('Registrazione dei servizi di servizio fallita:', err);
  }). Cattura (funzione (err) {
  console.log (err);
  }););
  }););
  } altro {
  console.log ('il lavoratore di servizio non è supportato ");
  }
  & lt; / script & gt;
// service-worker.js
self.addeventListener ('install', funzione () {
  console.log ('install!');
}););
self.addeventListener ("Attiva", event = & gt; {
  console.log ('Attiva!');
}););
self.addeventListener ('Fetch', funzione (evento) {
  console.log ('recupera!', event.request);
}); 

04. Aggiungi notifiche push

I lavoratori del servizio consentono ai tuoi utenti di ricevere notifiche push tramite l'API Push Web. Per accedervi, puoi toccare self.registration.pushmanager. Dall'interno del tuo file di servizio di servizio. Dal momento che l'invio di notifiche push si basa fortemente sulla configurazione del back-end, non ti immergeremo qui.

Se stai avviando un'app da zero, il servizio FireBase di Google è dotato di Firebase Cloud Messaging per notifiche push in modo relativamente indolore (ricorda: Assicurati di mantenere i tuoi file di progettazione al sicuro stoccaggio cloud) . Il codice qui sotto mostra come registrarsi per le notifiche push tramite l'API push.

 navigator.serviceworker.ready.then (funzione (registrazione) {
  IF (! REGISTRAZIONE.PUSHMANAGER) {
    Alert ("nessun supporto di notifiche push".);
    restituire false;
  }
  // per iscriverti `push notifica` da push manager
  registrazione.pushmanager.subscribe ({{
  uservisquilingonly: True // Mostra sempre la notifica quando ricevuto
  })
  .then (funzione (sottoscrizione) {
  console.log ('sottoscritto ");
  })
  .CATCH (funzione (errore) {
  console.log ("errore di abbonamento:", errore);
  }););
}) 

05. Aggiungi un manifesto di un'app Web

Al fine di effettuare l'applicazione installabile, è necessario includere un manifest.json. nella directory principale dell'applicazione. Puoi pensare a questo come una descrizione della tua applicazione, simile a ciò che potresti inviare all'App Store. Include icone, uno schermo splash, un nome e una descrizione.

C'è anche qualche configurazione per il modo in cui viene visualizzata l'applicazione quando viene avviata dalla schermata principale dell'utente: vuoi mostrare la barra degli indirizzi nel browser o no? Di che colore vuoi che la barra di stato sia? E così via. Si noti che un corretto manifest.json. dovrebbe includere uno spettro completo di dimensioni di icone per vari dispositivi. Il codice qui sotto è un'anteprima di alcune delle proprietà che il tuo manifest può includere.

 {
  "Short_Name": "Chat",
  "Nome": "Chat",
  "Icone": [
  {
  "SRC": "/ Asset / icon.png",
  "Dimensioni": "192x192",
  "Tipo": "Immagine / PNG"
  }
  ]
  "Start_url": "/? utm_source = homescreen",
  "Background_color": "# E05A47",
  "Tema_color": "# E05A47",
  "Display": "standalone"
} 

06. Configurare il prompt di installazione

Quando un utente visita un PWA con un lavoratore di servizio e un manifesto, Chrome li chiederà automaticamente di installarlo alla loro schermata iniziale, dato quanto segue: L'utente deve visitare il sito due volte, con cinque minuti tra le visite.

L'idea qui è di attendere fino a quando l'utente dimostra interesse nella tua applicazione, quindi chiedi loro di renderlo un apparecchio del loro dispositivo (questo è in netto contrasto con l'approccio dell'app nativo, che richiede quell'investimento in anticipo).

Ma potrebbero esserci casi in cui si desidera mostrare il prompt di installazione in diverse situazioni, come ad esempio dopo che l'utente ha una particolare azione utile. Per farlo, intercettiamo il prima tribunale Evento e salvalo per dopo, quindi distribuire il prompt quando vediamo in forma.

 Finestra.AddeventListenner ('BURINGSTALLPROMPT', E = & GT; {
  console.log ('bestanstallprompt event ha lanciato ");
  e.preventdefault ();
  // scorta l'evento in modo che possa essere attivato in seguito.
  questo.DeferredPrompt = E;
  restituire false;
  }););
// Quando si desidera attivare il prompt:
questo.DeferredPrompt.prompt ();
  This.DeferRedPrompt.UserChaice.then (Choice = & GT; {
  console.log (scelta);
  }););
questo.DeferRedPrompt = Null; 

07. Analizza le prestazioni della tua app

Le prestazioni sono il cuore e l'anima delle pwas. La tua app dovrebbe essere veloce per gli utenti su tutte le condizioni di rete. La cache e la capacità offline aiuta molto, ma alla fine della giornata, la tua applicazione dovrebbe essere rapida anche se l'utente non dispone del browser per supportare la tecnologia dei lavoratori del servizio. Questa è la definizione di miglioramento progressivo - fornire una grande esperienza per tutti, indipendentemente dalla modernità del dispositivo o dalle condizioni di rete.

Per farlo, un utile set di metriche è il sistema ferroviario. La ferrovia è ciò che Google chiama un "modello di prestazioni centrico dell'utente" - una serie di linee guida per misurare le prestazioni della nostra app.

L'acronimo rappresenta la risposta (quanto tempo impiega per la tua app per rispondere alle azioni dell'utente), animazione (mantenere la velocità di animazione a 60 fps), inattivo (usando il tempo in cui la tua app non sta facendo nient'altro per caricare e cache aggiuntive Asset aggiuntivi) e Carica (caricando la tua app in un secondo o meno).

Ecco una tabella di benchmark significativi per il caricamento delle applicazioni, come fornito da Meggin Kearney, scrittore tech a Google Web Fondamentali .

08. Audit La tua app con il faro

Google è il più grande campione che spinge le app progressive come il futuro del web. Come tale, ha fornito uno strumento utile per guidare il tuo sviluppo PWA.

Precedentemente chiamato faro e fornito come estensione cromata, come di Chrome 60 è una parte dei DevTools Chrome, sotto la scheda "Audit". Quale faro è gestito la tua domanda in condizioni diverse e misurare la sua risposta e il successo secondo le linee guida PWA. Quindi ti dà un punteggio su 100. Può anche segnare la tua app sulle migliori pratiche web allo stesso tempo.

Il seguente testo è un elenco del faro dei valori misurato. In uso mostra anche le descrizioni.

• Registri un lavoratore di servizio
• Risponde con un 200 quando offline
• Contiene alcuni contenuti quando JavaScript non è disponibile
• Usa https.
• Reindirizza il traffico HTTP a HTTPS
• Il carico della pagina è abbastanza veloce su 3G
• L'utente può essere richiesto di installare l'app Web
• Configurato per una schermata di spruzzata personalizzata
• Address Bar corrisponde a colori del marchio
• Ha un & lt; meta Name = "Viewport" e GT; tag con larghezza o scala iniziale.
• Il contenuto è dimensionato correttamente per la vista

Questo articolo è stato originariamente apparso nel web designer; Iscriviti qui .

Articoli Correlati:

• PWAS: Benvenuto nella rivoluzione mobile
• Come usare l'animazione nelle app mobili
• 9 incredibili segreti PWA