Cosa sono le app Web progressive e come installarne una?

Cosa sono le app Web progressive e come installarne una?

Le app dominano il tuo telefono. Per molto tempo, le app non hanno influenzato il tuo desktop o il tuo browser allo stesso modo. Questo è cambiato negli ultimi anni. Le Progressive Web App (PWA) stanno crescendo in statura e alterando le nostre interazioni con tutti i tipi di siti web.





Ma cos'è esattamente un'app Web progressiva? Cosa fa una PWA che un sito web non fa? Ecco cosa devi sapere sulle Progressive Web App.



Che cos'è un'app Web progressiva?

Le Progressive Web App sono applicazioni Web che offrono un sito normale agli utenti ma appaiono come un'app mobile nativa. Le PWA tentano di portare l'usabilità di un'app mobile nativa nel moderno set di funzionalità del browser, sfruttando appieno i progressi in entrambe le aree di sviluppo.





Cosa definisce una PWA, allora?

  • universale : una PWA deve funzionare perfettamente (beh, quasi) per ogni utente, indipendentemente dal browser.
  • Reattivo : le PWA dovrebbero funzionare con qualsiasi dispositivo, come laptop, tablet, smartphone e così via.
  • Design : il design dovrebbe imitare le app mobili native, ovvero menu snelli e facili da trovare, con una semplice interattività per funzionalità avanzate.
  • Sicuro : le PWA dovrebbero utilizzare HTTPS per proteggere i dati degli utenti.
  • Scopribile: gli utenti possono trovare le PWA e sono facilmente identificabili come un'applicazione (piuttosto che un 'sito').
  • Fidanzamento: una PWA deve avere accesso a funzionalità di coinvolgimento native come le notifiche push.
  • Aggiornamenti: Le PWA rimangono aggiornate, servendo le ultime versioni di un servizio o di un sito.
  • Installazione: consentire agli utenti di 'installare' facilmente la PWA sulla schermata iniziale senza bisogno di un app store.
  • Condivisione: Le PWA richiedono solo un singolo URL da condividere, senza alcuna installazione.

Come puoi vedere, le PWA mirano a fornire agli utenti un'esperienza completa del sito Web con le funzionalità semplificate e il design dell'interfaccia di un'app nativa.



Come funziona un'app Web progressiva?

La chiave per le app Web progressive sono i lavoratori del servizio browser.

Un service worker è uno script che viene eseguito in background nel tuo browser, 'separato da una pagina web, aprendo la porta a funzionalità che non richiedono una pagina web o l'interazione dell'utente'. Potresti usare lavoratori di servizio come notifiche push e sincronizzazione in background al momento, ma l'immediato futuro della PWA conferisce a questi script un potere maggiore.



Pertanto, i lavoratori dei servizi costituiscono la base dello standard PWA, utilizzando la cache Web per risultati quasi istantanei.

Prima dei service worker, lo script della cache del browser di riferimento era Application Cache (o App Cache). App Cache è disponibile in un'ampia gamma di servizi offline, ma era in qualche modo soggetto a errori. Inoltre, App Cache ha diverse limitazioni ben note, come Una lista a parte spiega.



Ma il problema principale per gli sviluppatori è la mancanza di interazione diretta con esattamente come funziona AppCache, impedendo agli sviluppatori di risolvere accuratamente i problemi non appena si presentano. A loro volta, siti Web e servizi con funzionalità offline complete erano una scelta rischiosa.

I lavoratori dei servizi, tuttavia, durano solo finché è richiesta la loro azione. In una PWA, quando si fa clic su qualcosa o si utilizza una funzionalità, un addetto all'assistenza entra in azione. L'operatore del servizio (ricorda, è uno script) elabora l'evento, decidendo se la cache offline può completare la richiesta. L'idea è che ci siano più cache offline tra cui scegliere per la PWA, offrendo una gamma molto più ampia di funzionalità offline.

Inoltre, la cache non serve solo per aumentare la velocità offline. Ad esempio, ti dirigi a una PWA, ma la tua connessione è estremamente irregolare. L'addetto al servizio serve una cache precedente, pienamente funzionante, senza interrompere la tua esperienza.

Supporto progressivo del browser per app Web

Esistono due requisiti per l'utilizzo di un'app Web progressiva: un browser compatibile e un servizio abilitato per PWA.

Per prima cosa, diamo un'occhiata ai browser. Hai due opzioni per verificare il supporto del browser PWA. Il primo è di Jake Archibald L'addetto ai servizi è pronto? ? che mostra facilmente lo stato PWA-ready dei principali browser, oltre a Samsung Internet.

Per una panoramica più dettagliata del supporto del browser PWA, dovresti dare un'occhiata Posso usare , un sito web specializzato nell'elencare l'implementazione di varie tecnologie web e browser in base alla versione del browser. Ad esempio, se inserisci 'lavoratori di servizio' nella barra di ricerca, trovi una tabella che mostra il numero di versione con cui ogni browser ha implementato i lavoratori di servizio PWA.

