SlideShare a Scribd company logo
DotNetCode.IT
Microsoft .Net Coding Community
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Fluent Design e
Progressive Web App (PWA)
Benvenuti
DotNetCode.IT
Microsoft .Net Coding Community
DotNetCode.IT
Microsoft .Net Coding Community
DotNetCode.IT
Microsoft .Net Coding Community
Speaker
Simone Natalini
AlmavivA
DotNetCode.IT
Microsoft .Net Coding Community
AGENDA
• Introduzione
• Cosa sono le Progressive Web App
• Tecnologie di una PWA
• Demo con ASP.NET Core e modelli di distribuzione
• Q&A
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Progressive Web App
DotNetCode.IT
Microsoft .Net Coding Community
Introduzione
Il termine «Progressive Web App» è stato coniato dagli
ingegneri di Google nel 2015, nonostante sia Apple che Mozilla
avessero già rilasciato anni prima dei framework per distribuire
applicazioni sulle rispettive piattaforme sotto una forma
diversa
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Cosa sono le Progressive Web App
Una Progressive Web App è un sito o una web app web
sviluppata seguendo una serie di pattern e sfruttando delle
tecnologie che le consentono di sfruttare al massimo sia le
normali funzionalità di un moderno sito web che quelle native
del sistema operativo.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Cosa costituisce una Progressive Web App?
Una PWA è fatta di un insieme di tecnologie, pattern e in generale di
una nuova «filosofia» con il quale andiamo a costruire i nostri siti web.
Un sito web o una app possono essere considerati una PWA quando
rispettano alcuni requisiti o quando implementano diverse feature.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Cosa costituisce una Progressive Web App?
In generale, una PWA può essere considerata una PWA quando è:
• Ricercabile: deve essere facilmente ricercabile e trovabile su un
motore di ricerca
• Installabile: l’utente non deve «fare fatica» nell’installare l’app
• Condivisibile: condividere l’app deve essere semplice come
condividere un link
• Indipendente dalla rete: l’app deve funzionare offline
• Autonoma: l’app deve poter mandare contenuti all’utente (es.
notifiche push) senza dover essere attivata dal browser
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Cosa costituisce una Progressive Web App?
• Responsive: in modo da poter essere eseguita e usata correttamente
su ogni dispositivo
• Sicura: essendo installata e interagendo con il sistema operativo del
dispositivo, il suo contenuto deve essere sicuro.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA
Una Progressive Web App si basa principalmente su un insieme di
tecnologie standard:
• Web Manifest: un file JSON che segue uno schema standard con il
quale la web app si «presenta»
• Service Workers: un file Javascript che opera come worker in
background e fa da proxy virtuale tra le risorse del browser e la rete
(anche quando non c’è)
• Web Storage/IndexedDB: entrambe possono essere lo storage che
consente all’app di mantenere e persistere informazioni
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA: Il web manifest
Il Web Manifest è un file JSON che contiene diverse
informazioni fondamentali, come il nome, la descrizione, le
icone dell’app, la versione, oltre che le informazioni su come
comportarsi quando viene installata sul device dell’utente. Il
manifest deve essere presente nell’<head> della pagina
principale del nostro sito, e può essere disponibile sia in
anonimo che tramite l’utilizzo di credenziali.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA: Il service worker
Il Service Worker è un proxy virtuale che opera tra il browser e
la rete, anche quando quest’ultima non c’è. Il suo compito
principale è quello di gestire il caching degli asset dell’app in
modo tale da fornirli quando richiesti (soprattutto quando si è
offline)
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA: Il service worker
Il Service Worker può essere molto potente, ed essere utilizzato per
qualcosa che va oltre la gestione del caching; infatti può eseguire
pesanti calcoli, ricevere e inviare notifiche e eseguire task in background
senza impattare minimamente sulle performance del sito, girando in un
thread separato da quello del sito.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA: Il service worker
Il Service Worker inoltre può agire interamente da «rete», prenderne
il controllo quando si è online, manipolare le richieste in uscita e in
entrata dall’app (e in generale nel contesto del browser) servendo
contenuti cachati.
Proprio per questo, onde evitare utilizzi malevoli, si può registrare un
service worker solo se il sito viene servito in HTTPS.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA: IndexedDB e Cache API
Come ogni app, per salvare dei dati, le PWA principalmente
sfruttano due tecnologie: IndexedDB e Cache API
L’IndexedDB è un database system transazionale, un quasi
normale RDBMS, ma contrariamente a quest’ultimi storicizza i
dati sotto forma di chiave-oggetto piuttosto che in forma
tabellare.
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Tecnologie di una PWA: IndexedDB e Cache API
La Cache API invece è un sistema che gestisce, memorizza e
restituisce le richieste inviate dall’app e le corrispettive risposte.
Lavora a stretto giro con il Service Worker, dato che infatti il
suo scopo principale è quello di servire da backend al Service
Worker quando l’app è offline, avendo previamente “cachato”
tutto il necessario
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
DEMO
DotNetCode.IT
Microsoft .Net Coding Community
Q&A
DotNetCode.IT
Microsoft .Net Coding Community
Link utili
• https://developers.google.com/web/ilt/pwa/introduction-to-
service-worker
• https://developer.mozilla.org/en-
US/docs/Web/Progressive_web_apps
• https://en.wikipedia.org/wiki/Progressive_web_applications
• https://mdn.github.io/pwa-examples/a2hs/
• https://pwabuilder.com
• https://github.com/madskristensen/WebEssentials.AspNetCore.
ServiceWorker
www.dotnetcode.it
DotNetCode.IT
Microsoft .Net Coding Community
Grazie!
DotNetCode.IT
Microsoft .Net Coding Community
Grazie a Tutti!
DotNetCode.IT
Microsoft .Net Coding Community
DotNetCode.IT
Microsoft .Net Coding Community
Follow US!
www.dotnetcode.it
https://www.facebook.com/DotNetCode.IT
https://twitter.com/DotNetCodeIT
https://plus.google.com/+DotnetcodeIt

More Related Content

What's hot

Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRail
Stefano Ottaviani
 
.NET Core, ASP.NET Core e Linux per il Mobile
.NET Core, ASP.NET Core e Linux per il Mobile.NET Core, ASP.NET Core e Linux per il Mobile
.NET Core, ASP.NET Core e Linux per il Mobile
Pietro Libro
 
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformAngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
Gabriele Gaggi
 
Introduzione a Ruby On Rails
Introduzione a Ruby On RailsIntroduzione a Ruby On Rails
Introduzione a Ruby On Rails
Luca Mearelli
 
Generazione Dinamica di Codice in .NET
Generazione Dinamica di Codice in .NETGenerazione Dinamica di Codice in .NET
Generazione Dinamica di Codice in .NET
Stefano Ottaviani
 
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalySMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
Paolo Dadda
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
DotNetMarche
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Luca Fortin
 
Christmas greetings cards with blazor
Christmas greetings cards with blazorChristmas greetings cards with blazor
Christmas greetings cards with blazor
Nicolò Carandini
 
Wasm and Blazor CDays keynote
Wasm and Blazor CDays keynoteWasm and Blazor CDays keynote
Wasm and Blazor CDays keynote
Nicolò Carandini
 
Portofino per Jug Padova
Portofino per Jug PadovaPortofino per Jug Padova
Portofino per Jug Padova
Giampiero Granatella
 
Blazor per uno sviluppatore Web Form
Blazor per uno sviluppatore Web FormBlazor per uno sviluppatore Web Form
Blazor per uno sviluppatore Web Form
Andrea Dottor
 
Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0
Alessandro Forte
 
Sviluppo di applicazioni web in ambito mobile
Sviluppo di applicazioni web in ambito mobileSviluppo di applicazioni web in ambito mobile
Sviluppo di applicazioni web in ambito mobile
Roberto Cappelletti
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
Giuneco S.r.l
 
Microsoft Fast - Overview
Microsoft Fast - OverviewMicrosoft Fast - Overview
Microsoft Fast - Overview
Francesco Sciuti
 
Framework per la realizzazione di ria
Framework per la realizzazione di riaFramework per la realizzazione di ria
Framework per la realizzazione di ria
Lorenzo Bortolotto
 
I linguaggi del web - seconda edizione (3° giornata)
I linguaggi del web - seconda edizione (3° giornata)I linguaggi del web - seconda edizione (3° giornata)
I linguaggi del web - seconda edizione (3° giornata)
Diego La Monica
 

What's hot (18)

Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRail
 
.NET Core, ASP.NET Core e Linux per il Mobile
.NET Core, ASP.NET Core e Linux per il Mobile.NET Core, ASP.NET Core e Linux per il Mobile
.NET Core, ASP.NET Core e Linux per il Mobile
 
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformAngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
 
Introduzione a Ruby On Rails
Introduzione a Ruby On RailsIntroduzione a Ruby On Rails
Introduzione a Ruby On Rails
 
Generazione Dinamica di Codice in .NET
Generazione Dinamica di Codice in .NETGenerazione Dinamica di Codice in .NET
Generazione Dinamica di Codice in .NET
 
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalySMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Christmas greetings cards with blazor
Christmas greetings cards with blazorChristmas greetings cards with blazor
Christmas greetings cards with blazor
 
Wasm and Blazor CDays keynote
Wasm and Blazor CDays keynoteWasm and Blazor CDays keynote
Wasm and Blazor CDays keynote
 
Portofino per Jug Padova
Portofino per Jug PadovaPortofino per Jug Padova
Portofino per Jug Padova
 
Blazor per uno sviluppatore Web Form
Blazor per uno sviluppatore Web FormBlazor per uno sviluppatore Web Form
Blazor per uno sviluppatore Web Form
 
Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0
 
Sviluppo di applicazioni web in ambito mobile
Sviluppo di applicazioni web in ambito mobileSviluppo di applicazioni web in ambito mobile
Sviluppo di applicazioni web in ambito mobile
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
 
Microsoft Fast - Overview
Microsoft Fast - OverviewMicrosoft Fast - Overview
Microsoft Fast - Overview
 
Framework per la realizzazione di ria
Framework per la realizzazione di riaFramework per la realizzazione di ria
Framework per la realizzazione di ria
 
I linguaggi del web - seconda edizione (3° giornata)
I linguaggi del web - seconda edizione (3° giornata)I linguaggi del web - seconda edizione (3° giornata)
I linguaggi del web - seconda edizione (3° giornata)
 

Similar to Meetup Fluent Design e Progressive Web App

Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptxImpara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
EduardCapanu
 
Esposizione RIA
Esposizione RIAEsposizione RIA
Esposizione RIA
diodorato
 
Designing with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDesigning with microservices - Daniele Mondello
Designing with microservices - Daniele Mondello
Daniele Mondello
 
Swagger per tutti
Swagger per tuttiSwagger per tutti
Swagger per tutti
Nicolò Carandini
 
Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini
Whymca
 
SVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROIDSVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROID
Luca Masini
 
Applicazioni web based
Applicazioni web basedApplicazioni web based
Applicazioni web based
Marco Liverani
 
Modi innovativi per costruire App
Modi innovativi per costruire AppModi innovativi per costruire App
Modi innovativi per costruire App
Commit University
 
Framework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostackFramework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostack
Stefano Spagnolo
 
Presentazione Web Site
Presentazione Web SitePresentazione Web Site
Presentazione Web Site
Web Site srl
 
Vibecode presentazione
Vibecode presentazioneVibecode presentazione
Vibecode presentazione
The Blue Seed
 
WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
FrancescoGiammanco1
 
Introduzione a DotNetNuke
Introduzione a DotNetNukeIntroduzione a DotNetNuke
Introduzione a DotNetNuke
Massimo Bonanni
 
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
DrupalDay
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un framework
Giovanni Buffa
 
Sviluppare Azure Web Apps
Sviluppare Azure Web AppsSviluppare Azure Web Apps
Sviluppare Azure Web Apps
Andrea Dottor
 
Cert03 70-486 developing asp.net mvc 4 web applications
Cert03   70-486 developing asp.net mvc 4 web applicationsCert03   70-486 developing asp.net mvc 4 web applications
Cert03 70-486 developing asp.net mvc 4 web applications
DotNetCampus
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
dotnetcode
 
Cert04 70-484 - essentials of developing windows store apps
Cert04   70-484 - essentials of developing windows store appsCert04   70-484 - essentials of developing windows store apps
Cert04 70-484 - essentials of developing windows store apps
DotNetCampus
 
SAL 2018 - Ditech-News
SAL 2018 - Ditech-NewsSAL 2018 - Ditech-News
SAL 2018 - Ditech-News
Mauro Sanfilippo
 

Similar to Meetup Fluent Design e Progressive Web App (20)

Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptxImpara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptx
 
Esposizione RIA
Esposizione RIAEsposizione RIA
Esposizione RIA
 
Designing with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDesigning with microservices - Daniele Mondello
Designing with microservices - Daniele Mondello
 
Swagger per tutti
Swagger per tuttiSwagger per tutti
Swagger per tutti
 
Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini
 
SVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROIDSVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROID
 
Applicazioni web based
Applicazioni web basedApplicazioni web based
Applicazioni web based
 
Modi innovativi per costruire App
Modi innovativi per costruire AppModi innovativi per costruire App
Modi innovativi per costruire App
 
Framework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostackFramework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostack
 
Presentazione Web Site
Presentazione Web SitePresentazione Web Site
Presentazione Web Site
 
Vibecode presentazione
Vibecode presentazioneVibecode presentazione
Vibecode presentazione
 
WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
 
Introduzione a DotNetNuke
Introduzione a DotNetNukeIntroduzione a DotNetNuke
Introduzione a DotNetNuke
 
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un framework
 
Sviluppare Azure Web Apps
Sviluppare Azure Web AppsSviluppare Azure Web Apps
Sviluppare Azure Web Apps
 
Cert03 70-486 developing asp.net mvc 4 web applications
Cert03   70-486 developing asp.net mvc 4 web applicationsCert03   70-486 developing asp.net mvc 4 web applications
Cert03 70-486 developing asp.net mvc 4 web applications
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
 
Cert04 70-484 - essentials of developing windows store apps
Cert04   70-484 - essentials of developing windows store appsCert04   70-484 - essentials of developing windows store apps
Cert04 70-484 - essentials of developing windows store apps
 
SAL 2018 - Ditech-News
SAL 2018 - Ditech-NewsSAL 2018 - Ditech-News
SAL 2018 - Ditech-News
 

More from dotnetcode

Azure Meetup: Novità CosmosDB modalità Serverless e Cognitive Services
Azure Meetup: Novità CosmosDB modalità Serverless e Cognitive ServicesAzure Meetup: Novità CosmosDB modalità Serverless e Cognitive Services
Azure Meetup: Novità CosmosDB modalità Serverless e Cognitive Services
dotnetcode
 
Azure Meetup: Understanding Azure App Service Plan
Azure Meetup: Understanding Azure App Service PlanAzure Meetup: Understanding Azure App Service Plan
Azure Meetup: Understanding Azure App Service Plan
dotnetcode
 
Azure Meetup: Keep your secrets and configurations safe in azure!
Azure Meetup: Keep your secrets and configurations safe in azure!Azure Meetup: Keep your secrets and configurations safe in azure!
Azure Meetup: Keep your secrets and configurations safe in azure!
dotnetcode
 
Azure Meetup: Azure Storage/Datalake Deep Dive
Azure Meetup: Azure Storage/Datalake Deep DiveAzure Meetup: Azure Storage/Datalake Deep Dive
Azure Meetup: Azure Storage/Datalake Deep Dive
dotnetcode
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOps
dotnetcode
 
Meetup ASP.NET Core e Kubernetes
Meetup ASP.NET Core e KubernetesMeetup ASP.NET Core e Kubernetes
Meetup ASP.NET Core e Kubernetes
dotnetcode
 
How to create custom modules for Visual Studio
How to create custom modules for Visual StudioHow to create custom modules for Visual Studio
How to create custom modules for Visual Studio
dotnetcode
 
Exploring VS Code
Exploring VS CodeExploring VS Code
Exploring VS Code
dotnetcode
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOps
dotnetcode
 
Meetup ASP.NET Core 2 e Docker
Meetup ASP.NET Core 2 e Docker Meetup ASP.NET Core 2 e Docker
Meetup ASP.NET Core 2 e Docker
dotnetcode
 
Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1
Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1
Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1
dotnetcode
 
Meetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure FunctionsMeetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure Functions
dotnetcode
 
Meetup DotNetCode Owasp
Meetup DotNetCode Owasp Meetup DotNetCode Owasp
Meetup DotNetCode Owasp
dotnetcode
 
Meetup .NET & Micro ORM
Meetup .NET & Micro ORMMeetup .NET & Micro ORM
Meetup .NET & Micro ORM
dotnetcode
 
Webhooks Meetup
Webhooks MeetupWebhooks Meetup
Webhooks Meetup
dotnetcode
 
Meetup DotNetCode Dependency Injection
Meetup DotNetCode Dependency InjectionMeetup DotNetCode Dependency Injection
Meetup DotNetCode Dependency Injection
dotnetcode
 
Presentazione DotNetSchool
Presentazione DotNetSchoolPresentazione DotNetSchool
Presentazione DotNetSchool
dotnetcode
 

More from dotnetcode (17)

Azure Meetup: Novità CosmosDB modalità Serverless e Cognitive Services
Azure Meetup: Novità CosmosDB modalità Serverless e Cognitive ServicesAzure Meetup: Novità CosmosDB modalità Serverless e Cognitive Services
Azure Meetup: Novità CosmosDB modalità Serverless e Cognitive Services
 
