Le app native sono condannate

2014–09 Vulture - Dick Knight (CC BY-NC-ND 2.0)

Da ora in poi, non costruirò più app native. Tutte le mie app in futuro saranno app Web progressive. Le app Web progressive sono applicazioni Web progettate per funzionare in modo ancora più fluido sui dispositivi mobili rispetto alle app mobili native.

Cosa intendo per "più agevolmente?" Intendo che la maggior parte del traffico web proviene da dispositivi mobili e che gli utenti installano tra 0 e 3 nuove app al mese, in media. Ciò significa che le persone non trascorrono molto tempo alla ricerca di nuove app da provare nell'app store, ma trascorrono molto tempo sul Web, dove potrebbero scoprire e utilizzare la tua app.

Le applicazioni web progressive iniziano esattamente come qualsiasi altra app Web, ma quando un utente ritorna all'app e dimostra attraverso l'utilizzo che è interessato a utilizzare l'app più regolarmente, i browser inviteranno l'utente a installare l'app nelle loro schermate home. Le PWA possono anche beneficiare di notifiche push, come le app native.

Questo è dove diventa interessante. Proprio come qualsiasi app nativa, l'app web progressiva avrà una propria icona della schermata iniziale e quando fai clic su di essa, l'app verrà avviata senza il browser Chrome. Ciò significa che nessuna barra degli URL e nessuna interfaccia utente di navigazione web. Solo la solita barra di stato del telefono e la tua app in tutto il suo splendore quasi a schermo intero.

È passato molto tempo. Nessuna tecnologia è particolarmente nuova, con la notevole eccezione del emergente standard multipiattaforma.

Un po 'di storia

All'inizio dell'iPhone, non esisteva un app store. Steve Jobs voleva che gli sviluppatori costruissero app per iPhone usando tecnologie web standard.

A volte i visionari sono perfetti, ma sono 10 anni in anticipo sui tempi. Guardando indietro di 2 anni fa, la raccomandazione di Steve Jobs di creare app Web per iPhone è stata definita il suo "più grande errore" da Forbes, perché le app native sono diventate un successo strepitoso.

Guardando indietro oggi, sembra ovvio che fosse davvero interessato a qualcosa - solo molto più avanti delle capacità degli attuali standard web del giorno.

Un decennio più tardi, gli standard Web per dispositivi mobili ora supportano molte delle funzionalità che gli sviluppatori cercavano con le app native e la visione originale di Steve Jobs per le applicazioni Web mobili è ora perseguita seriamente dal resto del mondo. Apple ha supportato le app Web "compatibili con Apple Mobile" che è possibile aggiungere alla schermata principale quasi dall'inizio utilizzando meta tag che aiutano i dispositivi iOS a trovare elementi come icone adatte.

Altri venditori hanno seguito l'esempio, ognuno dei quali ha creato la propria raccolta di metatag per dichiarare le funzionalità delle app Web mobili, ma recentemente è stata introdotta una specifica multipiattaforma e ora le app Web mobili multipiattaforma stanno finalmente diventando una cosa reale.

Le app che implementano lo standard sono chiamate applicazioni web progressive, da non confondere con termini confusivamente simili come miglioramento progressivo o app reattive.

Cosa sono le app Web progressive?

Le app Web progressive sono solo applicazioni Web progettate per essere mobili. Se il browser rileva che l'utente desidera continuare a utilizzare l'app, potrebbe richiedere all'utente di installarlo nella schermata principale, nel dock, ecc. Per poter essere idonei, deve soddisfare un criterio specifico:

  • Deve essere HTTPS (vedi crittografiamo)
  • Manifest valido con le proprietà richieste (Web Manifest Validator)
  • Deve avere un addetto all'assistenza
  • Manifest start_url deve sempre essere caricato, anche offline (utilizzando il service man)
  • Deve fornire la propria navigazione
  • Dovrebbe rispondere alle diverse dimensioni e orientamenti dello schermo

Naturalmente, l'utilizzo di HTTPS e di un addetto all'assistenza per utenti offline è solo una buona pratica per qualsiasi app moderna.

Ciò che molti sviluppatori di app sembrano dimenticare è che se si crea un'applicazione web progressiva, è necessario essere in grado di navigare nell'applicazione senza i comandi di navigazione del browser Chrome. I dispositivi mobili presuppongono che tu abbia integrato la tua navigazione nell'app.

Ad esempio, se si dispone di una pagina di informazioni, tale pagina deve contenere un collegamento all'interfaccia utente dell'app o gli utenti dovranno chiudere e riaprire l'app per tornare all'interfaccia utente dell'app principale.

Procedura progressiva per le app Web

Ci sono molte informazioni sulla costruzione di applicazioni web progressive diffuse in tutto il Web, ma molte di queste sono obsolete e molte contengono solo una parte di ciò che devi sapere per crearne una. Risolviamolo.

Abilita HTTPS

