Acadevmy - PWA Overview
- 2. Chi sono? Developer per scelta e per passione, amante di nerdaggini di ogni tipo ed amante della condivisione del sapere! Da non troppo anche (quasi) imprenditore! Francesco Sciuti https://www.acadevmy.it/intro
- 5. Le tecnologie che prediligiamo Francesco Sciuti https://www.acadevmy.it/intro
- 6. We need you! Francesco Sciuti https://www.acadevmy.it/intro
- 11. Progressive Web App Francesco Sciuti https://www.acadevmy.it/intro ma basta marchette e parliamo di...
- 12. Cosa sono le PWA? Progressive Web App 竪 un termine che si riferisce ad applicazioni web che vengono sviluppate e caricate come normali pagine web, ma che si comportano in modo simile alle applicazioni native quando utilizzate su un dispositivo mobile Wikipedia Francesco Sciuti https://www.acadevmy.it/intro
- 13. Cosa sono le PWA? Progressive Web App sono delle comuni web application che sfruttano delle tecnologie (alcune neanche cos狸 nuove) che consentono allutente di vivere unesperienza molto simile a quella nativa, che sia essa mobile o desktop Me medesimo Ciccio Sciuti 1 - 0 Wikipedia Ti竪! Francesco Sciuti https://www.acadevmy.it/intro
- 14. Affidabilit Funzionano anche in caso di instabilit di rete Rapidit Si caricano istantaneamente e rispondono rapidamente alle interazioni dell'utente Coinvolgimento Sembrano applicazioni native sul dispositivo e offrono un'esperienza utente ottimale Cosa distingue una PWA? Francesco Sciuti https://www.acadevmy.it/intro
- 15. Progressive Grazie al Progressive Enhancement da cui ereditano parte del nome Responsive Si adattano quindi ai dispositivi che le ospitano Network Independent Possono lavorare offline! App-like Possono essere esteticamente uguali alle app native, quindi ad esempio a tutto schermo Continuous Update Hanno un processo di aggiornamento molto pi湛 semplice in quanto web application Quali caratteristiche hanno? Safe (HTTPS) Viaggiano su protocollo sicuro Discoverable Facilmente identi鍖cabili come applicazioni ma rintracciabili dai motori di ricerca Re-engageable Possono richiamare linteresse degli utenti tramite le Push Noti鍖cation Installable Possiamo installarle sui nostri dispositivi come app native Linkable Ci basta un url per raggiungerle Francesco Sciuti https://www.acadevmy.it/intro
- 17. Add to Home Screen Cache Management Push Noti鍖cation App Shell Devices Interaction Persistance ... Come fanno a fare tutto ci嘆? Francesco Sciuti https://www.acadevmy.it/intro
- 18. Web Manifest Service Workers Server Side Rendering Web API Intersection Observer, Push API, Noti鍖cation API, Cache API, etc... Client-side Storage IndexedDB Native App Integration Trusted Web Activities/WebAPK/APPX HTTPS Con quali tecnologie? Francesco Sciuti https://www.acadevmy.it/intro
- 19. Vediamo insieme le principali... Francesco Sciuti https://www.acadevmy.it/intro
- 20. Manifest Un semplice 鍖le JSON che consente di descrivere il comportamento della nostra PWA Il 鍖le manifest contiene tutte le informazioni necessarie allambiente che dovr eseguire la nostra app, consentendo quindi allenvironment ospitante di sapere quali sono il titolo o le icone da utilizzare per installare lapplicazione, lo scope di esecuzione, alcuni aspetti estetici, etc... Francesco Sciuti https://www.acadevmy.it/intro
- 21. ManifestComunemente il 鍖le ha estensione .webmanifest Nome Icone Url di avvio Colore di fondo e del tema Modalit di visualizzazione Scope di esecuzione Orientamento Splash Screen MDN Manifest Apple Way Francesco Sciuti https://www.acadevmy.it/intro
- 23. Service Workers Sposando alcune API consentono di gestire funzionalit quali le noti鍖che push, la gestione offline e la sincronizzazione in background. Il cuore delle nostre PWA Francesco Sciuti https://www.acadevmy.it/intro
- 24. Service Workers Sono degli script che vengono eseguiti dal browser in processi separati rispetto alla pagina che li registra e che lavorano quindi in background. I SW lavorano come dei proxy ed intercettano tutto le richieste HTTP dellapplicazione e decidono come rispondere secondo la logica che svilupperemo. Francesco Sciuti https://www.acadevmy.it/intro
- 25. Service Workers Gestione della Cache Gestione Push Noti鍖cation Sync dei dati in background Lifecycle programmabile Processo separato e con un proprio scope di esecuzione MDN - Service Workers Overview MDN - Service Workers Offline Implementation IsServiceWorkerReady? Offline Cookbook Francesco Sciuti https://www.acadevmy.it/intro
- 28. Service Workers Le strategie - Cache Only Francesco Sciuti https://www.acadevmy.it/intro
- 29. Service Workers Le strategie - Network Only Francesco Sciuti https://www.acadevmy.it/intro
- 30. Service Workers Le strategie - Cache First Francesco Sciuti https://www.acadevmy.it/intro
- 31. Service Workers Le strategie - Network First Francesco Sciuti https://www.acadevmy.it/intro
- 32. Service Workers Le strategie - Stale-While-Revalidate Francesco Sciuti https://www.acadevmy.it/intro
- 33. Web API Gli ingredienti indispensabili per unottima ricetta Le Web API sono ormai molteplici e supportate rapidamente da tutti i browser sul mercato, e molte di esse sono fondamentali per creare PWA e far si che siano appunto progressive. Francesco Sciuti https://www.acadevmy.it/intro
- 34. Service Worker API Utili per la gestione proxy dello stato del network e della comunicazione server. Noti鍖cation/Push API Due API usate per con鍖gurare e mostrare le noti鍖che allutente, ed iscriversi a un servizio push e ricevere messaggi push Cache API Possiamo installarle sui nostri dispositivi come app native Fetch API Un modo 鍖essibile e potente per ottenere risorse locali o remote. Intersection Observer Consente di con鍖gurare un callback che viene triggerato ogni volta che un elemento, chiamato target, interseca il viewport o un ulteriore elemento speci鍖cato. Qualche API da usare FormData API Fornisce un modo per costruire facilmente un insieme di coppie chiave / valore che rappresentano i campi modulo e i loro valori, da utilizzare con il metodo XMLHttpRequest.send () Channel Messaging API Consente l'esecuzione di due script separati in contesti di navigazione diversi allegati allo stesso documento. Background Sync Consente di rimandare le azioni 鍖no a quando l'utente non ha una connettivit stabile. Payment Request API Standard aperto che sostituisce i 鍖ussi di pagamento tradizionali consentendo ai commercianti di richiedere e accettare qualsiasi pagamento in una singola chiamata API. Streams API Francesco Sciuti https://www.acadevmy.it/intro
- 35. Push Noti鍖cation Sebbene non siano ancora supportati su iOS, le nostre PWA possono inviare noti鍖che push al browser con l'API Push. L'API Push viene utilizzata insieme alle Noti鍖cation API per visualizzare il messaggio. Il vantaggio 竪 che l'API Push consente la consegna della noti鍖ca anche quando l'utente non naviga sulla PWA, poich辿 sono build on top sui Service Workers. Francesco Sciuti https://www.acadevmy.it/intro
- 36. Push Noti鍖cation Un utente visita la PWA (quindi protetta tramite HTTPS); Viene richiesta l'autorizzazione per visualizzare le noti鍖che push; Se l'utente ha concesso l'autorizzazione, il token del dispositivo (endpoint) viene inviato al Server e archiviato; Il Service Worker tiene docchio la ricezione di una noti鍖ca push; Il Server invia una richiesta POST HTTP all'endpoint (che 竪 un URL che contiene il token del dispositivo); Quando il Service Worker riceve una noti鍖ca esegue si prende carico della gestione dell'evento, del recupero dei dati di noti鍖ca dal server e della visualizzazione della noti鍖ca all'utente. Francesco Sciuti https://www.acadevmy.it/intro
- 40. App Shell Il minimo indispensabile per un rendering veloce Per App Shell intendiamo tutto lHTML, CSS e JS minimo ed indispensabile utile per essere renderizzato immediatamente dal browser in modo da offrire allutente un immediato feedback visivo ed evitare labbandono della nostra PWA. Francesco Sciuti https://www.acadevmy.it/intro
- 41. App Shell I Service Worker (sempre loro!) memorizzano l'interfaccia di base (la shell) della web application in modalit Responsive Web Design. Questa shell fornisce un layout statico iniziale,nella quale il contenuto pu嘆 essere caricato sia progressivamente che dinamicamente immediatamente. Francesco Sciuti https://www.acadevmy.it/intro
- 42. Mobile e Desktop Le PWA offrono unesperienza native-like sia su mobile che su desktop. Attualmente il supporto 竪 offerto per lo pi湛 da Chrome ma ci si sta lavorando anche da altri fronti! Francesco Sciuti https://www.acadevmy.it/intro
- 43. Mobile e Desktop Francesco Sciuti https://www.acadevmy.it/intro
- 44. Mobile e Desktop Francesco Sciuti https://www.acadevmy.it/intro
- 45. Gli store La pubblicazione sugli store di applicazioni sono ufficialmente supportate su Google Play Store e Windows Store In queste occasioni sar necessario lavorare su tecnologie come TWA (Trusted Web Activity) o APPX Per Apple 竪 necessario invece continuare a lavorare come avremmo fatto con unapp Cordova con tutte le limitazioni che impone lApp Store. Francesco Sciuti https://www.acadevmy.it/intro
- 46. TWA in breve Costruisci una buona PWA Installa Android Studio Iscriviti a Google Play (e paga $25) Clona TWA Starter App per Android Aggiorna app / build.gradle Crea un keystore per 鍖rmare lapp Crea un Digital Asset Links e distribuiscilo Genera un APK 鍖rmato Carica il APK 鍖rmato per Google Play Francesco Sciuti https://www.acadevmy.it/intro
- 47. La compatibilit I browser sono molto avanti nellimplementazione delle tecnologie utili per le PWA ma ancora la compatibilit non 竪 completa (soprattutto su IOS). Supporto parziale alle gesture Supporto parziale al Manifest Web API disponibili Tags speci鍖ci per IOS Add to Home Screen Splash Screen Supporto alle Push Noti鍖cation Ciclo di Vita della PWA Orientation IOS Status | IOS 12.2 Status Francesco Sciuti https://www.acadevmy.it/intro
- 49. Qualche Links Docs Google Developer PWA Docs MDN PWA Docs ServiceWorkers Cookbook PWA Checklist IsServiceWorkerReady? PWA & IOS 12.2 PWA & IOS 11.3 Tools Lighthouse Report Viewer PWABuilder | PWA Starter Kit Workbox | Workbox in NG Web-Push Case Studies Pinterest PWA Maps Go Tinder PWA Twitter Lite Examples / Labs Your First PWA Google PWA Training HNPWA Directory PWA Stats AppScope Francesco Sciuti https://www.acadevmy.it/intro
- 51. We need you! Francesco Sciuti https://www.acadevmy.it/intro
- 55. Grazie a tutti! Francesco Sciuti https://www.acadevmy.it/intro