Azure Meetup: Understanding Azure App Service Plan
Azure Meetup: Understanding Azure App Service PlanAzure Meetup: Understanding Azure App Service Plan
Azure Meetup: Understanding Azure App Service Plan
 
Azure Meetup: Keep your secrets and configurations safe in azure!
Azure Meetup: Keep your secrets and configurations safe in azure!Azure Meetup: Keep your secrets and configurations safe in azure!
Azure Meetup: Keep your secrets and configurations safe in azure!
 
Azure Meetup: Azure Storage/Datalake Deep Dive
Azure Meetup: Azure Storage/Datalake Deep DiveAzure Meetup: Azure Storage/Datalake Deep Dive
Azure Meetup: Azure Storage/Datalake Deep Dive
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOps
 
Meetup ASP.NET Core e Kubernetes
Meetup ASP.NET Core e KubernetesMeetup ASP.NET Core e Kubernetes
Meetup ASP.NET Core e Kubernetes
 
How to create custom modules for Visual Studio
How to create custom modules for Visual StudioHow to create custom modules for Visual Studio
How to create custom modules for Visual Studio
 
Exploring VS Code
Exploring VS CodeExploring VS Code
Exploring VS Code
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOps
 
Meetup ASP.NET Core 2 e Docker
Meetup ASP.NET Core 2 e Docker Meetup ASP.NET Core 2 e Docker
Meetup ASP.NET Core 2 e Docker
 
Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1
Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1
Meetup DotNetCode Settembre 2018 - ASP.NET Core 2.1
 
Meetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure FunctionsMeetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure Functions
 
Meetup DotNetCode Owasp
Meetup DotNetCode Owasp Meetup DotNetCode Owasp
Meetup DotNetCode Owasp
 
Meetup .NET & Micro ORM
Meetup .NET & Micro ORMMeetup .NET & Micro ORM
Meetup .NET & Micro ORM
 
Webhooks Meetup
Webhooks MeetupWebhooks Meetup
Webhooks Meetup
 
Meetup DotNetCode Dependency Injection
Meetup DotNetCode Dependency InjectionMeetup DotNetCode Dependency Injection
Meetup DotNetCode Dependency Injection
 
Presentazione DotNetSchool
Presentazione DotNetSchoolPresentazione DotNetSchool
Presentazione DotNetSchool
 