Per abilitare HTTPS, avrai bisogno di:

  • Un web server (consiglio DigitalOcean)
  • Un certificato SSL
  • Un forte gruppo Diffie-Hellman (sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048)
  • Configurazione TLS / SSL per il tuo server Web (istruzioni per Nginx su Ubuntu)

The Manifest

Il file manifest si chiama manifest.json ed è piuttosto semplice. Consiste nel nome (nome breve per l'icona della schermata principale e un nome opzionale per un nome più completo), un URL iniziale e un ampio elenco di icone in modo da poter supportare la vasta gamma di dimensioni di icone diverse necessarie per varie piattaforme. Per Android + iOS, avrai bisogno di:

  • 36x36
  • 48x48
  • 60x60 (icona Apple touch iPhone)
  • 72x72
  • 76x76 (Apple touch icon iPad)
  • 96x96
  • 120x120 (icona touch Apple iPhone retina)
  • 152x152 (icona touch Apple iPad retina)
  • 180x180 (icona Apple touch per iOS 8+)
  • 192x192
  • 512x512

Ho individuato le icone touch di Apple perché hanno i nomi noti:

apple-touch-icon-180x180.png

Dove 180x180 può essere sostituito da qualunque sia la risoluzione specifica. Non è necessario utilizzare i nomi noti, ma se si dimentica di includere i tag, iOS può comunque trovare le icone cercandole nella directory principale dell'app Web se si utilizzano i nomi noti.

Le icone iOS non supportano la trasparenza.

Esempio manifest.json:

Ci sono alcune funzionalità che dovresti conoscere. Theme_color imposta il colore della barra di stato e della barra dell'intestazione della finestra utilizzata quando si passa da un'app all'altra su Android.

Background_color imposta il colore utilizzato nella schermata iniziale. Su Android, una schermata iniziale sarà composta dalla proprietà name (il nome lungo) e una grande icona in cima a background_color.

Manifest non è ovunque

La prima volta che ho creato un'applicazione web progressiva, ero entusiasta che funzionasse come previsto su Chrome per Android, ma quando l'ho guardato in Safari / iOS, non sembrava funzionare. Il motivo è che Safari mobile, nonostante il supporto di queste funzionalità utilizzando tag personalizzati per circa un decennio, non supporta ancora le specifiche manifest web.

Quindi, oltre al file manifest per i browser supportati, avrai bisogno anche di speciali metatag per iOS, a partire da questo, che avvierà l'app senza il browser Chrome:

Ci sono molti tag da ricordare, tuttavia, e potrebbe esserci un altro modo per farlo. Esiste un polyfill web manifest che leggerà il tuo file manifest.json e aggiungerà i tag specifici del fornitore per i browser mobili più vecchi, iOS e persino Windows Phone e Firefox OS.

Addetto all'assistenza

Service Worker è una specifica della piattaforma Web recente che consente di memorizzare nella cache le risorse localmente per assicurarsi che l'app funzioni ancora, anche se l'utente non è connesso a Internet.

Funziona dirottando le richieste di rete e fornendo risposte da una cache locale quando l'utente è offline. C'è molto di più, però. È un'API di basso livello abbastanza sofisticata, che ti consente di fare molto per ottimizzare l'esperienza dell'utente sia online che offline.

Per iniziare, consiglierò un'astrazione di livello superiore molto semplice. Un piccolo script chiamato UpUp. L'uso di UpUp è davvero semplice. Ecco un esempio dai documenti di UpUp:

L'URL del contenuto è l'URL da caricare quando l'utente è offline. Per questo uso l'URL di root dell'app e funziona perfettamente.

Le risorse sono file che devono essere memorizzati nella cache locale affinché l'app funzioni correttamente. Ricordati di assicurarti che siano incluse tutte le tue immagini, icone, CSS e persino le risposte alle richieste AJAX predefinite. Come puoi vedere, qualsiasi tipo di file dovrebbe funzionare.

Alla fine, potresti desiderare un maggiore controllo sulla memorizzazione nella cache delle risorse offline di quella fornita da UpUp. Quando arriva quel giorno, ecco alcune fantastiche risorse educative per iniziare:

  • Corso gratuito di Google Udacity
  • Ricettario di assistenza per una copertura approfondita.

analisi

Debug del dispositivo fisico con Chrome inspect

Collega il dispositivo a un cavo USB. Attiva il debug USB sul tuo dispositivo Android. Consulta le istruzioni per il debug remoto. Potrebbe essere necessario visitare Google per capire come impostare il telefono Android in modalità sviluppatore per abilitare il debug remoto.

Una volta attivata la modalità sviluppatore, è possibile che vengano visualizzate le opzioni sviluppatore nella modalità impostazioni. Aprilo e assicurati che il debug USB sia attivato.

Visita chrome: // inspect # devices. Premi il pulsante Ispeziona e otterrai gli strumenti di sviluppo completi per la tua app.

Verifica il tuo addetto all'assistenza

Visita chrome: // inspect / # service-worker per verificare che il tuo tecnico dell'assistenza funzioni correttamente.

Verifica l'installazione sulla homepage

Se vuoi saltare i controlli del coinvolgimento degli utenti e ottenere sempre l'opzione di installazione nella home page, attiva "Ignora i controlli del coinvolgimento degli utenti" nei flag di Chrome:

chrome: // flags /

Per eseguire il test sul desktop, è necessario capovolgere "Abilita aggiungi allo scaffale".

Le app native non sono ancora morte

Le app Web progressive ora hanno la maggior parte delle funzionalità delle app native, la frizione dell'installazione promette di essere inferiore rispetto alle app native, non dovrai più preoccuparti dei gatekeeper dei negozi di app e non dovrai pagare alcuna imposta del 30% sulle vendite di app per il privilegio di essere in un app store.

Ma le app native hanno ancora alcune funzionalità che le app Web mobili non avranno per un periodo potenzialmente lungo.

In particolare, la maggior parte delle specifiche di integrazione dell'hardware e dei sensori ha un supporto limitato o assente nella maggior parte dei browser e anche le funzionalità di base come l'API di orientamento del dispositivo hanno subito modifiche sostanziali, con più versioni delle specifiche attive in vari browser, che richiedono logica complicata o riempimenti poligonali da usare in sicurezza.

Ironia della sorte, anche se Apple ha aperto la strada a molte delle tecnologie di applicazione web progressiva, iOS sembra essere l'unico grande ostacolo all'adozione progressiva di app Web. Al momento non supportano i lavoratori dell'assistenza, ma sono in fase di sviluppo.

Per fortuna, c'è un plug-in Cordova che aggiunge il supporto del personale di servizio alle app ibride su iOS.

Detto questo, non mi fido di tutti i fornitori di browser web per implementare le istruzioni di installazione in un modo particolarmente intuitivo. Usando le specifiche oggi, agli utenti potrebbe essere richiesto o meno di installare la tua app e se vanno a cercarla nell'app store, non la troveranno a meno che tu non pubblichi anche un'app ibrida attraverso il tradizionale processo di app store.

A breve termine, potremmo essere bloccati usando Cordova o qualcosa del genere per colmare le lacune sui dispositivi iOS, ma un buon supporto per le specifiche si sta rapidamente diffondendo sui dispositivi Android. Se hai un telefono Android recente con Chrome, ci sono buone probabilità che la tua app funzioni senza ricorrere a una build Cordova.

Se ritieni che la mancanza del supporto Apple dovrebbe trattenerti, ricorda che Android è ora l'86% del mercato globale del sistema operativo mobile. Potrebbe valere la pena di costruire un PWA anche se è necessario eseguire il polyfill di iOS con Cordova per sfruttare l'attrito di installazione inferiore per l'86% del mondo.

Conclusione

A breve termine, potresti comunque voler produrre un'app ibrida in grado di sfruttare alcune API del dispositivo che non sono ancora disponibili utilizzando gli standard web.

Dopo aver creato la mia prima applicazione web progressiva, spero per il futuro, ma sono anche consapevole che non è perfetto. Far funzionare tutto senza problemi su tutte le piattaforme dei dispositivi richiede un po 'di tempo. Devi anche ricordare che ti perderai le funzionalità di rilevabilità e le procedure di installazione ben note che gli utenti conoscono negli app store.

Si spera che i venditori di browser raggiungano la visione e alla fine ci sarà un'esperienza di installazione molto migliore per le applicazioni web progressive rispetto a quelle native. Sembra che le cose stiano andando così.

Certamente, le app native sopravviveranno ancora per un po ', ma se sei impegnato ad imparare Swift o Java per poter costruire app native, potresti prendere in considerazione l'idea di imparare JavaScript.

Vuoi provare alcune app web progressive? Dai un'occhiata a pwa.rocks.

Modifica: The Web Platform Rocks

Se stai per saltare nei commenti per dirmi come è impossibile creare un'app seria con la piattaforma web:

Questo è il 2016, non il 2004. La piattaforma web ha fatto molta strada. Leggi “10 Must See Web Apps and Games” per vedere cosa hanno costruito gli altri per la piattaforma web.

Non sei ancora convinto? Leggi "Perché le app native sono davvero condannate: le app native sono condannate pt 2".

Questo articolo è stato modificato per aggiornare lo stato di iOS per gli operatori del servizio. Originariamente diceva che Apple aveva accennato all'intenzione di implementare. Lo stato è cambiato in "In sviluppo".

Vuoi creare applicazioni JavaScript universali multipiattaforma?

Scopri JavaScript con Eric Elliott

Eric Elliott è l'autore di "Programmazione di applicazioni JavaScript" (O’Reilly) e "Impara JavaScript con Eric Elliott". Ha contribuito alle esperienze software per Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC e i migliori artisti della registrazione tra cui Usher, Frank Ocean, Metallica e molti altri.

Trascorre la maggior parte del tempo nella Bay Area di San Francisco con la donna più bella del mondo.