La tabella Can I Use Service Workers conferma che tutti i principali browser supportano le PWA. Illustra inoltre i supporti PWA per diversi browser desktop alternativi e browser mobili.

Scomponendolo un po' di più:

  • Browser desktop (supporto completo): Chrome, Firefox, Opera, Edge, Safari
  • Browser desktop (supporto parziale/versione obsoleta): Browser QQ, Browser Baidu
  • Browser mobile (supporto completo): Chrome, Firefox, Safari, Browser UC, Internet Samsung, Browser Mint, Wechat
  • Browser mobile (supporto parziale/versione obsoleta): Browser QQ, Browser Android, Opera Mobile

Quindi, i principali browser supportano tutti le PWA. Microsoft Edge e Safari sono le aggiunte più recenti all'elenco completo del supporto. Al contrario, sia QQ Browser che Baidu Browser ora utilizzano versioni obsolete e come tali sono scese al secondo livello.

Come trovare e installare un'app Web progressiva

Ora che sai quale browser utilizzare, puoi pensare di cercare e installare una PWA. Per questo esempio, utilizzerò un Samsung Galaxy S8 con Google Chrome.

Le Progressive Web App sono ovunque. Molte aziende hanno adattato i propri siti e servizi per offrire una versione Progressive Web App. In molti casi, incontrerai per la prima volta una PWA quando accedi alla home page o al sito mobile del servizio, che attiva il Aggiungere alla schermata Home la finestra di dialogo.

Guarda il video qui sotto per vedere cosa succede quando visiti il Sito mobile Twitter .

Ovviamente, visitare innumerevoli siti e sperare di vedere il trigger della schermata iniziale non è utile. In effetti, è decisamente dispendioso in termini di tempo. Per fortuna, non devi farlo perché ci sono un paio di siti dedicati alla catalogazione delle PWA.

Primo tentativo outweb . Elenca una gamma abbastanza decente di PWA, con nuove opzioni che appaiono frequentemente. Quindi, prova pwa.rocks. Ha una selezione più piccola, ma alcuni PWA utili che vorrai aggiungere al tuo dispositivo.

Inoltre, a gennaio 2019, Chrome 72 per Android è stato fornito con Trusted Web Activity (TWA). TWA consente alle schede di Chrome di aprirsi in modalità autonoma. A sua volta, ciò consente alle PWA di essere presenti nell'app store di Google Play. Le prime PWA a comparire su Google Play sono state Twitter Lite , Instagram Lite e Google Maps Vai , con più impostato per apparire nel tempo.

Galleria di immagini (2 immagini) Espandere Espandere Chiudere

Le app Web progressive sostituiranno le app native?

Le Progressive Web App sono un eccellente passaggio ibrido tra il tuo browser e un'app mobile nativa. Le PWA sostituiranno completamente le app native? Questo è un duro no da parte mia. Le PWA sono ottime come offerta leggera, ma dato che attualmente si concentrano principalmente sulla replica di siti e servizi esistenti, non sostituiranno le app native.

Almeno, non per il momento.

Windows 10 gestione della memoria schermata blu

Le PWA funzionano però. Anche i dati disponibili su PWA Stats lo confermano. Ecco alcuni numeri interessanti che illustrano come le PWA stanno alterando le nostre interazioni con i siti Web di uso comune:

  • Trivago ha registrato un aumento del coinvolgimento del 150% per gli utenti che hanno aggiunto la propria PWA a una schermata iniziale.
  • La home page della PWA di Forbes 'si carica completamente in soli 0,8 secondi', mentre le impressioni per visita sono aumentate del 10%. La PWA di Forbes ha anche visto raddoppiare la lunghezza delle sessioni utente.
  • Twitter Lite ha registrato un aumento del 65% delle pagine per sessione, con un massiccio aumento del 75% dei tweet. È anche interattivo 'in meno di 5 secondi su 3G'.
  • Alibaba ha registrato un aumento del 76% delle conversioni da dispositivi mobili.

Le PWA non sono ancora mainstream. Ma con la vasta gamma di vantaggi che offrono, come il risparmio di spazio sul tuo dispositivo, ne sentirai parlare di più in futuro.

Condividere Condividere Tweet E-mail Una guida per principianti all'animazione del discorso

L'animazione del discorso può essere una sfida. Se sei pronto per iniziare ad aggiungere dialoghi al tuo progetto, analizzeremo il processo per te.

Leggi Avanti Argomenti correlati Circa l'autore Gavin Phillips(945 articoli pubblicati)

Gavin è l'editor junior per Windows e la spiegazione della tecnologia, un collaboratore regolare del podcast Really Useful e un revisore regolare del prodotto. Ha una laurea (Hons) in scrittura contemporanea con pratiche di arte digitale saccheggiata dalle colline del Devon, oltre a oltre un decennio di esperienza di scrittura professionale. Ama abbondanti quantità di tè, giochi da tavolo e calcio.

Altro da Gavin Phillips

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti