Contenuto
- L'ascesa delle PWA
- PWA in azione oggi
- Installazione
- Lancio offline e immediato
- Esperienza di prima classe
- Negozi di app
- Integrazione della piattaforma
- Sfide di design e UX
- L'anno delle PWA
Proprio come il responsive web design ha colmato il divario tra i siti desktop e mobile alcuni anni fa, le tecniche di app web progressive stanno attualmente colmando il divario tra il web e il mondo delle app. Con la rapida convergenza delle esperienze degli utenti dalle app desktop alle app mobili, sembra che si stia evolvendo un Internet molto più elegante ed efficiente, anche se inevitabilmente non senza alcune modifiche significative al suo codice genetico sottostante.
- Come costruire un'app Web progressiva
Evidentemente ci sono alcune pressioni selettive significative che lo guidano. Prima di tutto, creare app native per ogni nicchia non è necessariamente un uso efficiente delle risorse: gli utenti finiscono con centinaia di grandi app che sprecano larghezza di banda e prezioso spazio su disco e le aziende spendono una grande quantità di denaro per creare app solo per essere abbandonate dopo le loro prime versioni. E la maggior parte di queste app sono guidate solo dai contenuti web: informazioni provenienti dai servizi web o da un sistema di gestione dei contenuti.
La definizione di un'app web progressiva non è concreta. Una PWA è solo un'app Web che utilizza diverse nuove API e abilità nella piattaforma Web utilizzando il miglioramento progressivo per offrire un'esperienza simile a un'app su ogni piattaforma con la stessa base di codice. È più un insieme di best practice e utilizzo dell'API che crea un'esperienza eccellente simile a un'app per i tuoi utenti, quindi non è che tu abbia o meno una PWA; è più come se il tuo sito fosse più o meno PWA.
Stai per iniziare a costruire un nuovo sito? Prova a utilizzare un costruttore di siti web. E assicurati di ottenere il supporto di cui hai bisogno anche da un servizio di web hosting decente. O per qualcosa di leggermente diverso, consulta la nostra guida al miglior cloud storage.
L'ascesa delle PWA
Sebbene il nome PWA sia stato coniato nel 2015 nell'articolo Escaping Tabs Without Losing our Soul di Alex Russell che lavorava in Google per il team di Chrome, il loro viaggio in realtà non è iniziato lì. Avevamo le applicazioni HTML (HTA), create da Microsoft nel 1999, insieme a molte altre piattaforme di app Web di Nokia, BlackBerry e altre società. Poi, nel 2007, Steve Jobs ha presentato quello che all'epoca era l'unico modo per creare app per l'iPhone originale: PWA, anche se con un nome diverso. Chrome è partito da lì, ha migliorato le API pochi anni dopo e ha inventato il nome PWA.
Con così tante precedenti esperienze fallite nel tentativo di portare i contenuti web nel mondo delle app, perché pensiamo che funzionerà ora? Beh, in primo luogo, dipende dalle aziende che ora stanno lavorando e promuovendo le tecnologie alla base delle PWA, come Microsoft, Google, Apple e Mozilla, solo per citarne alcune. Inoltre, le prestazioni della piattaforma web hanno raggiunto un punto in cui non vi è alcuna differenza percepita quando si confronta una PWA ben progettata con un'app nativa. Queste condizioni non sono mai esistite prima e questo è uno dei motivi per cui la comunità web ha deciso che è giunto il momento per le PWA.
PWA in azione oggi
Oggi le PWA sono completamente funzionali e installabili su:
- Android con la maggior parte dei browser, con Chrome che offre la migliore esperienza
- iOS con Safari
- Chromebook
- Windows 10 da Microsoft Store
- Feature phone con KaiOS, un fork di Firefox OS, attualmente disponibile per milioni di utenti principalmente in India
Il supporto arriverà anche a macOS, Windows e Linux tramite Chrome entro la fine dell'anno. Oggi è disponibile come flag sperimentale "Desktop PWA" se vuoi provarlo ora. Anche l'installazione su Windows su Edge senza l'utilizzo dello store verrà eseguita in un secondo momento, sebbene non sia stato definito alcun intervallo di tempo specifico.
Se rileggi l'elenco, puoi vedere che ogni piattaforma ha o sta per avere il supporto per PWA completamente installabili nei mesi successivi. E poiché una PWA è solo un sito Web con funzionalità in alto che verranno attivate solo su browser compatibili, possiamo persino dire che è compatibile con tutti i browser dalle sue funzionalità di base.
Inoltre, le PWA vengono attualmente generate dalla maggior parte delle CLI per diversi framework, tra cui Angular 6+ CLI, React Create App, PWA Starter Kit di Polymer e Preact CLI. Infine, il team di Ionic Framework ha avuto l'idea di Capacitor, un sostituto di Cordova open source che rende possibili PWA nativi su ogni app store.
Installazione
Uno degli aspetti critici di una PWA è l'installazione dell'app. Questo processo viene eseguito in due passaggi facoltativi: il download e l'archiviazione offline dei file dell'app e l'installazione dell'icona nel sistema operativo. Poiché entrambi i passaggi sono facoltativi, puoi offrire un'esperienza offline nel browser oppure puoi offrire un'icona senza installazione offline. Ma un vero PWA dovrebbe includere entrambi: deve essere servito con TLS sotto HTTPS e l'utente deciderà se lo utilizzerà nel browser o all'interno della propria icona installata.
Lancio offline e immediato
Il cervello di una PWA è il service worker, un file JavaScript installato sul dispositivo dell'utente che è responsabile del download dei file dell'app, archiviandoli in una cache e successivamente servendoli quando necessario. Una volta installato, il service worker funge da proxy di rete per ogni risorsa di cui l'app web ha bisogno: può decidere di recuperarla dalla rete o di consegnarla dalla cache locale, il che rende l'app disponibile offline e disponibile anche in soli un paio di millisecondi anche se l'utente ha una connessione, emulando il lancio di un'app nativa.
Per installare un service worker, il tuo documento HTML dovrà includere qualcosa come:
if (’serviceWorker’ nel navigatore) navigator.serviceWorker.register ("sw.js");
Ciò installerà il file "sw.js" sui dispositivi degli utenti per la cartella corrente nel dominio corrente, un concetto noto come ambito. Dopo l'installazione, le visite successive a qualsiasi URL nel suo ambito verranno gestite da quel service worker.
Supponiamo di avere una PWA con quattro file: index.html, app.js, app.css e logo.png. La prima cosa è installare quei file nella cache nel file sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; se stesso. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Quindi, affinché la PWA venga sempre servita dalla cache, è necessario ascoltare l'evento fetch all'interno del service worker e decidere la politica della cache da utilizzare, ad esempio la cache prima con il seguente frammento.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
In questo caso, ogni volta che l'utente accede alla PWA (sia da un browser che da un'icona installata), il motore otterrà i file dalla cache. Un vantaggio delle PWA rispetto alle app native è che i dispositivi non devono scaricare nuovamente tutti i file in caso di modifica, ma solo il file che è stato modificato con un processo trasparente. Inoltre, possiamo ancora scaricare parti dell'app su richiesta.
Ma la sfida è come fai a sapere quali file sono stati aggiornati sul server in modo da poterli sostituire nella cache? Se non vuoi scrivere un service worker di basso livello per gestirlo, puoi utilizzare la libreria open source Workbox, che ti aiuterà con la generazione del service worker e il manifest delle risorse per aggiornare il pacchetto installato.
Tieni presente che i file della tua PWA verranno eliminati se è presente una pressione di archiviazione sul dispositivo, a meno che tu non richieda Archiviazione persistente se disponibile:
if ("storage" nel navigatore && "persist" in navigator.storage) navigator.storage.persist ();
Su Chrome e sulla maggior parte dei browser Android, la tua app non è in grado di utilizzare più del cinque per cento dello spazio disponibile; su iOS sono solo 50 MiB (circa 50 MB) per host; in Edge è variabile in base alla dimensione totale della memoria e in Windows Store è illimitata.
Esperienza di prima classe
Abbiamo il cervello e ora è il momento del cuore: l'app Web manifest. Lo scopo di trasformare un sito Web in una PWA non è solo quello di garantire che sia disponibile rapidamente o offline, ma anche di consentirgli di avere la propria icona nel sistema operativo e offrire un'esperienza completamente autonoma come qualsiasi altra app installata.
Il manifest è un file JSON che definisce i metadati per la PWA utilizzata da un browser o da un app store al fine di definire il comportamento di installazione.
Il file definisce diverse proprietà come metadati per la tua PWA. Ogni sistema operativo leggerà queste proprietà e farà del suo meglio per abbinare l'esperienza che preferisci. Ad esempio, Android leggerà "display: standalone" e creerà una normale esperienza di app. Con "display: minimal-ui" creerà un'esperienza con un URL visibile e un certificato TLS, utile per le app sensibili alla sicurezza. Con "display: fullscreen" crea app completamente coinvolgenti senza barra di stato o pulsante Indietro visibile. Un insieme di icone e colori definisce l'aspetto delle schermate iniziali o delle barre del titolo per la finestra della tua app.
Esistono alcuni generatori di manifest, come Web App Manifest Generator o PWA Builder che ridimensionerà anche l'icona per te in diverse risoluzioni se ne fornisci una ad alta risoluzione (minimo 512 pixel).
Quando hai il file manifest collegato nel tuo documento HTML, gli utenti saranno in grado di installare l'app utilizzando tecniche diverse a seconda del browser, in genere chiamate Aggiungi alla schermata principale, Installa o semplicemente Aggiungi. Se la tua PWA può essere sottoposta a scansione da Bing, Microsoft la aggiungerà automaticamente a Microsoft Store in modo che gli utenti di Windows 10 possano installarla da lì.
Su alcuni sistemi operativi, la tua PWA avrà la capacità di acquisire collegamenti. Ciò significa che dopo che l'utente ha installato l'app, qualsiasi URL all'interno dell'ambito del manifest verrà aperto entro i limiti della tua app e non nel browser, indipendentemente dal fatto che appaia nel browser o in altre app come WhatsApp, Facebook o un'e-mail.
Se si superano i requisiti PWA che stiamo definendo qui, alcune piattaforme offriranno un badge ambientale (una piccola icona di solito nella barra degli URL che specifica che il Web è installabile) o un banner dell'app Web. Se preferisci, puoi anche aggiungere il tuo pulsante di installazione personalizzato utilizzando il seguente frammento:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // mostrerà il prompt nativo dell'installazione})
Se la PWA è installata, l'evento "appinstalled" verrà attivato sull'oggetto finestra in modo da poter monitorare le statistiche in ascolto.
Negozi di app
Uno dei principali vantaggi dell'installazione da un browser è la possibilità di evitare il processo di approvazione dell'app store o di dover pagare per essere un editore. Ciò comporta evidenti vantaggi, come la pubblicazione istantanea, la creazione di app private per aziende o app che non dovrebbero essere accettate negli store.
Ma alcune aziende vogliono essere nel negozio. Ad oggi, gli unici negozi che accettano ufficialmente PWA sono Windows Store e kaiOS Store. Fortunatamente, con strumenti come Capacitor (attualmente in Alpha) o PWA Builder, possiamo creare e firmare pacchetti nativi anche per altre piattaforme.
Ci sono alcune PWA già pubblicate nel Google Play Store, come Twitter Lite e Google Maps Go, attualmente in fase di implementazione personalizzata. Chrome offrirà una soluzione da Chrome 68 tramite attività web affidabili. Da quel momento, saremo in grado di creare un pacchetto Android (APK) con un launcher per la nostra PWA e caricarlo nello store. Per il Microsoft Store su Windows 10, il sito PWA Builder sta attualmente aiutando con la generazione di un pacchetto Windows 10 di APPX. Utilizzando una visualizzazione web, potresti essere in grado di creare manualmente un'app iOS per l'App Store, ma fai molta attenzione alle regole del negozio.
Integrazione della piattaforma
Implementando tecniche di miglioramento progressivo, sarai in grado di utilizzare molte funzionalità, tra cui notifiche push, accesso a fotocamera e microfono, geolocalizzazione, sensori, pagamenti, finestre di dialogo di condivisione e archiviazione offline. Tutte queste funzionalità vengono eseguite direttamente all'interno del modello di sicurezza del browser, comprese le finestre di dialogo delle autorizzazioni.
Possiamo anche comunicare con altre app tramite schemi URI, come l'apertura di Twitter, YouTube o WhatsApp tramite i loro URL o URI personalizzati, come whatsapp: //.
Infine, durante la creazione di PWA nativi che vengono pubblicati nello store utilizzando Capacitor o in Microsoft Store, saremo in grado di collegare le API native che ci consentiranno di eseguire praticamente qualsiasi codice nativo. Tale integrazione con Windows 10 include l'accesso all'hardware ma anche l'integrazione con il sistema operativo, offrendo opzioni come Pin to Start. Ad esempio, la PWA di Twitter ti consente di aggiungere qualsiasi utente alla schermata iniziale.
Sfide di design e UX
La progettazione di PWA presenta sfide uniche, quindi è importante dedicare un po 'di tempo alla ricerca, testare il più possibile e considerare quanto segue:
- Gli utenti si aspettano esperienze simili a quelle di un'app.
- Il processo di installazione è ancora nuovo, quindi dobbiamo fare uno sforzo in più per spiegare come installare l'app.
- L'aggiornamento dell'app in background senza l'interazione dell'utente è fantastico, ma aggiunge anche alcune sfide per l'UX.
- Sul desktop, il responsive web design prende una nuova frontiera poiché le finestre PWA possono essere minuscole, molto più piccole di un viewport mobile. Ciò significa che dobbiamo creare visualizzazioni specifiche o piccoli widget per questo formato, come si vede oggi in Chrome OS.
- Le notifiche push dovrebbero aggiungere valore solo all'utente, quindi impara a chiedere al momento giusto e non sprecare l'opportunità di inviare messaggi non utili o interessanti.
- Dobbiamo progettare per le prestazioni web e per l'accesso offline.
L'anno delle PWA
Con l'aggiunta di iOS e desktop quest'anno, le PWA sono ovunque oggi. Ma dobbiamo ricordare che il loro viaggio è appena iniziato, quindi aspettati cambiamenti frequenti e assicurati di tenerti aggiornato con le ultime tecniche e idee per offrire un'esperienza utente eccellente mentre la piattaforma si evolve.
Questo articolo è stato originariamente pubblicato nel numero 308 di netto, la rivista più venduta al mondo per web designer e sviluppatori. Acquista il numero 308 qui o iscriviti qui.