Meetup Fluent Design e Progressive Web App

  • 1. DotNetCode.IT Microsoft .Net Coding Community www.dotnetcode.it
  • 2. DotNetCode.IT Microsoft .Net Coding Community Fluent Design e Progressive Web App (PWA) Benvenuti DotNetCode.IT Microsoft .Net Coding Community
  • 4. DotNetCode.IT Microsoft .Net Coding Community Speaker Simone Natalini AlmavivA
  • 5. DotNetCode.IT Microsoft .Net Coding Community AGENDA • Introduzione • Cosa sono le Progressive Web App • Tecnologie di una PWA • Demo con ASP.NET Core e modelli di distribuzione • Q&A www.dotnetcode.it
  • 6. DotNetCode.IT Microsoft .Net Coding Community Progressive Web App
  • 7. DotNetCode.IT Microsoft .Net Coding Community Introduzione Il termine «Progressive Web App» è stato coniato dagli ingegneri di Google nel 2015, nonostante sia Apple che Mozilla avessero già rilasciato anni prima dei framework per distribuire applicazioni sulle rispettive piattaforme sotto una forma diversa www.dotnetcode.it
  • 8. DotNetCode.IT Microsoft .Net Coding Community Cosa sono le Progressive Web App Una Progressive Web App è un sito o una web app web sviluppata seguendo una serie di pattern e sfruttando delle tecnologie che le consentono di sfruttare al massimo sia le normali funzionalità di un moderno sito web che quelle native del sistema operativo. www.dotnetcode.it
  • 9. DotNetCode.IT Microsoft .Net Coding Community Cosa costituisce una Progressive Web App? Una PWA è fatta di un insieme di tecnologie, pattern e in generale di una nuova «filosofia» con il quale andiamo a costruire i nostri siti web. Un sito web o una app possono essere considerati una PWA quando rispettano alcuni requisiti o quando implementano diverse feature. www.dotnetcode.it
  • 10. DotNetCode.IT Microsoft .Net Coding Community Cosa costituisce una Progressive Web App? In generale, una PWA può essere considerata una PWA quando è: • Ricercabile: deve essere facilmente ricercabile e trovabile su un motore di ricerca • Installabile: l’utente non deve «fare fatica» nell’installare l’app • Condivisibile: condividere l’app deve essere semplice come condividere un link • Indipendente dalla rete: l’app deve funzionare offline • Autonoma: l’app deve poter mandare contenuti all’utente (es. notifiche push) senza dover essere attivata dal browser www.dotnetcode.it
  • 11. DotNetCode.IT Microsoft .Net Coding Community Cosa costituisce una Progressive Web App? • Responsive: in modo da poter essere eseguita e usata correttamente su ogni dispositivo • Sicura: essendo installata e interagendo con il sistema operativo del dispositivo, il suo contenuto deve essere sicuro. www.dotnetcode.it
  • 12. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA Una Progressive Web App si basa principalmente su un insieme di tecnologie standard: • Web Manifest: un file JSON che segue uno schema standard con il quale la web app si «presenta» • Service Workers: un file Javascript che opera come worker in background e fa da proxy virtuale tra le risorse del browser e la rete (anche quando non c’è) • Web Storage/IndexedDB: entrambe possono essere lo storage che consente all’app di mantenere e persistere informazioni www.dotnetcode.it
  • 13. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA: Il web manifest Il Web Manifest è un file JSON che contiene diverse informazioni fondamentali, come il nome, la descrizione, le icone dell’app, la versione, oltre che le informazioni su come comportarsi quando viene installata sul device dell’utente. Il manifest deve essere presente nell’<head> della pagina principale del nostro sito, e può essere disponibile sia in anonimo che tramite l’utilizzo di credenziali. www.dotnetcode.it
  • 14. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA: Il service worker Il Service Worker è un proxy virtuale che opera tra il browser e la rete, anche quando quest’ultima non c’è. Il suo compito principale è quello di gestire il caching degli asset dell’app in modo tale da fornirli quando richiesti (soprattutto quando si è offline) www.dotnetcode.it
  • 15. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA: Il service worker Il Service Worker può essere molto potente, ed essere utilizzato per qualcosa che va oltre la gestione del caching; infatti può eseguire pesanti calcoli, ricevere e inviare notifiche e eseguire task in background senza impattare minimamente sulle performance del sito, girando in un thread separato da quello del sito. www.dotnetcode.it
  • 16. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA: Il service worker Il Service Worker inoltre può agire interamente da «rete», prenderne il controllo quando si è online, manipolare le richieste in uscita e in entrata dall’app (e in generale nel contesto del browser) servendo contenuti cachati. Proprio per questo, onde evitare utilizzi malevoli, si può registrare un service worker solo se il sito viene servito in HTTPS. www.dotnetcode.it
  • 17. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA: IndexedDB e Cache API Come ogni app, per salvare dei dati, le PWA principalmente sfruttano due tecnologie: IndexedDB e Cache API L’IndexedDB è un database system transazionale, un quasi normale RDBMS, ma contrariamente a quest’ultimi storicizza i dati sotto forma di chiave-oggetto piuttosto che in forma tabellare. www.dotnetcode.it
  • 18. DotNetCode.IT Microsoft .Net Coding Community Tecnologie di una PWA: IndexedDB e Cache API La Cache API invece è un sistema che gestisce, memorizza e restituisce le richieste inviate dall’app e le corrispettive risposte. Lavora a stretto giro con il Service Worker, dato che infatti il suo scopo principale è quello di servire da backend al Service Worker quando l’app è offline, avendo previamente “cachato” tutto il necessario www.dotnetcode.it
  • 21. DotNetCode.IT Microsoft .Net Coding Community Link utili • https://developers.google.com/web/ilt/pwa/introduction-to- service-worker • https://developer.mozilla.org/en- US/docs/Web/Progressive_web_apps • https://en.wikipedia.org/wiki/Progressive_web_applications • https://mdn.github.io/pwa-examples/a2hs/ • https://pwabuilder.com • https://github.com/madskristensen/WebEssentials.AspNetCore. ServiceWorker www.dotnetcode.it
  • 23. DotNetCode.IT Microsoft .Net Coding Community Grazie a Tutti! DotNetCode.IT Microsoft .Net Coding Community
  • 24. DotNetCode.IT Microsoft .Net Coding Community Follow US! www.dotnetcode.it https://www.facebook.com/DotNetCode.IT https://twitter.com/DotNetCodeIT https://plus.google.com/+DotnetcodeIt