{"id":760,"date":"2017-09-25T15:14:07","date_gmt":"2017-09-25T13:14:07","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/quel-progetto-web-dovrebbe-essere-una-pwa\/"},"modified":"2017-09-25T15:14:07","modified_gmt":"2017-09-25T13:14:07","slug":"quel-progetto-web-dovrebbe-essere-una-pwa","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/quel-progetto-web-dovrebbe-essere-una-pwa\/","title":{"rendered":"S\u00ec, quel progetto web dovrebbe essere una PWA"},"content":{"rendered":"<div class=\"paragrafo\">\n<p>Sembra sia passata un&#8217;eternit\u00e0 da quando <a href=\"https:\/\/fberriman.com\/\">Frances Berriman<\/a> ha coniato il termine \u201cProgressive Web App\u201d nel tentativo di descrivere una nuova classe di siti web. Ma c&#8217;\u00e8 molta confusione su cosa sia esattamente una Progressive Web App (PWA), nonostante suo marito, Alex Russel, abbia messo insieme una pratica guida alle <a href=\"https:\/\/medium.com\/@slightlylate\/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955\">caratteristiche di una PWA<\/a> e siano state oggetto di un mucchio di documentazione, dozzine di blog post e altrettante conference talk.<\/p>\n<p>Nonostante ci siano cos\u00ec tanti contenuti accessibili e ben scritti sulle PWA disponibili gratuitamente, <a href=\"https:\/\/news.ycombinator.com\/item?id=14752542\">abbonda la disinformazione<\/a>. Probabilmente vi sarete imbattuti in una o pi\u00f9 affermazioni come queste:<\/p>\n<ul>\n<li>Se state creando una PWA, dovete usare un framework JavaScript.<\/li>\n<li>Per realizzare una PWA, cominciate con una single page app.<\/li>\n<li>Le PWA hanno senso solo per quelle \u201capp\u201d che gli utenti vogliono installare.<\/li>\n<li>Le PWA hanno senso solo nel mobile.<\/li>\n<li>Le PWA sono una cosa di Android.<\/li>\n<\/ul>\n<p>Niente di tutto ci\u00f2 \u00e8 vero, ma come per molta disinformazione di questi tempi, ognuna contiene un briciolo di verit\u00e0 che \u00e8 stata deformata in falsit\u00e0. Se state prendendo in considerazione di creare una PWA, <em>potreste<\/em> usare un framework JavaScript o crearla come una app single page, ma non \u00e8 affatto necessario. C&#8217;\u00e8 un&#8217;opzione per creare una PWA esattamente come c&#8217;\u00e8 un&#8217;opzione per ogni altra progetto web. Dopo tutto, ogni PWA \u00e8 (o perlomeno dovrebbe essere) un sito web. Le PWA hanno solo alcune feature che permettono loro di fare pi\u00f9 di quello che i siti web sono stati tradizionalmente in grado di fare\u2026 come installarli. Ma, in maniera simile, l&#8217;installazione non \u00e8 la <em>raison d\u2019\u00eatre<\/em> di ogni PWA. E, mente molte delle prime PWA si focalizzavano sul mobile e funzionavano solo su Android, le PWA <a href=\"https:\/\/www.aaron-gustafson.com\/notebook\/progressive-web-apps-and-the-windows-ecosystem\/#whats-the-timeline-for-progressive-web-apps-in-windows\">non sono pi\u00f9 limitate solo ai device con piccoli schermi<\/a>. Inoltre, sono <a href=\"https:\/\/medium.com\/@nekrtemplar\/progressive-web-apps-aint-google-s-thing-31ca581e7a1\">anche pi\u00f9 di una cosa di Google<\/a>: Microsoft, Mozilla, Opera e Samsung sono tutti nella squadra. Apple <a href=\"https:\/\/webkit.org\/status\/#specification-service-workers\">ha dichiarato recentemente di aver intenzione di implementare Service Workers<\/a> (uno dei pilastri tecnici delle PWA), ma solo il tempo dir\u00e0 se supporteranno aspetti come l&#8217;installazione. Nessun problema, visto che le <a href=\"https:\/\/cloudfour.com\/thinks\/ios-doesnt-support-progressive-web-apps-so-what\/\">Progressive Web App funzionano comunque molto bene in Safari<\/a>!<\/p>\n<p>Purtroppo, una tale disinformazione ha convinto molti designer e developer (e i loro management team) che le PWA non sono appropriate per i loro progetti. Lo <em>sono<\/em>! Il vostro sito, ogni sito, dovrebbe essere una PWA. Questo approccio offre dei benefit per ogni progetto sul web, ma ci arrivo tra un minuto. Prima di ci\u00f2, voglio che siamo tutti sulla stessa pagina su quello che, esattamente, fa di una PWA una PWA. Se avete osservato da vicino per un po&#8217; le PWA o se ne avete gi\u00e0 realizzata una, potete scorrere rapidamente o saltare la prossima sezione. Se non avete una grande familiarit\u00e0 o se non pensate di aver capito bene cosa sono, non preoccupatevi, la prossima sezione \u00e8 un&#8217;introduzione molto breve che vi far\u00e0 partire in fretta.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section1\">Quindi, cos&#8217;\u00e8 una PWA?<\/h2>\n<p>Come ho detto prima, una PWA \u00e8 un sito web con poteri speciali. Il termine \u201capp\u201d in \u201cProgressive Web App\u201d non \u00e8 indicativo del tipo di contenuto o dell&#8217;esperienza che gli utenti dovrebbero aspettarsi con una PWA. Non dovreste concentrarvi su questo: <a href=\"https:\/\/fberriman.com\/2017\/06\/26\/naming-progressive-web-apps\/\">\u201cProgressive Web App\u201d \u00e8 un termine di marketing<\/a>. Le PWA hanno l&#8217;abilit\u00e0 di connettersi al sistema operativo (e, quindi, ai suoi utenti) a un livello pi\u00f9 profondo attraverso l&#8217;installazione e le API che offrono capacit\u00e0 come le notifiche, l&#8217;accesso alla rubrica contatti e molto altro. Non tutte queste API richiedono l&#8217;installazione per accedervi, ma alcune s\u00ec. Potrebbe essere utile pensare a una PWA come a un website++.<\/p>\n<p>Cosa rende una PWA una PWA. Non molto, in realt\u00e0: ci sono solo tre requisiti:<\/p>\n<ol>\n<li><strong>Dovete usare HTTPS.<\/strong> Alle PWA si possono garantire un&#8217;ampia gamma di privilegi extra in un sistema operativo, quindi \u00e8 essenziale che la connessione al web server sia sicura. Se vi serve aiuto in merito, potete guardare il <a href=\"https:\/\/letsencrypt.org\/getting-started\/\">servizio SSL gratuito Let\u2019s Encrypt<\/a>.<\/li>\n<li><strong>Vi serve un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/Manifest\">Web App Manifest<\/a>.<\/strong> \u00c8 molto meno spaventoso di come suona. \u00c8 un file JSON con informazioni sul vostro sito. Potreste addirittura averne gi\u00e0 uno scarno se avete usato un favicon generator. Assicuratevi di <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Manifest#Deploying_a_manifest_with_the_link_tag\">farvi riferimento usando un <code>link<\/code> nella <code>head<\/code> delle vostre pagine web<\/a> cos\u00ec che browser e search spider possano trovarlo.<\/li>\n<li><strong>Vi serve un Service Worker.<\/strong> Probabilmente, questo \u00e8 lo step pi\u00f9 complicato, ma ci sono migliaia di guide passo a passo l\u00e0 fuori per creare Service Workers su misura per il tipo di lavoro che volete che facciano. <a href=\"https:\/\/serviceworke.rs\/\">Questa<\/a>, di Mozilla, \u00e8 particolarmente buona.<\/li>\n<\/ol>\n<p>Questo \u00e8 quanto. Una volta che avrete messo a posto queste cose, il vostro sito web sar\u00e0 una Progressive Web App. Almeno <em>tecnicamente<\/em>. Perch\u00e9 queste condizioni? Beh, qui \u00e8 dove le cose assumono pi\u00f9 sfumature.<\/p>\n<p>Nel 2015, quando il concetto di PWA fece il suo debutto, <a href=\"https:\/\/infrequently.org\/2015\/06\/progressive-apps-escaping-tabs-without-losing-our-soul\">Alex Russell deline\u00f2 dieci caratteristiche che le PWA condividevano<\/a> (o di cui erano perlomeno capaci). La maggior parte di queste caratteristiche sono, senza dubbio, come si dovrebbe costruire per il web. Altre non sono cos\u00ec universali e non avrebbero senso in ogni tipo di progetto. Sospetto che questa potrebbe essere una delle fonti di confusione per le persone che considerano di adottare l&#8217;approccio PWA ed \u00e8 la ragione per cui ho deciso di scrivere questo articolo.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section2\">Esperienze di qualit\u00e0 e benefici universali delle PWA<\/h2>\n<p>Nelle sezioni successive, discuter\u00f2 di vari archetipi di progetti web e del modo in cui adottare alcune di queste caratteristiche di PWA potrebbe dare benefici gli utenti. Dopo tutto, questo \u00e8 proprio il motivo per cui lo facciamo. Ma prima di fare ci\u00f2, voglio discutere delle sette caratteristiche delle PWA che sono utili in ogni progetto web.<\/p>\n<p>Come ho citato, ci sono delle caratteristiche delle PWA che forniranno assolutamente valore ai vostri utenti e che valgono il vostro tempo e la vostra considerazione. In effetti, tutte sono considerate best practice nel web design e development.<\/p>\n<p>Primo, le PWA devono essere <strong>sicure<\/strong>. Come ho citato nella mia discussione sui loro requisiti tecnici, le PWA devono girare su HTTPS. Punto. Fortunatamente, il costo di far girare il vostro sito su HTTPS \u00e8 <a href=\"https:\/\/letsencrypt.org\/\">sceso a zero<\/a>. Ovviamente, <a href=\"https:\/\/www.wired.com\/2016\/09\/wired-completely-encrypted\/\">ci sono legittime sfide nel convertire dei grandi siti web esistenti<\/a>, ma ne vale la pena per moltissime ragioni. La prima \u00e8 che protegge i vostri utenti dagli attacchi \u201cman in the middle\u201d <a href=\"https:\/\/www.aaron-gustafson.com\/notebook\/the-network-effect\/\">fatti da ISP<\/a>, <a href=\"https:\/\/www.tripwire.com\/state-of-security\/security-data-protection\/nabil-ouchn-airport-hotel-security\/\">negli hotel e negli aeroporti<\/a>, <a href=\"https:\/\/www.pcmag.com\/article2\/0,2817,2406806,00.asp\">da router infetti<\/a> o <a href=\"https:\/\/www.wifipineapple.com\/\">da altri con accesso alla rete<\/a>. HTTPS assicura che sia il codice sia il contenuto che mandate ai vostri utenti arrivino effettivamente intatti. <a href=\"https:\/\/www.aaron-gustafson.com\/notebook\/links\/gogo-is-using-man-in-the-middle-malware-tactics-on-its-own-users\/\">Non \u00e8 a prova di bomba<\/a>, ma \u00e8 un passo importante nel proteggere i vostri utenti e i vostri dati. Usare HTTPS \u00e8 anche un prerequisito per accedere a molte delle pi\u00f9 nuove (e pi\u00f9 sensibili) API, incluse <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Geolocation\">Geolocation<\/a> e <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Service_Worker_API\">Service Workers<\/a> e per tecnologie che migliorano le prestazioni come <a href=\"https:\/\/http2.github.io\/\">HTTP\/2<\/a> e <a href=\"https:\/\/github.com\/google\/brotli\">Brotli compression<\/a>. Vale anche la pena notare che <a href=\"https:\/\/www.troyhunt.com\/life-is-about-to-get-harder-for-websites-without-https\/\">molti browser stanno cominciando a segnare i siti non HTTPS come \u201cinsicuri\u201d<\/a> e <a href=\"https:\/\/security.googleblog.com\/2014\/08\/https-as-ranking-signal_6.html\">SSL influenza anche il search ranking<\/a>.<\/p>\n<p>Prima ho detto che le PWA non sono mai state intese come un approccio mobile-only. Le PWA sono per tutti. Mettere a disposizione di pi\u00f9 persone su pi\u00f9 device con sistemi operativi, capacit\u00e0 di browsing, API di sistema e dimensioni di schermo estremamente variabili far\u00e0 solo aumentare il vostro \u201dreach\u201d e creer\u00e0 pi\u00f9 opportunit\u00e0 per avere successo. Qui \u00e8 dove entrano in gioco il <strong><a href=\"https:\/\/alistapart.com\/article\/understandingprogressiveenhancement\">progressive enhancement<\/a><\/strong> e il <strong><a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\">responsive design<\/a><\/strong>. Creando layout responsive, i vostri design si adatteranno a fornire il layout pi\u00f9 appropriato data la quantit\u00e0 di schermo con cui dovete lavorare, sia che dipenda dalle dimensioni del device o dalla dimensione della finestra impostata dal vostro utente. Il progressive enhancement permette ai vostri progetti di adattarsi a una gamma di differenze ancora pi\u00f9 ampia, sia nell&#8217;ambiente di esecuzione (device, OS, etc.) sia, soprattutto, ai vostri utenti.<\/p>\n<p>Il progressive enhancement vi aiuta anche ad evitare situazioni in cui <a href=\"http:\/\/youzeek.com\/browserupgrade.aspx\">gli utenti non possono accedere ai vostri progetti<\/a> perch\u00e9 usano un device o browser con cui non avete familiarit\u00e0 o su cui non avete fatto test. Assicura che il vostro sito funzioni su ogni device che possa accedere al web, indipendentemente dalle sue capacit\u00e0, permettendovi di usare il vostro tempo prezioso per ottimizzare quell&#8217;esperienza per i browser e i device pi\u00f9 moderni. \u00c8 anche un <a href=\"https:\/\/medium.com\/@AaronGustafson\/the-true-cost-of-progressive-enhancement-d395b6502979\">approccio pi\u00f9 economico<\/a> sul lungo periodo.<\/p>\n<p>Un&#8217;altra qualit\u00e0 che Alex ha identificato \u00e8 che molte PWA sono simili ad app. Si noti il <em>simile<\/em>. Non sono app, ma piuttosto, forniscono <strong>esperienze simili alle app<\/strong> che agli utenti &#8211; posso dirlo? &#8211; piace usare. Pi\u00f9 potete fare per fornire una user experience consistente, senza soluzione di continuit\u00e0, senza sforzi (che \u00e8 quello che in realt\u00e0 significa \u201dsimile ad app\u201d qui), <a href=\"https:\/\/blog.kissmetrics.com\/speed-is-a-killer\/\">pi\u00f9 sar\u00e0 probabile che vediate visite che si ripetono, aumento delle vendite, etc.<\/a>. Vale la pena notare che questo non implica che dobbiate usare JavaScript: significa solo che dovreste pensare al flusso che seguiranno i vostri utenti nel sito e che dovreste sfruttare ogni opportunit\u00e0 di rimuovere la frizione dal loro processo di raggiungimento dei loro obiettivi.<\/p>\n<p>Se avete creato qualcosa, probabilmente volete che la gente lo trovi. Le PWA, per definizione, sono <strong>semplici da scoprire<\/strong>. Il contenuto del vostro sito dovrebbe essere scritto in maniera tale che appaia organicamente quando le persone cercano degli argomenti correlati. Non cedete allo spam ma abbiate cura di realizzare contenuti in maniera ponderata, appropriata e chiara.<\/p>\n<p>In relazione con la discoverability c&#8217;\u00e8 che le PWA sono <strong>\u201dlinkabili\u201d<\/strong>. Se i vostri utenti possono raggiungere un certo punto nel vostro sito attraverso la navigazione naturale, dovreste fare del vostro meglio per assicurarvi che possano salvare la loro posizione mettendola nei segnalibri o quando rilanciano il loro web browser e il tab del vostro sito viene riaperto. Questo ha anche un ruolo su quanto sia condivisibile il vostro progetto. Fatevi anche un favore e passate del tempo a mettere insieme alcuni <a href=\"http:\/\/ogp.me\/\"><code>meta<\/code> tag Open Graph<\/a> e dei <a href=\"https:\/\/json-ld.org\/\">JSON-LD<\/a> per rendere ancora pi\u00f9 condivisibile il vostro contenuto.<\/p>\n<p>Ultima, ma di sicuro non meno importante, c&#8217;\u00e8 la <strong>network independence<\/strong>. Questo \u00e8 il grande aspetto che eccita gli sviluppatori. \u00c8 da un po&#8217; che le capacit\u00e0 offline e lo storage persistente sono, in una certa misura, possibili: diamine, Microsoft ha debuttato <a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/ms531424%28v=vs.85%29.aspx\">con il client-side data storage nel lontano 1999<\/a>! Ahim\u00e9, mentre lo storage dei dati lato client \u2014<a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IndexedDB_API\">IndexedDB<\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Storage\/LocalStorage\"><code>localStorage<\/code><\/a>, etc.\u2014 \u00e8 decisamente maturato negli ultimi anni, <a href=\"https:\/\/alistapart.com\/article\/application-cache-is-a-douchebag\">il vero controllo del caching delle risorse \u00e8 stato piuttosto terribile<\/a>. Poi sono arrivati <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Service_Worker_API\">Service Workers<\/a> e la <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Cache\">Cache API<\/a>. Queste due tecnologie lavorano in concorso con la <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a> per fare, intercettare, aumentare e memorizzare richieste di risorse fatte dall&#8217;interno del vostro sito, il che significa che i vostri utenti possono ancora accedere al vostro contenuto anche se la connessione di rete \u00e8 interrotta.<\/p>\n<p>C&#8217;\u00e8 una tonnellata di fantastiche risorse che coprono i dettagli di Service Workers, quindi salter\u00f2 i dettagli tecnici e parler\u00f2 solo di alcune delle cose eccezionali che potete farci:<\/p>\n<ul>\n<li><a href=\"https:\/\/googlechrome.github.io\/samples\/service-worker\/prefetch\/index.html\">Prefetch e cache delle risorse<\/a> che sapete che serviranno ai vostri utenti. Questo migliora drasticamente la performance.<\/li>\n<li><a href=\"https:\/\/googlechrome.github.io\/samples\/service-worker\/read-through-caching\/index.html\">Mettere in cache ogni pagina e asset<\/a> richiesta dal vostro sito cos\u00ec che non debbano essere recuperati dal server ogni volta che viene caricata una nuova pagina. Questo migliora la performance durante la navigazione ma anche nelle visite di ritorno.<\/li>\n<li><a href=\"https:\/\/googlechrome.github.io\/samples\/service-worker\/custom-offline-page\/index.html\">Definire una pagina \u201coffline\u201d personalizzata.<\/a> Questo evita che gli utenti vedano il messaggio generico del browser \u201cConnessione assente\u201d.<\/li>\n<li><a href=\"https:\/\/googlechrome.github.io\/samples\/service-worker\/fallback-response\/index.html\">Cercare prima una connessione di rete<\/a> e fornire la copia \u201clive\u201d di una data risorsa se \u00e8 disponibile, usando la versione \u201cvecchia\u201c precedentemente messa in cache come fallback se non \u00e8 disponibile. Anche questo pu\u00f2 evitare che gli utenti vedano i messaggi \u201cConnessione assente.<\/li>\n<li><a href=\"http:\/\/www.deanhume.com\/Home\/BlogPost\/service-workers--dynamic-responsive-images-using-webp-images\/10132\">Rispondere alle richieste per immagini JPEG con versioni WebP<\/a> (che tendono ad essere considerevolmente pi\u00f9 piccole) di quelle immagini se il browser le supporta. Questa strategia vi consente di fornire delle sorgenti di immagini alternative che migliorano la performance <em>senza<\/em> dover modificare il vostro markup.<\/li>\n<\/ul>\n<p>Service Workers pu\u00f2 fare molto di pi\u00f9 (e in parte ne parler\u00f2 tra poco) e ed \u00e8 probabile che gli vengano garantite molte feature pi\u00f9 incredibili e utili in un futuro non troppo distante. Hanno gi\u00e0 dato prova del loro valore e portano valore ad ogni progetto sul web. Per un&#8217;utile lista di ricette, date un&#8217;occhiata a <a href=\"https:\/\/serviceworke.rs\/\">questo cookbook di Mozilla<\/a> o <a href=\"https:\/\/github.com\/GoogleChrome\/samples\/tree\/gh-pages\/service-worker\">a questo del team di Chrome<\/a>.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section3\">Altri vantaggi delle PWA per tipo di progetto<\/h2>\n<p>Ora che abbiamo visto le qualit\u00e0 universalmente vantaggiose delle PWA, cambiamo marcia. Ogni progetto \u00e8 diverso, ma c&#8217;\u00e8 una manciata di archetipi in cui tende a ricadere la maggior parte dei progetti web. E ognuno di questi archetipi pu\u00f2 trarre benefici reali dal girare come PWA.<\/p>\n<h3 id=\"section4\">Informativo<\/h3>\n<p>Quando penso ai siti informativi, intendo quel tipo di siti a cui molti di noi del settore fa riferimento come \u201csiti brochure\u201c. I siti promozionali ne sono un buon esempio. Un altro esempio sono i siti di piccole aziende la cui interattivit\u00e0 ha il suo culmine in una form di contatto o in un numero di telefono cliccabile. Anche i siti portfolio ricadono in questa categoria cos\u00ec come molti siti di ristoranti.<\/p>\n<p>Nella maggior parte dei casi, progetti come questi esistono per servire gente che vuole saperne di pi\u00f9 su di voi, sul vostro business, su un progetto o qualcosa di simile. Nella maggior parte dei casi, non vedranno una tonnellata di visite ripetute. La gente va sul sito cercando una specifica informazione, a cui si spera possano accedere rapidamente e semplicemente, per poi andarsene. Potrebbero tornare, ma anche no, quindi i miglioramenti di performance dati dal caching offline di Service Workers potrebbero essere utili, ma probabilmente non avranno quel livello di impatto che avrebbero su un sito che ha visite ripetute frequenti. \u00c8 anche altamente improbabile, se non impossibile, che qualcuno installi effettivamente un progetto come questo.<\/p>\n<p>A seconda del tipo di sito che state costruendo, potreste prendere in considerazione di integrare alcune device API. Se il sito \u00e8 per un business del mondo reale, aggiungete il supporto per <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Geolocation\">Geolocation<\/a>. Se avete delle vendite o delle offerte speciali di cui vorreste informare i vostri visitatori, potreste considerare di integrare Notifications (<a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API\">Web<\/a> o <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Push_API\">Push<\/a>).<\/p>\n<p>Sebbene due dei \u201cmaggiori\u201c vantaggi di essere una PWA (l&#8217;essere installabile e le capacit\u00e0 offline) sono meno applicabili ai siti informativi, rendere PWA progetti come questi ha ancora dei vantaggi. Quelli non sono che due aspetti dell&#8217;essere una PWA: i vostri utenti vi ringrazieranno per aver creato un sito che funziona su tutti i loro device, che \u00e8 facile da usare, che risulta nelle ricerche e che \u00e8 facilmente condivisibile con i propri amici.<\/p>\n<h3 id=\"section5\">Periodico<\/h3>\n<p>I siti periodici comprendono tutto ci\u00f2 che va dal blog alla newsletter, dal podcast ai fumetti online, ai magazine, ai quotidiani fino ai programmi video. Questa tipologia di progetti \u00e8 come quella dei progetti informativi, con l&#8217;eccezione che vengono aggiornati regolarmente (o quasi regolarmente). Hanno anche un pubblico che presumibilmente ritorner\u00e0 (ahem) periodicamente per leggere un nuovo articolo, guardare un nuovo video o ascoltare un nuovo episodio del podcast. Dal momento che condividono gran parte del loro DNA con i siti informativi &#8211; che diamine, un periodico pu\u00f2 addirittura far parte di un sito informativo &#8211; tutte le qualit\u00e0 di cui beneficiano i siti informativi sono le stesse dei siti periodici. Ci sono tuttavia alcune capacit\u00e0 che le PWA offrono perfettamente adatte ai periodici.<\/p>\n<p>Nel parlare di promozioni o offerte, ho detto che <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Push_API\">Push Notifications<\/a> potrebbe essere un&#8217;opzione per i siti informativi. Per i siti periodici, dovrebbero essere un dato di fatto. Push Notifications fornisce un meccanismo per cui il server manda un update a ogni istanza del vostro Service Worker installato sulle macchine dei vostri utenti. E, presumendo che vi abbiano dato il permesso, questi aggiornamenti possono essere mostrati ai vostri utenti anche se non hanno installato la vostra PWA o non hanno un tab del browser aperto sul vostro sito.<\/p>\n<p>Non prendetela come un&#8217;opportunit\u00e0 per spammare i vostri utenti, perch\u00e9 \u00e8 molto probabile che perdereste la loro attenzione e il loro tempo. Al contrario, scegliete dei momenti appropriati per avvisarli. Se il vostro sito viene aggiornato solo una o due volte alla settimana, notificarli dei singoli post probabilmente va bene e pu\u00f2 fornire un&#8217;alternativa carina per le persone che non usano un feed reader. Se avete aggiornamenti frequenti, considerate un avviso giornaliero o settimanale. Questo potrebbe addirittura essere un buon candidato per dei test A-B.<\/p>\n<p>Potreste anche alzare il livello del gioco offrendo un facile tool \u201din-page\u201d per salvare un articolo per la lettura offline. Perch\u00e9 dovreste farlo invece che mettere tutto quello che l&#8217;utente vede in cache usando il Service Worker? Beh, data la natura di un periodico, la probabilit\u00e0 di riutilizzare un singolo pezzo di contenuto \u00e8 piuttosto bassa. Se mettete in cache tutto quello che l&#8217;utente vede, specialmente se il vostro contenuto ha un sacco di immagini ad alta risoluzione, riempireste la loro cache con robe che potrebbero non visualizzare mai pi\u00f9. Per essere bravi cittadini del web, dovreste o ripulire regolarmente tenendo traccia dell&#8217;ultima volta a cui si \u00e8 acceduto a una risorsa (il che, francamente, mi sembra un po&#8217; troppo lavoro) oppure potreste mettere in cache giusto le risorse necessarie a vita lunga come i file CSS e JavaScript. Poi potreste dare il controllo ai vostri utenti dandogli un <a href=\"https:\/\/una.im\/save-offline\/\">pulsante<\/a> che gli permetta di salvare una entry per dopo.<\/p>\n<p>Proseguendo il nostro viaggio nella terra di Service Worker, potremmo cominciare ad esplorare <a href=\"https:\/\/github.com\/WICG\/BackgroundSync\/blob\/master\/explainer.md\">Background Sync<\/a> per richiamare nuove risorse periodicamente. Se siete un quotidiano, forse volete preparare le cache dei vostri utenti ogni mattina con la prima pagina e le storie principali. Se siete un podcast, forse vorreste caricare l&#8217;episodio pi\u00f9 nuovo a cadenza regolare. Di nuovo, per giocare come dei bravi bambini al parco giochi, probabilmente dovreste buttare gli articoli, episodi e simili pi\u00f9 vecchi, e questo potrebbe essere un modo grandioso di dare un&#8217;esperienze incredibilmente veloce ai vostri utenti. Ma pensateci! Lanciano il vostro sito e il browser ha gi\u00e0 tutto ci\u00f2 di cui ha bisogno per rendere l&#8217;uscita di oggi. Magia!<\/p>\n<p>Infine, i periodici sono uno di quegli archetipi per cui comincia ad avere senso l&#8217;opzione di installare il sito. Ad alcune persone piace poter toccare un&#8217;icona sul loro home screen o nello Start Menu per accedere al giornale locale. Non \u00e8 per tutti e potrebbe non andare bene per tutti i periodici, ma \u00e8 un&#8217;opzione. E offrire agli utenti la possibilit\u00e0 di installare la PWA \u00e8 gratis, quindi potreste adottare questa opzione ed assicurarvi che il vostro <a href=\"http:\/\/www.w3.org\/TR\/appmanifest\/\">Web App Manifest<\/a> sia stato creato con attenzione per dare una buona user experience quando la vostra PWA \u00e8 installata.<\/p>\n<h3 id=\"section6\">Transazionale<\/h3>\n<p>Ogni sito che facilita lo scambio di informazioni dovrebbe essere considerato transazionale. Gli esempi pi\u00f9 comuni includono i negozi online, banche e strumenti per trading, sistemi di prenotazione di viaggi e portali di pagamento. Le PWA hanno, in gran parte, gi\u00e0 provato il loro valore in quest&#8217;area. Una rapida occhiata su <a href=\"https:\/\/www.pwastats.com\/\">PWA Stats<\/a> ha rivelato le seguenti \u201cvittorie\u201c:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/www.pwastats.com\/2017\/07\/raphael-hotel\/\">The Raphael Hotels<\/a><\/strong> ha aumentato le website conversion del 20%, le pageview del 66%, le sessioni del 59% e ha ridotto il bounce rate al 51%.<\/li>\n<li><strong><a href=\"https:\/\/www.pwastats.com\/2017\/05\/makemytrip\/\">MakeMyTrip<\/a><\/strong> ha visto un aumento di tre volte nelle conversion e una crescita del 160% nelle shopper session ed \u00e8 tre volte pi\u00f9 probabile che gli shopper che visitano per la prima volta convertano sulla PWA rispetto alla app nativa.<\/li>\n<li><strong><a href=\"https:\/\/www.pwastats.com\/2017\/05\/lancome\/\">Lanc\u00f4me<\/a><\/strong> ha visto una crescita del 17% nelle conversion, un aumento del 51% nelle sessioni mobile in generale e un aumento del 53% solo su iOS.<\/li>\n<\/ul>\n<p>Il colpo di scena dell&#8217;ultimo? iOS non supporta nemmeno Service Workers!<\/p>\n<p>\u00c8 noto che <a href=\"https:\/\/blog.kissmetrics.com\/speed-is-a-killer\/\">migliorare la performance sulle pagine faccia aumentare le conversion<\/a>, quindi i miglioramenti di velocit\u00e0 garantiti da un caching smart e da una strategia offline con Service Workers sono incredibilmente importanti qui. Ma ci sono anche numerosi altri modi in cui le PWA possono portare benefici ai siti transazionali.<\/p>\n<p>Dal momento che ho menzionato l&#8217;offline, aggiunger\u00f2 che la vostra strategia per l&#8217;offline non dovrebbe ridursi a Service Workers. Per un certo tempo ormai, abbiamo usato i cookie per tracciare i dati transazionali del contenuto del carrello, ma i cookie sono sempre stati severamente limitati in termini di quantit\u00e0 di dati che possono memorizzare perch\u00e9 vengono inviati con ogni network request. Con <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IndexedDB_API\">IndexedDB<\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Storage\/LocalStorage\"><code>localStorage<\/code><\/a> e <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/sessionStorage\"><code>sessionStorage<\/code><\/a>, abbiamo la capacit\u00e0 di memorizzare pi\u00f9 dati (e pi\u00f9 ricchi) sulla transazione in corso lato client. Memorizzare questa informazione sul client rende pi\u00f9 semplice recuperare da problemi quali la perdita di rete. Se una transazione fallisce, avrete ancora accesso ai dati (che in caso contrario potrebbero essere andati persi in un POST fallito) e potete anche provare di nuovo la transazione periodicamente o aspettare finch\u00e9 vedete che la rete \u00e8 tornata prima di inviarla. In ogni caso, aggiungere dei messaggi in real time su cosa sta succedendo e in che modo state lavorando per risolverlo sar\u00e0 di grande aiuto per rassicurare i vostri utenti che i loro dati non sono andati persi.<\/p>\n<p>Se il vostro progetto \u00e8 altamente transazionale, dovete sicuramente prendere in considerazione <a href=\"https:\/\/github.com\/WICG\/BackgroundSync\/blob\/master\/explainer.md\">Background Sync<\/a> come mezzo per tenere i dati locali dei vostri utenti sincronizzati con i dati sul server. Per esempio, se state creando un sistema di banking, sar\u00e0 incredibilmente utile per i vostri clienti sincronizzare le informazioni come le transazioni recenti e il saldo corrente. Lo stesso vale per i prezzi attuali dello stock market e il saldo se state lavorando ad una piattaforma di trading.<\/p>\n<p>Nella maggior parte degli scenari transactional, le notifiche possono essere piuttosto utili. Prendendo in prestito dallo scenario che ho citato prima, le notifiche possono essere usate per far sapere a qualcuno quando la loro transazione \u00e8 stata completata (dopo tutto, in una PWA potreste completare la transazione durante un Background Sync quando il vostro sito non gira). Le notifiche sono di due tipi: le <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API\">Web Notifications<\/a> vengono fatte partire con JavaScript in una pagina attiva, le <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Push_API\">Push Notifications<\/a> vengono inviate dal server e possono essere inviate anche quando il sito non \u00e8 aperto. A seconda dello scenario, \u00e8 probabile che avr\u00e0 pi\u00f9 senso un tipo piuttosto che l&#8217;altro. Prestate solo attenzione al fatto che le Push Notifications <a href=\"http:\/\/caniuse.com\/#search=notifications\">non sono cos\u00ec ben supportate<\/a> quanto le Web Notifications\u2026 Per il momento.<\/p>\n<p>Per i siti transazionali a cui si accede frequentemente (e mi rendo conto che \u201cfrequentemente\u201c \u00e8 un termine molto relativo) l&#8217;installabilit\u00e0 di una PWA \u00e8 un&#8217;enorme vittoria. Isolare il vostro sito all&#8217;interno del suo app container permette agli utenti di concentrarsi sul task che hanno sotto mano, senza la distrazione di altri tab. Isola anche i processi che fanno girare il vostro codice dai processi che fanno girare tutti i siti che hanno aperti nel browser. Inoltre, ha meno overhead dal momento che non c&#8217;\u00e8 una chrome del browser che gira contemporaneamente. Tutti questi benefit contribuiscono alla creazione di un&#8217;esperienza semplificata, senza attriti, per gli utenti.<\/p>\n<p>Una volta installata, molti sistemi operativi garantiranno al vostro progetto l&#8217;accesso alle API interne. Magari volete permettere che scelgano dai loro contatti un indirizzo a cui spedire un regalo. O magari vorreste dar loro la possibilit\u00e0 di aggiungere i voli che hanno appena prenotato direttamente al loro calendario. O magari volete integrare il loro assistente virtuale cos\u00ec che l&#8217;app abbia delle capacit\u00e0 vocali. Tutti questi scenari diventano possibili nel contesto di una PWA, che \u00e8 una manna per i siti web transazionali.<\/p>\n<h3 id=\"section7\">Social<\/h3>\n<p>I siti web social \u2014 pensate a Twitter, Facebook, etc. \u2014 sono dei candidati eccellenti per la PWA-ficazione. In effetti, <a href=\"https:\/\/lite.twitter.com\/\">Twitter ha gi\u00e0 intrapreso questa strada<\/a>. I siti social combinano aspetti dei siti periodici e transazionali, quindi ereditano naturalmente molti dei benefit di quegli archetipi. In particolare, le <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Push_API\">Push Notifications<\/a>, sono incredibilmente importanti per siti come questo, dal momento che il re-engagement \u00e8 cruciale per il successo a lungo termine della vostra piattaforma. Sotto questo aspetto \u00e8 importante anche l&#8217;installabilit\u00e0.<\/p>\n<p>La performance, specialmente la velocit\u00e0 di inizializzazione, sar\u00e0 un importante benchmark per i progetti social, dal momento che gli utenti non staranno ad aspettare che tutti gli item del loro feed (con le relative immagini, video, etc.) si carichino. Mettere in cache gli asset del vostro sito aiuter\u00e0 un po&#8217;, ma, a seconda degli obiettivi del vostro progetto e della vostra situazione, potreste prendere in considerazione l&#8217;utilizzo di <a href=\"https:\/\/github.com\/WICG\/BackgroundSync\/blob\/master\/explainer.md\">Background Sync<\/a> per aggiornare i news feed dei vostri utenti cos\u00ec che siano pronti a partire (o quasi) la volta successiva che lo riaprono.<\/p>\n<p>In qualit\u00e0 di progetti transazionali, i siti web social trarranno beneficio anche dall&#8217;accesso a device e API di sistema una volta installati. La maggior parte dei social network, per esempio, richiede il permesso di accedere ai vostri Contatti per cercare amici e colleghi che stanno gi\u00e0 usando il servizio. Se scegliete questa strada \u00e8 imperativo che non abusiate del privilegio cercando di ingannare i vostri utenti spammando i loro amici con informazioni sul vostro servizio. Se non rispettiamo i nostri utenti e le loro informazioni private, corriamo il rischio di perdervi accesso completamente (e di perdere anche gli utenti).<\/p>\n<h3 id=\"section8\">Software<\/h3>\n<p>Quando parliamo di \u201cweb app\u201c, spesso quello che viene in mente naturalmente \u00e8 il software online. Alcuni esempi includono i client di email, gli strumenti di contabilit\u00e0, le suite di project management, i sistemi di version control e gli editor di foto. In molti modi, questi sono software nel senso tradizionale, solo che esistono sul web invece che essere installati localmente\u2026 Finora.<\/p>\n<p>Attraverso la magia delle PWA, questi progetti \u201csoftware as a service\u201d possono diventare applicazioni desktop (e mobile) a pieno titolo. Questo permette ai team che si sono dedicati completamente alle tecnologie web di continuare (o addirittura aumentare il loro investimento in quell&#8217;area senza sacrificare la comodit\u00e0 dell&#8217;installabilit\u00e0 sulle piattaforme native. Ovviamente, ci sono assolutamente alcune valide ragioni perch\u00e9 potreste voler personalizzare un&#8217;esperienza nativa per il vostro software, ma per la stragrande maggioranza dei casi il web offre tutto il necessario per far girare la vostra applicazione\u2026 Questa \u00e8 la primissima ragione per cui si trova sul web.<\/p>\n<p>La memorizzazione dei dati offline, la sincronizzazione in background e l&#8217;accesso al file system aiuta a elevare l&#8217;esperienza per i vostri utenti, rendendo questo archetipo il beneficiario pi\u00f9 ovvio dalle Progressive Web App.<\/p>\n<h3 id=\"section9\">Istituzionale<\/h3>\n<p>Alcuni progetti sono, francamente, troppo estesi per ricadere perfettamente in un archetipo o in un altro. Sto pensando a scuole, grandi aziende, istituzioni finanziarie mastodontiche. Questi progetti sono spesso un&#8217;amalgama di molti o di tutti gli archetipi che ho coperto qui. Come tali, hanno tutti i benefici discussi da quegli archetipi, nel loro contesto ovviamente.<\/p>\n<p>Quando osserviamo i grandi progetti istituzionali, pu\u00f2 essere difficile capire come assemblare una strategia complessiva per farli diventare PWA. La buona notizia \u00e8 che non dovete necessariamente farlo. Potete ritagliare il vostro progetto in molte PWA individuali che possono esistere indipendentemente.<\/p>\n<p>Prendete, per esempio, un sistema di apprendimento online. Potreste creare una PWA per il learning system stesso, ma potreste anche ritagliare ogni singolo corso nella sua PWA installabile, con la sua cache, le sue notifiche, etc. Ha senso farlo perch\u00e9 Service Workers e i Web App Manifest possono avere un loro scope. Potete tenerli raggruppati sotto uno specifico hostname oppure potreste anche assegnare loro un percorso specifico all&#8217;interno della vostra struttura URL. Anche se ovviamente \u00e8 pi\u00f9 complesso, diventa pi\u00f9 semplice da comprendere se pensate a ognuno di quei corsi come ad un template e pensate al Web App Manifest e Service Worker come facenti parte di quel template.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section10\">Tocca a voi<\/h2>\n<p>Le Progressive Web App potrebbero sembrare eccessivamente tecniche o al di fuori dei bisogni del vostro progetto ma in realt\u00e0 non lo sono. Sono solo una scorciatoia per esperienze web di qualit\u00e0, esperienze che possono assolutamente fare una differenza nella vita dei nostri utenti. Se non avete ancora preso in considerazione di realizzare una PWA, spero che questo articolo vi abbia fatto cambiare idea. E se siete gi\u00e0 immersi fino al collo in Service Workers, magari vi ha fatto venire delle idee per nuovi modi di affrontare i progetti a cui state lavorando.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Una Progressive Web App (PWA) \u00e8 un sito web con poteri speciali. Malgrado quello che potreste aver sentito, la maggior parte dei siti web e, soprattutto i loro lettori, possono trarre benefici dal loro diventare una PWA. Ed \u00e8 cos\u00ec semplice! Il nuovo editor in chief di A List Apart, Aaron Gustafson, ci spiega tutto.<\/p>\n","protected":false},"author":818,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[269,190],"tags":[],"coauthors":[301],"class_list":["post-760","article","type-article","status-publish","hentry","category-application-development","category-numero-212-5-settembre-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=760"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=760"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}